首页  思维导图  详情

DOM接口

2020-04-14 14:06:24   0  举报





AI智能生成

前端 JavaScript DOM 常用接口总结

前端

JavaScript

DOM

作者其他创作

大纲/内容

介绍

文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来。 脚本通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。 DOM模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。 DOM的方法(methods)让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。 节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。

Node

Node 是一个接口，许多 DOM API 对象的类型会从这个接口继承, 它允许我们使用相似的方式对待这些不同类型的对象； 比如, 继承同一组方法，或者用同样的方式测试。 以下接口都从 Node 继承其方法和属性： Document, Element, Attr, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, 在方法和属性不相关的情况下，这些接口可能返回 null。 它们可能会抛出异常 - 例如，当将子节点添加到不允许子节点存在的节点时。

属性

Node.childNodes

返回包含指定节点的子节点的集合，该集合为即时更新的集合（live collection）。

Node.textContent

表示一个节点及其后代的文本内容

textContent vs innerHTML

正如其名称，innerHTML 返回 HTML 。 有时人们为了在元素中获取或写入文本而使用innerHTML。 但是，textContent 具有更好的性能，因为它的值不会被解析为HTML。 此外，使用textContent可以防止 XSS 攻击。

方法

Node.contains()

返回一个 Boolean 布尔值，来表示传入的节点是否为该节点的后代节点。

Node.appendChild()

将一个节点添加到指定父节点的子节点列表末尾。

如果被插入的节点已经存在于当前文档的文档树中, 则那个节点会首先从原先的位置移除,然后再插入到新的位置。 如果你需要保留这个子节点在原先位置的显示, 则你需要先用Node.cloneNode方法复制出一个节点的副本, 然后再插入到新位置。 这个方法只能将某个子节点插入到同一个文档的其他位置, 如果你想跨文档插入,你需要先调用document.importNode方法.

document

document.querySelector()

文档对象模型 Document 引用的 querySelector() 方法返回文档中 与指定选择器或选择器组匹配的第一个 html 元素 Element。如果找不到匹配项，则返回null。 提示: 匹配是使用深度优先先序遍历，从文档标记中的第一个元素开始，并按子节点的顺序依次遍历。

Element

Element 是一个通用性非常强的基类，所有 Document 对象下的对象都继承自它。 这个接口描述了所有元素普遍具有的方法和属性。 一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。 例如， HTMLElement 接口是所有 HTML 元素的基本接口，而 SVGElement 接口是所有 SVG 元素的基础。 大多数功能是在这个类的更深层级（hierarchy）的接口中被进一步制定的。 在 Web 平台的领域以外的语言，比如 XUL，通过 XULElement 接口，同样也实现了 Element 接口。

属性

所有属性继承自它的祖先接口 Node，还有自己的父接口 EventTarget。 并且实现了如下属性：ParentNode、ChildNode、NonDocumentTypeChildNode。

方法

element.getElementsByTagName

Element.getElementsByTagName() 方法返回一个动态的包含所有指定标签名的元素的HTML集合HTMLCollection。 指定的元素的子树会被搜索，不包括元素自己。 返回的列表是动态的，这意味着它会随着DOM树的变化自动更新自身。 所以，使用相同元素和相同参数时，没有必要多次的调用Element.getElementsByTagName() 。 如果是HTML文档中的某个元素调用了getElementsByTagName函数，运行前会将参数转为小写字母形式。 故不建议在驼峰式命名的SVG元素中使用，SVG 元素应使用 Element.getElementsByTagNameNS() ，它会保留标签的大写。 Element.getElementsByTagName 和 Document.getElementsByTagName()类似，除了它的搜索被限制为指定元素的后代。