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

JS代码部分

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

HTML代码部分

    <ul class="item">
        <li>text1</li>
        <li>text2</li>
        <li>text3</li>
        <li>text4</li>
        <li>text5</li>
        <li>text6</li>
    </ul>

运行图