miaov-关于this

Posted 2020-08-31

• getElementsByTagName（动态方法） 与 getElementById（静态方法） 的区别

　　1、ID前面只能跟document,不能跟其他元素，比如：document.getElementById(‘list‘)
      TagName前面可以跟其他元素也可以跟document，比如：oUl.getElementsByTagName(‘li‘)
    2、ID只能找到一个元素
       TagName找到一堆元素的集合，因此在用的时候必须要加上：[]
    3、ID如果不存在，用getElementById查找，就找不到
       TagName如果不存在，在后面动态添加了，再用getElementsByTagName查找，这时就可以找到。

• document.body、document.title

　　document.title = 123;
    document.body.innerhtml = ‘abc‘;

• for循环

例子一：
    for (var i=0;i<aLi.length;i++) {}

    每执行一次for循环，需要去计算一下aLi.length，因此出于性能方面的考虑，将代码更改成如下：
    var len = aLi.length
    for (var i=0;i<len;i++) {}

    例子二：
    为body添加3000个按钮
    for (var i=0;i<3000;i++) {
        document.body.innerHTML += ‘<input type="button" value="按钮" />‘
    }

    每执行一次，需要去计算document.body.innerHTML的内容，找到后往里添加一个按钮，
    出于性能方面的考虑，先用一字符串存起来，最后再添加到document.body.innerHTML中，修改如下：

    var str = ‘‘;
    for (var i=0;i<3000;i++) {
        str += ‘<input type="button" value="按钮" />‘
    }

    document.body.innerHTML ＝ str;

    例子三：
    for(var i=0;i<100;i++) {}
    for(var i=0;i<200;i++) {}
    并列的话，var变量赋值可以是同名

    for(var i=0;i<10;i++) {
        for (var j=0;j<10;j++) {}
    }
    嵌套的话，var变量赋值不能相同

• cssText 行间样式

　　 oDiv.style.width = ‘200px‘;
    oDiv.style.height = ‘200px‘;

    oDiv.style.cssText =‘width:200px;height:200px;‘

    都是表示行间的样式，cssText是覆盖原先的行间样式。

• this:指的是调用当前方法（函数）的那个对象

　　1、alert(this) = window.alert(this)    this=>window
    2、function(){} = window.function() {}
    3、
        function fn1() {
            this
        }
        fn1();      this=>window
    4、
       oDiv.onclick = fn1;    this=>oDiv
    5、
       oDiv.onclick = function() {
            this          this=>oDiv
        }
    6、 oDiv.onclick = function() {
        fn1();        fn1()里的this=>window
        }
    7、<div onclick=‘ this ‘></div>   this=>div
    8、<div onclick=‘ fn1() ‘></div>   fn1()里的this=>window

    总结：
        1、直接调用函数，比如：fn1() ,this=>window
        2、谁调用this就是指谁

本文为转载抄袭，如有侵权请联系撤销！！