概述
DOM
DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。
浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。
节点
DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
节点的类型有七种。
- Document：整个文档树的顶层节点
- DocumentType：doctype标签（比如<!DOCTYPE html>）
- Element：网页的各种HTML标签（比如<body>、<a>等）
- Attribute：网页元素的属性（比如class="right"）
- Text：标签之间或标签包含的文本
- Comment：注释
- DocumentFragment：文档的片段
浏览器提供一个原生的节点对象Node，上面这七种节点都继承了Node，因此具有一些共同的属性和方法。
浏览器原生提供document节点，代表整个文档。文档的第一层有两个节点，第一个是文档类型节点（<!doctype html>），第二个是 HTML 网页的顶层容器标签<html>。后者构成了树结构的根节点（root node），其他 HTML 标签节点都是它的下级节点。
除了根节点，其他节点都有三种层级关系。
- 父节点关系（parentNode）：直接的那个上级节点
- 子节点关系（childNodes）：直接的下级节点
- 同级节点关系（sibling）：拥有同一个父节点的节点
Node 接口
所有 DOM 节点对象都继承了 Node 接口，拥有一些共同的属性和方法。这是 DOM 操作的基础。
-
属性
- Node.prototype.nodeType
- Node.prototype.nodeName
- Node.prototype.nodeValue
- Node.prototype.textContent
- Node.prototype.baseURI
- Node.prototype.ownerDocument
- Node.prototype.nextSibling
- Node.prototype.previousSibling
- Node.prototype.parentNode
- Node.prototype.parentElement
- Node.prototype.firstChild，Node.prototype.lastChild
- Node.prototype.childNodes
- Node.prototype.isConnected
-
方法
- Node.prototype.appendChild()
- Node.prototype.hasChildNodes()
- Node.prototype.cloneNode()
- Node.prototype.insertBefore()
- Node.prototype.removeChild()
- Node.prototype.replaceChild()
- Node.prototype.contains()
- Node.prototype.compareDocumentPosition()
- Node.prototype.isEqualNode()，Node.prototype.isSameNode()
- Node.prototype.normalize()
- Node.prototype.getRootNode()
NodeList 接口，HTMLCollection 接口
节点都是单个对象，有时需要一种数据结构，能够容纳多个节点。DOM 提供两种节点集合，用于容纳多个节点：NodeList和HTMLCollection。
这两种集合都属于接口规范。许多 DOM 属性和方法，返回的结果是NodeList实例或HTMLCollection实例。主要区别是，NodeList可以包含各种类型的节点，HTMLCollection只能包含 HTML 元素节点。
ParentNode 接口，ChildNode 接口
节点对象除了继承 Node 接口以外，还会继承其他接口。ParentNode接口表示当前节点是一个父节点，提供一些处理子节点的方法。ChildNode接口表示当前节点是一个子节点，提供一些相关方法。
Document 节点
- 概述
- 属性
-
方法
- document.open()，document.close()
- document.write()，document.writeln()
- document.querySelector()，document.querySelectorAll()
- document.getElementsByTagName()
- document.getElementsByClassName()
- document.getElementsByName()
- document.getElementById()
- document.elementFromPoint()，document.elementsFromPoint()
- document.caretPositionFromPoint()
- document.createElement()
- document.createTextNode()
- document.createAttribute()
- document.createComment()
- document.createDocumentFragment()
- document.createEvent()
- document.addEventListener()，document.removeEventListener()，document.dispatchEvent()
- document.hasFocus()
- document.adoptNode()，document.importNode()
- document.createNodeIterator()
- document.createTreeWalker()
- document.execCommand()，document.queryCommandSupported()，document.queryCommandEnabled()
- document.getSelection()
Element 节点
Element节点对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（以下简称元素节点）。
元素节点的nodeType属性都是1。
-
实例属性
- 元素特性的相关属性
- 元素状态的相关属性
- Element.attributes
- Element.className，Element.classList
- Element.dataset
- Element.innerHTML
- Element.outerHTML
- Element.clientHeight，Element.clientWidth
- Element.clientLeft，Element.clientTop
- Element.scrollHeight，Element.scrollWidth
- Element.scrollLeft，Element.scrollTop
- Element.offsetParent
- Element.offsetHeight，Element.offsetWidth
- Element.offsetLeft，Element.offsetTop
- Element.style
- Element.children，Element.childElementCount
- Element.firstElementChild，Element.lastElementChild
- Element.nextElementSibling，Element.previousElementSibling
-
实例方法
- 属性相关方法
- Element.querySelector()
- Element.querySelectorAll()
- Element.getElementsByClassName()
- Element.getElementsByTagName()
- Element.closest()
- Element.matches()
- 事件相关方法
- Element.scrollIntoView()
- Element.getBoundingClientRect()
- Element.getClientRects()
- Element.insertAdjacentElement()
- Element.insertAdjacentHTML()，Element.insertAdjacentText()
- Element.remove()
- Element.focus()，Element.blur()
- Element.click()
- 参考链接
属性的操作
HTML 元素包括标签名和若干个键值对，这个键值对就称为“属性”（attribute）。
Text 节点和 DocumentFragment 节点
CSS 操作
CSS 与 JavaScript 是两个有着明确分工的领域，前者负责页面的视觉效果，后者负责与用户的行为互动。但是，它们毕竟同属网页开发的前端，因此不可避免有着交叉和互相配合。本节介绍如何通过 JavaScript 操作 CSS。
- HTML 元素的 style 属性
- CSSStyleDeclaration 接口
- CSS 模块的侦测
- CSS 对象
- window.getComputedStyle()
- CSS 伪元素
- StyleSheet 接口
- 实例：添加样式表
- CSSRuleList 接口
- CSSRule 接口
- window.matchMedia()
