前端问题清单——DOM API

chechebecomestrong
111 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

DOM（DocumentObjectModel）：文档对象模型，用对象的概念描述HTML文档。编写HTML代码并运行后，就会在内存中得到一棵DOM树，HTML的写法会被转化成对应的文档模型。

DOM的节点——Node

Node的生成

由文档的create方法创建出来，常用的是document.createElement

Node属性

  • 父节点：parentNode

  • 子节点：childNodes

  • 第一个子节点：firstChild

  • 最后一个子节点：lastChild

  • 当前节点之后的兄弟节点：nextSibling

  • 当前节点的前一个兄弟节点：previousSibling

Node方法

基础操作：

appenChild：添加子节点

insertBefore：在指定节点前插入新节点

removeChild：删除子节点

replaceChild：替换子节点

高级API：

compareDocumentPosition：比较当前节点与任意文档中的另一个节点的位置关系

contains：一个节点是否包含另一个节点

isEqualNode：比较两个节点是否完全相同

isSameNode：比较两个节点是否是同一个节点

cloneNode：复制节点，参数如果是true，会做深拷贝，参数如果是false，则是浅拷贝

Element

Element表示元素，是Node的子类，元素对应的是HTML的标签，既有子节点，又有属性。

Element提供了操作属性的方法：

getAttribute

setAttribute

removeAttribute

DOM的遍历

通过Node的属性配合JavaScript可以遍历DOM树，除此之外，DOM API提供了NodeIterator和TreeWalk用于遍历树

NodeIterator

let nodeIterator = document.createNodeIterator(root, whatToShow, filter);

  • root表示遍历的根节点

  • whatToshow是无符号长整型的位掩码，-1是显示所有节点，128显示Comment节点，256显示Document节点，1显示Element节点

  • filter用来过滤遍历到的节点，根据提供的过滤器对单个节点进行判定

NodeIterator提供了两个方法：分别为访问前一个Node和访问下一个Node，分别为NodeIterator.previousNode()和NodeIterator.nextNode()

TreeWalker

let treeWalker = document.createTreeWalker(root, whatToShow, filter);

参数与NodeIterator的一样，但是TreeWalker提供了访问多种Node的方法

  • TreeWalker.parentNode()：访问当前节点的父节点

  • TreeWalker.firstChild()：访问当前节点的第一个子节点

  • TreeWalker.lastChild()：访问当前节点的最后一个子节点

  • TreeWalker.previousSibling()：访问当前节点的上一个兄弟节点

  • TreeWalker.nextSibling()：访问当前节点的下一个兄弟节点

  • TreeWalker.previousNode()：访问前一个节点

  • TreeWalker.nextNode()：访问后一个节点

DOM的事件

包括DOM触发和监听事件，在DOM绑定和解绑事件以及事件流，篇幅有限，下次详细写

总结

DOM API十分丰富，遍布DOM的方方面面，在充分了解DOM API之后，能让代码更加规范，代码的性能更高

avatar
文章
阅读
粉丝