通过节点操作，实现隔行变色效果

要点：

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>

效果：

通过节点操作，实现隔行变色效果

要点：

猜你喜欢