要点:
1.通过.childNodes获取的节点,有标签、文本(包括空文本)、和属性都要算在内。我们要的只是元素类型为标签,通过nodeType判断元素的类型,标签返回值是1,属性返回的是2,文本返回的是3
2.通过nodeName返回的节点名字,如果是标签节点,返回标签类型的大写名字如LI(<li>),如果是属性节点返回的是属性的小写,文本节点返回#text
3.通过nodeValue获取节点的值,如果是标签节点返回的是null,属性节点返回属性值,文本节点返回文本内容
4.因为浏览器之间的内核不同,导致获取节点的方法不一样,或者使用相同的方法会在不同的浏览器执行中,运行不同的效果。所以就要写出兼容代码,以后会总结。
针对这个案例
通过childNodes获取到的节点包括空的换行共有17个,而需要执行变色效果的li标签,只有8个。如果不另外添加一个可以专门表示标签的索引,刚好全是黄色,因为空白文本的前景色设为了红色而看不到。
代码:
<!DOCTYPE html>
<html lang="en"