基础系列-DOM
参考阅读：
MDN
《JavaScript 高级程序设计-第四版》- 第15章
DOM（文档对象模型）
dom 是针对 HTML 和 XML 文档的一个 API（应用程序编程接口）。
节点层次
dom 可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。
节点分为几种不同的类型，每种类型分别表示文档中不同的信息及标记。
每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。
节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。
文档节点是每个文档的根节点。<html>元素是文档元素，文档元素是文档的最外层元素，文档中其他所有元素都包含在文档元素中。
Node类型
DOM1级定义了一个Node接口，改接口将由DOM中的所有节点类型实现。
JavaScript 中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。
每个节点都有一个nodeType属性，用于表明节点的类型。
以下接口都从 Node 继承其方法和属性：
Document, Element, Attr, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction (en-US), DocumentFragment, DocumentType, Notation, Entity, EntityReference
在方法和属性不相关的特定情况下，这些接口可能返回 null。它们可能会抛出异常 - 例如，当将子节点添加到不允许子节点存在的节点时。
类数组NodeList 是实时的活动对象，是一直变化的。
属性
parentNode
childNodes
nodeName：对于元素而言，始终等于元素的标签名
nodeValue：对于元素而言，始终为null
previousSibling
nextSibling
firstChild
lastChild
ownerDocument：是一个指向代表整个文档的文档节点的指针。
方法
hasChildNodes()
appendChild()
insertBefore()：如果参照节点是null，则和appendChild()结果相同
replaceChild()：要插入的节点和要替换的节点
removeChild()：要移除的节点
cloneNode()：传入布尔值，表示深拷贝还是浅拷贝。深拷贝则会拷贝子元素，浅拷贝只会拷贝当前元素。
normalize()：标准化文本节点，如果是空文本节点则删除，如果是两个相邻的同胞节点则合并为一个文本节点。
Document 类型
继承 Node 类型。
Document 类型是 JavaScript 中表示文档节点的类型。
文档对象 document 是 HTMLDocument 的实例，表示整个 HTML 页面。（HTMLDocument 继承 Document）
document 是 window 对象的属性，因此是一个全局对象。
<html>元素获取：document.documentElement 或 document.childNodes[0] 或 document.firstChild
<body>元素获取：document.body
Document 类型是只读的，只能有一个 Element 类型的子节点，即<html>。
属性：
URL
domain
referrer
anchors：获取文档中所有带 name 属性的 <a> 元素
forms：获取文档中所有 <form> 元素
images：获取文档中所有 <img> 元素
links：获取文档中所有带 href 属性的 <a> 元素
implementation：提供了与浏览器 DOM 实现相关的信息和能力
classList：返回一个类数组 DOMTokenList 的实例，可以便捷增删改切换 className。
方法：
getElementById
getElementsByTagName，返回类数组HTMLCollection对象。取得文档所有对象可以使用通配符 * ，getElementsByTagName(*)
HTMLCollection 对象有namedItem() 通过 name 属性获取某一项的引用，也可以使用数字索引或字符串索引，数字索引会调用 item()，字符串索引会调用namedItem()
getElementsByName
write，写入文本
writeIn，写入文本后会自动追加一个换行符
open，打开网页输出流
close，关闭网页输出流
querySelector：接受 CSS 选择器参数，返回匹配改模式的第一个后代元素，如果没有匹配项则返回null。会从document（文档）开始搜索
querySelectorAll
getElementsByClassName：返回匹配一个类或多个类的 NodeList。
Element 类型
Element 类型继承 Node 类型。
Element 表示 XML 或 HTML 元素，对外暴露出访问元素标签名、子节点和属性的能力。
可以通过 nodeName 或 tagName 属性来获取元素的标签名。
所有 HTML 元素都通过 HTMLElement 类型表示，包括其直接实例和间接实例。所有HTML元素都是HTMLElement 或其子类型的实例。
HTMLElement 直接继承 Element 并增加了一些属性。
属性
id
title
lang
dir
className
attributes：属性包含一个类数组 NamedNodeMap 实例
NamedNodeMap 对象包含下列方法：
getNamedItem(name)，返回 nodeName 属性等于 name 的节点
removeNamedItem(name)，删除 nodeName 属性等于 name 的节点
setNamedItem(node)，向列表中添加 attr node 节点，以其 nodeName 为索引。创建属性节点：document.createAttribute()
方法
getAttribute
setAttribute
removeAttribute
属性名不区分大小写
querySelector：接受 CSS 选择器参数，返回匹配改模式的第一个后代元素，如果没有匹配项则返回null。会从当前Element的后台开始搜索。
querySelectorAll：返回一个 NodeList 静态实例。
matches：接受一个CSS选择符参数，如果元素匹配则该选择器返回 true，否则返回 false。
find - 浏览器未实现
findAll - 浏览器未实现
面试题：
HTMLElement、Element、Node 之间的关系