二、getElementsByTagName
全线浏览器兼容的,得到元素的方法,就这两个:
document.getElementById() 通过id得到元素
document.getElementsByTagName(); 通过标签名得到元素们
getElementsByTagName就是通过标签名得到元素,得到的是页面上所有该种标签元素,得到的是数组,数组可以有下标,开始是0,最后一项是.length-1
既然是数组,就能通过循环语句批量控制,比如表格的隔行变色:
1 var otrs = document.getElementsByTagName("tr");
2
3 for(var i = 0 ; i < otrs.length ; i+=2){
4 otrs[i].style.backgroundColor = "yellowgreen";
5 }
假如页面上只有一个p标签,那么得到的也是数组。
1 var op = document.getElementsByTagName("p")[0];
2
3 op.style.backgroundColor = "red";
2.2 连续打点调用get
先去选择一个HTML标签,然后选择这个HTML标签中的所有p标签:
1var ps = document.getElementById("box2").getElementsByTagName("p");
连续get可以很疯狂,但是如果是数组,一定要加上下标,才能变成对象:
1document.getElementsByTagName("div")[1].getElementsByTagName("p")[2].getElementsByTagName("span")[1].style.color = "red";
for循环包裹添加监听的语句。
对序号的影响,闭包的影响又出现了:
1for(var i = 0 ; i < ps.length ; i++){
2 ps[i].onclick = function(){
3 alert("我是老" + i + "点我干嘛?!!");
4 }
5}
所以每个盒子点击之后,都是7了,而不是我们预想的0、1、2、3、4、5、6。
闭包的影响:匿名函数定义的时候,已经记住了自己认识i,但是认识i不是表示把i的值赋值了一份记住,而是真真正正的认识了鲜活的、有生命的i。所以匿名函数执行的时候(就是事件发生时)i已经是7。
解决这个事情:
1for(var i = 0 ; i < ps.length ; i++){
2 (function(m){
3 ps[m].onclick = function(){
4 alert("我是老" + m + "点我干嘛?!!");
5 }
6 })(i);
7}
除了IIFE之外,还有一种方法,就是强制添加属性的方法:
任何一个对象,我们都可以通过点语法来设置新的属性。
1 for(var i = 0 ; i < ps.length ; i++){
2 ps[i].idx= i; //先不要着急设置监听,先编号
3
4 ps[i].onclick = function(){
5 alert("我是老" + this.idx+ "点我干嘛?!!"); //自己的编号
6 }
7 }
---------------------------------------------------------------------------------
2.3 补充一个小知识点,ele.innerHTML属性就是HTML标签内部的文本。可以读,可以设。
---------------------------------------------------------------------------------
2.4 所有window对象的方法,都可以不用写window
现在我们要学习一个小知识,所有window对象的方法,都可以不用写window。至于window对象是什么,我们后面课程介绍。
比如,alert方法是window对象的方法,所以我们可以简写:
1window.alert("哈哈哈");
等价于
1alert("哈哈哈");
得到计算后的样式,可以直接使用getComputedStyle函数,而不用写window.
1getComputedStyle(oDiv).getPropertyValue("width")
1getComputedStyle(oDiv).getPropertyValue("padding-left")
getPropertyValue看上去就像打它,看着就不爽,所以可以简写:
1getComputedStyle(oDiv)["padding-left"]
---------------------------------------------------------------------------------
2.5 window.getComputedStyle(oDiv).getPropertyValue("width")
现在我们只能得到行内的样式,事实上DOM提供了可靠的API,得到计算后的样式。
W3C制定的标准API,所有现代浏览器(包括IE9,但不包括之前的版本)都实现了window.getComputedStyle(),该方法接收一个要进行样式计算的元素,并返回一个样式对象。样式对象提供了一个名为getPropertyValue()的方法,用于检索特定样式属性的计算样式。getPropertyValue方法接收css属性名称,而不是驼峰式的名称。getPropertyValue()可以不写,直接用方括号来检索属性也可以。
get得到,computed计算后,style样式
get得到,property属性,vaule值
比如:
1window.getComputedStyle(oDiv).getPropertyValue("width")
总结:
1高级:
2window.getComputedStyle(oDiv).getPropertyValue("padding-left");
3getComputedStyle(oDiv).getPropertyValue("padding-left");
4getComputedStyle(oDiv)["padding-left"];
5
6IE6、7、8:
7oDiv.currentStyle.paddingLeft;
8oDiv.currentStyle["paddingLeft"];