javaScript:DOM（父子/兄弟）常用属性

目录

前言

一.父子关系 

父子关系的常用属性

childNodes 获取所有的子节点

children 获取所有的子元素（dom元素）

firstChild 获取元素的第一个子节点，相当于 childNodes[0]

firstElementChild 获取元素的第一个元素 相当于 children[0]

lastChild 获取元素的最后一个子节点 

lastElementChild 获取元素的最后一个子元素

注意

兄弟关系的常用属性

nextSibling 获取当前元素的下一个兄弟节点

nextElementSibling  获取当前元素的下一个兄弟元素（ie 6 7 8 不支持）

previousSibling  获取当前元素的上一个兄弟节点

previousElementSibling 获取当前元素的上一个兄弟元素（ie 6 7 8 不支持）

案例 ；封装一个通用方法，使其在低版本ie中，也可以直接获取下一个dom元素，传入当前元素对象，返回下一个元素对象

---

前言

       父子关系和兄弟关系在 DOM 中具有重要的作用，使开发者能够方便地导航和操作 DOM 元素。它们为动态创建和修改 DOM 结构、样式和布局控制、事件处理和委托等提供了强大的功能和灵活性。

一.父子关系 

父子关系的常用属性

childNodes 获取所有的子节点

children 获取所有的子元素（dom元素）

let list = document.querySelector('#list')console.log(list.childNodes,list.children);

firstChild 获取元素的第一个子节点，相当于 childNodes[0]

firstElementChild 获取元素的第一个元素 相当于 children[0]

 //把第一个li的颜色设置为红色list.firstElementChild.style.color = '#f00';

   let list = document.querySelector('#list')console.log(list.firstChild,list.firstElementChild);

lastChild 获取元素的最后一个子节点 

lastElementChild 获取元素的最后一个子元素

   console.log(list.lastChild,list.lastElementChild);list.lastElementChild.style.fontSize = '40px';

注意

       标准浏览器好ie高版本会把回车（换行）当做文本节点，ie低版本（8及以下）不会，也就是ie 6 7 8 不支持。

      parentNode 和 parentElement 都是查找元素的父元素 一般的 parentNode 兼容性更好，因此更常用

 //查找父节点console.log(li.parentNode,li.parentElement);

兄弟关系的常用属性

nextSibling 获取当前元素的下一个兄弟节点

nextElementSibling  获取当前元素的下一个兄弟元素（ie 6 7 8 不支持）

let li = document.querySelector('#list>li:nth-child(6)')li.style.fontSize = '40px'console.log( li.nextSibling,li.nextElementSibling);//给当前元素的下一个元素，添加样式li.nextElementSibling.style.color = 'pink'

previousSibling  获取当前元素的上一个兄弟节点

previousElementSibling 获取当前元素的上一个兄弟元素（ie 6 7 8 不支持）

 //获取当前元素的上一个 节点和上一个元素console.log(li.previousSibling,li.previousElementSibling);li.previousElementSibling.style.color = '#f60'

案例 ；封装一个通用方法，使其在低版本ie中，也可以直接获取下一个dom元素，传入当前元素对象，返回下一个元素对象

   function getEle(domObj){// 如果不存在参数if (!domObj) {return null;}//获取传入对象的下一个节点let ele = domObj.nextSibling;while (ele&&ele.nodeType!=1) {    //如果ele存在console.log('输出'+ ele.nodeType);ele = ele.nextSibling;// //如果没有下一个元素// if (ele==null) {//     return null;// }}return ele;}console.log(getEle(li));let li10 = document.querySelector('#list>li:nth-child(10)')console.log(getEle(li10));let head = document.querySelector('head')console.log(getEle(head));let html = document.querySelector('html')console.log(html);console.log(getEle(html));