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));