欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js中的firstElementChild,lastElementChild,parentNode等属性

程序员文章站 2022-04-21 10:51:51
...

js获取元素

  1. <body>
  2. <ul class="list">
  3. <li class="item">item1</li>
  4. <li class="item">item2</li>
  5. <li class="item">item3</li>
  6. <li class="item">item4</li>
  7. <li class="item">item5</li>
  8. </ul>
  1. <script>
  2. let ul = document.querySelector(".list");
  3. console.log(ul);
  4. console.log(ul.childNodes);

先使用querySelector(“.list”)获取ul元素。为了获取ul的子元素可以使用childNodes方法,结果是:
js中的firstElementChild,lastElementChild,parentNode等属性
返回的Nodelist共有11个,原因是节点类型包括了很多中,例如,元素,文本,属性,注释等。
children比较好
console.log(ul.children);返回五个元素
js中的firstElementChild,lastElementChild,parentNode等属性


  1. console.log(ul.children[0].textContent);
  2. ul.children[0].style.background = "red";

上面的方法可以获得ul第一个子元素的文本,通过style可以控制样式。
Array.from能够将上面的元素集合转化为一个真正的数组。
下面比较一下

  1. console.log(ul.children);
  2. console.log(Array.from(ul.children));

js中的firstElementChild,lastElementChild,parentNode等属性
还有更加简单的一种方式
console.log([...ul.children]);
效果是一样的。


  1. ul.firstElementChild.style.background = "yellow";
  2. ul.firstElementChild.nextElementSibling.style.background = "red";
  3. ul.lastElementChild.previousElementSibling.style.background = "wheat";
  4. ul.lastElementChild.style.background = "cyan";
  5. ul.lastElementChild.parentElement.style.border = "4px solid";
  6. ul.lastElementChild.parentNode.style.border = "4px solid green";
  7. </script>

js中的firstElementChild,lastElementChild,parentNode等属性