DOM

概述

DOM

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。

浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。

节点

DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

节点的类型有七种。

1. Document：整个文档树的顶层节点
2. DocumentType：doctype标签（比如）
3. Element：网页的各种HTML标签（比如、等）
4. Attribute：网页元素的属性（比如class="right"）
5. Text：标签之间或标签包含的文本
6. Comment：注释
7. DocumentFragment：文档的片段

浏览器提供一个原生的节点对象Node，上面这七种节点都继承了Node，因此具有一些共同的属性和方法。

浏览器原生提供document节点，代表整个文档。文档的第一层有两个节点，第一个是文档类型节点（），第二个是 HTML 网页的顶层容器标签。后者构成了树结构的根节点（root node），其他 HTML 标签节点都是它的下级节点。

除了根节点，其他节点都有三种层级关系。

1. 父节点关系（parentNode）：直接的那个上级节点
2. 子节点关系（childNodes）：直接的下级节点
3. 同级节点关系（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 元素节点。

• NodeList 接口
  • 概述
  • NodeList.prototype.length
  • NodeList.prototype.forEach()
  • NodeList.prototype.item()
  • NodeList.prototype.keys()，NodeList.prototype.values()，NodeList.prototype.entries()
• HTMLCollection 接口
  • 概述
  • HTMLCollection.prototype.length
  • HTMLCollection.prototype.item()
  • HTMLCollection.prototype.namedItem()

ParentNode 接口，ChildNode 接口

节点对象除了继承 Node 接口以外，还会继承其他接口。ParentNode接口表示当前节点是一个父节点，提供一些处理子节点的方法。ChildNode接口表示当前节点是一个子节点，提供一些相关方法。

• ParentNode 接口
  • ParentNode.children
  • ParentNode.firstElementChild
  • ParentNode.lastElementChild
  • ParentNode.childElementCount
  • ParentNode.append()，ParentNode.prepend()
• ChildNode 接口
  • ChildNode.remove()
  • ChildNode.before()，ChildNode.after()
  • ChildNode.replaceWith()

Document 节点

• 概述
• 属性
  • 快捷方式属性
  • 节点集合属性
  • 文档静态信息属性
  • 文档状态属性
  • document.cookie
  • document.designMode
  • document.implementation
• 方法
  • 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）。

• Element.attributes 属性
• 元素的标准属性
• 属性操作的标准方法
  • 概述
  • Element.getAttribute()
  • Element.getAttributeNames()
  • Element.setAttribute()
  • Element.hasAttribute()
  • Element.hasAttributes()
  • Element.removeAttribute()
• dataset 属性

Text 节点和 DocumentFragment 节点

• Text 节点的概念
• Text 节点的属性
  • data
  • wholeText
  • length
  • nextElementSibling，previousElementSibling
• Text 节点的方法
  • appendData()，deleteData()，insertData()，replaceData()，subStringData()
  • remove()
  • splitText()
• DocumentFragment 节点

CSS 操作

CSS 与 JavaScript 是两个有着明确分工的领域，前者负责页面的视觉效果，后者负责与用户的行为互动。但是，它们毕竟同属网页开发的前端，因此不可避免有着交叉和互相配合。本节介绍如何通过 JavaScript 操作 CSS。

• HTML 元素的 style 属性
• CSSStyleDeclaration 接口
  • 简介
  • CSSStyleDeclaration 实例属性
  • CSSStyleDeclaration 实例方法
• CSS 模块的侦测
• CSS 对象
  • CSS.escape()
  • CSS.supports()
• window.getComputedStyle()
• CSS 伪元素
• StyleSheet 接口
  • 概述
  • 实例属性
  • 实例方法
• 实例：添加样式表
• CSSRuleList 接口
• CSSRule 接口
  • 概述
  • CSSRule 实例的属性
  • CSSStyleRule 接口
  • CSSMediaRule 接口
• window.matchMedia()
  • 基本用法
  • MediaQueryList 接口的实例属性
  • MediaQueryList 接口的实例方法

Mutation Observer API

• 概述
• MutationObserver 构造函数
• MutationObserver 的实例方法
  • observe()
  • disconnect()，takeRecords（）
• MutationRecord 对象
• 应用示例
  • 子元素的变动
  • 属性的变动
  • 取代 DOMContentLoaded 事件
• 参考链接