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

要点:

1.通过.childNodes获取的节点,有标签、文本(包括空文本)、和属性都要算在内。我们要的只是元素类型为标签,通过nodeType判断元素的类型,标签返回值是1,属性返回的是2,文本返回的是3

2.通过nodeName返回的节点名字,如果是标签节点,返回标签类型的大写名字如LI(<li>),如果是属性节点返回的是属性的小写,文本节点返回#text

3.通过nodeValue获取节点的值,如果是标签节点返回的是null,属性节点返回属性值,文本节点返回文本内容

4.因为浏览器之间的内核不同,导致获取节点的方法不一样,或者使用相同的方法会在不同的浏览器执行中,运行不同的效果。所以就要写出兼容代码,以后会总结。

 

针对这个案例

通过childNodes获取到的节点包括空的换行共有17个,而需要执行变色效果的li标签,只有8个。如果不另外添加一个可以专门表示标签的索引,刚好全是黄色,因为空白文本的前景色设为了红色而看不到。

代码:

<!DOCTYPE html>
<html lang="en"
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值