通过节点操作,实现隔行变色效果
要点:
1.通过.childNodes获取的节点,有标签、文本(包括空文本)、和属性都要算在内。我们要的只是元素类型为标签,通过nodeType判断元素的类型,标签返回值是1,属性返回的是2,文本返回的是3
2.通过nodeName返回的节点名字,如果是标签节点,返回标签类型的大写名字如LI(<li>),如果是属性节点返回的是属性的小写,文本节点返回#text
3.通过nodeValue获取节点的值,如果是标签节点返回的是null,属性节点返回属性值,文本节点返回文本内容
4.因为浏览器之间的内核不同,导致获取节点的方法不一样,或者使用相同的方法会在不同的浏览器执行中,运行不同的效果。所以就要写出兼容代码,以后会总结。
针对这个案例
通过childNodes获取到的节点包括空的换行共有17个,而需要执行变色效果的li标签,只有8个。如果不另外添加一个可以专门表示标签的索引,刚好全是黄色,因为空白文本的前景色设为了红色而看不到。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title
</head>
<body>
<input type="button" value="变色" id="btn"/>
<ul id="cool">
<li>陈小帅</li>
<li>又变帅了哦</li>
<li>陈小帅</li>
<li>又变帅了哦</li>
<li>陈小帅</li>
<li>又变帅了哦</li>
<li>陈小帅</li>
<li>又变帅了哦</li>
</ul>
<script>
function my$(id){
return document.getElementById(id);
}
// 封装代码
my$("btn").onclick = function(){
var count = 0;
//节点一共有 17个节点,而li标签只有8个,如果不加一个计数的变量,
//如果不加计数刚好本来的红色变化部分的成了空换行文本的位置,悲剧了
var nodes = my$("cool").childNodes;
for(var i=0; i<nodes.length; i++){
if(nodes[i].nodeType==1 && nodes[i].nodeName=="LI"){
// 通过.nodeName获取到的节点的名字,标签名大写。通过.nodeType获取到的类型,标签为1
nodes[i].style.backgroundColor = count%2 == 0 ?"red" :"yellow";
// 三元表达式,先将后面的count%2这个三选表达式写出来,然后再加上前面的
count++;
// 每次执行一次颜色改变之后,获取到下一个li标签的类型之后,再执行一次判断
}
}
}
</script>
</body>
</html>
效果: