JavaScript中DOM节点的查找(遍历)

Love The Way You Lie 2023-02-13 14:55 12阅读 0赞

## JavaScript中DOM节点的查找(遍历) ##

这篇文章讲一下DOM节点的查找，即DOM节点的遍历。说道遍历大家应该不陌生了，在js中，通过DOM节点的遍历，我么可以通过任意一个元素找到另外的任意一个元素。前期把这个学到位，到了后期开始学习jQuery时会感觉方便很多。

整个DOM中，节点与节点之间的关系只有两种，兄弟(同胞)关系和父子关系。遍历节点用到的属性也主要是这个两类。

**HTML代码：**

<div class="wrap" style="position:relative">
            <div class="box">
                盒子01
                <p>这是一个段落</p>
            </div>
            <div class="box box2">盒子02</div>
            <div class="box box3">盒子03</div>
            <ul class="list">
                <li>列表01</li>
                <li>列表02</li>
                <li>列表03</li>
                <li>列表04</li>
            </ul>
        </div>

#### 1.父子关系遍历 ####

var oWrap=document.getElementsByClassName("wrap")[0];
        var oBox=document.getElementsByClassName("box")[0];
    
    
    
        // children 返回子(元素)节点，不包含空节点
        console.log(oWrap.children);//
        // childNodes 返回子节点，包含空节点
        console.log(oWrap.childNodes);//text 空文本
    
        // firstElementChild 第一个子(元素)节点，不包含空节点
        console.log(oWrap.firstElementChild.firstChild);
        // firstChild 第一个子节点，包含空节点
        console.log(oWrap.firstChild);
        
        // lastElementChild 最后一个子(元素)节点，不包含空节点
        console.log(oWrap.lastElementChild);
        // lastChild 最后一个子节点，包含空节点
        console.log(oWrap.lastChild);//#text
    
        // parentNode 父节点
        console.log(oBox.parentNode.parentNode);
    
        // offsetParent 第一个有定位属性的父节点，如果没有，则返回body
        console.log(oBox.offsetParent);

#### 2.兄弟(同胞)关系 ####

// nextElementSibling 下一个兄弟(元素)节点，不包含空节点
        console.log(oBox.nextElementSibling.nextElementSibling);
        // nextSibling 下一个兄弟节点，包含空节点
        console.log(oBox.firstChild.nextSibling);
        console.log(oBox.nextSibling);
    
        // previousElementSibling 前一个兄弟节点，不包含空节点
        console.log(oBox.previousElementSibling);
        // previousSibling 前一个兄弟节点，包含空节点
        console.log(oBox.previousSibling);

**视频讲解链接：  
https://www.bilibili.com/video/BV12t4y1C7DH/**