DOM接口

DOM 接口

man

介绍

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

Node

font color=\"#c41230\

属性

Node.childNodes

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

Node.textContent

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

textContent vs innerHTML

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

方法

Node.contains()

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

Node.appendChild()

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

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()类似，除了它的搜索被限制为指定元素的后代。