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

简介: JavaScript中DOM节点的查找(遍历)这篇文章讲一下DOM节点的查找,即DOM节点的遍历。说道遍历大家应该不陌生了,在js中,通过DOM节点的遍历,我么可以通过任意一个元素找到另外的任意一个元素。前期把这个学到位,到了后期开始学习jQuery时会感觉方便很多。整个DOM中,节点与节点之间的关系只有两种,兄弟(同胞)关系和父子关系。遍历节点用到的属性也主要是这个两类。HTML代码: <div class="wrap" style="position:relative"> <div class="box"> 盒子01

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




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


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


HTML代码:

<divclass="wrap"style="position:relative"><divclass="box">            盒子01
<p>这是一个段落</p></div><divclass="box box2">盒子02</div><divclass="box box3">盒子03</div><ulclass="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/

相关文章
|
27天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
13天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
13天前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
25天前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
25天前
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
1月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
48 4
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树