获取元素和遍历dom的方法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
    </ul>
    <script> 
       //获取元素
        const items = document.querySelectorAll('.list>*')
        items.forEach(ele=>ele.style.color='blue')
        const item = document.querySelector('.list > *')
        item.style.border ='1px solid red'
    </script>
    <script>
    let list = document.querySelector('.list')
      //获取所有子节点
      let node = list.childNodes
      //获取所有子元素节点
      let childNode = list.children
      //获取第一个元素
      let firstNode = list.firstElementChild
      firstNode.style.color = 'yellow'
      //获取后一个元素
      let nextNode = list.querySelector(':first-child + *')
      nextNode.style.color='green'
      //获取最后一个元素
      let lastNode = list.lastElementChild
      lastNode.style.color = 'lightgreen'
      //获取前一个元素
      let prevNode = lastNode.previousElementSibling
      prevNode.style.color = 'black'
      //获取父节点
      let parentNode = lastNode.parentNode
      parentNode.style.border = '1px solid blue'
    </script>
</body>
</html>
相关文章
