知识点总结
- 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 (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变量赋值不能相同
oDiv.style.width = '200px';
oDiv.style.height = '200px';
oDiv.style.cssText ='200px;height:200px;'
都是表示行间的样式,cssText是覆盖原先的行间样式。
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就是指谁