博客列表 >获取元素的api及dom常用的遍历方法

获取元素的api及dom常用的遍历方法

子墨吖ฅฅ
子墨吖ฅฅ原创
2022年11月07日 22:41:01315浏览

JS代码部分

  1. // 获取item的所有li标签
  2. let list = document.querySelectorAll('.item > *')
  3. //给所有li标签字体颜色改为红色 (第一种遍历方法)
  4. list.forEach(li => (li.style.color = 'red'))
  5. // 单独设置第一个li标签的字体为粉色(第一种方法)
  6. let child = document.querySelector('.item > *')
  7. child.style.color = 'pink'
  8. // 使用第二种方法进行获取子节点
  9. list = document.querySelector('.item')
  10. // 单独设置最后一个li标签的字体为蓝色(第二种方法)
  11. let last = list.lastElementChild
  12. last.style.color = 'blue'
  13. //遍历给所有li标签加上边框(第二种遍历方法)
  14. ;[...list.children].forEach(item => (item.style.border = '1px solid black'))

HTML代码部分

  1. <ul class="item">
  2. <li>text1</li>
  3. <li>text2</li>
  4. <li>text3</li>
  5. <li>text4</li>
  6. <li>text5</li>
  7. <li>text6</li>
  8. </ul>

运行图

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议