【前端】关于DOM节点

参考这个： https://juejin.cn/post/6844903849614901261

DOM树的根节点是document对象

DOM节点类型：HTML元素节点(element nodes)外，还有文字节点(text nodes)、注释节点(comment nodes)

常见的DOM节点的选取方式：

// 根据传入的值，找到 DOM 中 id 为 'xxx' 的元素。

document.getElementById('xxx');

// 针对给定的 tag 名称，返回所有符合条件的 NodeList 对象(节点的集合)

document.getElementsByTagName('xxx');

// 针对给定的 class 名称，返回所有符合条件的节点集合

document.getElementsByClassName('xxx');

// 针对给定的 Selector 条件，返回第一个 或 所有符合条件的节点集合

document.querySelector('xxx');

document.querySelectorAll('xxx');

DOM 节点间的查找遍历(Traversing)

由于DOM 节点有分层的概念，于是节点与节点之间的关系，我们大致上可以分成以下两种：

父子关系：除了document之外，每一个节点都会有个上层的节点，我们通常称之为「父节点」 (Parent node)，而相对地，从属于自己下层的节点，就会称为「子节点」 (Child node)。

Node.childNodes

所有的DOM节点对象都有childNodes属性，且此种属性无法修改。

我们可以通过Node.hasChildNodes()来检查某个DOM节点是否有子节点。

var node = document.querySelector('#hello');

// 如果 node 內有子元素

if( node.hasChildNodes() ) {

    // 可以通过 node.childNodes[n] (n 为数字索引) 取得对应的节点

    // 注意，NodeList 对象內容为即时更新的集合

    for (var i = 0; i < node.childNodes[i].length; i++) {

       // ...

    };

}

Node.childNodes返回的可能会有这几种：

HTML 元素节点(element nodes)

文字节点(text nodes)，包含空格

注释节点(comment nodes)

兄弟关系：有同一个「父节点」的节点，那么他们彼此之间就是「兄弟节点」(Siblings node)。

查看这个节点有没有包含node.contains(givenNode)

https://developer.mozilla.org/zh-CN/docs/Web/API/Node/contains

巴特西

【前端】关于DOM节点

最新文章

热门文章