Erik's Blog

《JavaScript 高级程序设计》笔记(4) —— DOM 及 DOM 扩展

(更新于 )JavaScript#DOM

DOM : DOM 的各种节点及 DOM 操作技术 DOM 扩展 : Selectors API、 Element Traversal、 HTML5 DOM DOM2 和 DOM3 : DOM2 和 DOM3 的变化、操作样式的 API、DOM 遍历与范围

第 10 章 DOM

节点层次

文档节点 是每个文档的 根节点。 文档元素 是文档的最外层元素，每个文档只能有一个文档元素(HTML 中为 <html> 元素)。

Node 类型

JavaScript 中所有的节点类型都继承自 Node 类型。DOM1 级定义了一个 Node 接口，以 Node 类型实现(除 IE 以外)。

nodeType 属性用于表明节点类型，最常用的是元素(1)和文本(3)节点。 为了确保跨浏览器兼容，最好用 nodeType 属性与数字数值进行比较来检查节点的类型。(someNode.nodeType == 1)

nodeName 和 nodeValue 属性 : 取值取决于节点类型 元素节点的 nodeName 为元素标签名，nodeValue 值始终为 null。

NodeList 对象转换为数组

NodeList 对象是基于 DOM 结构动态执行查询的结果。 NodeList 对象与数组类似，有 length 属性，可通过下标 (someNode.childNodes[0]) 或者通过 item() 方法 (someNode.childNodes.item(0))来访问 NodeList 中的节点。

将 NodeList 对象转换为数组 :

对 arguments 使用 Array.prototype.slice 可以将 arguments 转换成数组。

对 NodeList 使用 Array.prototype.slice.call(someNode.childNodes, 0) 可以将 NodeList 转换成数组 (IE8+)。

兼容所有浏览器的转换 :

function converToArray (node) {
	var array = null;
    try {
		Array.prototype.slice.call(someNode.childNodes, 0);
	} catch (e) {
		array = new Array();
		for (var i=0; i<node.length; i++) {
			array.push(node[i]);
		}
	}
}

节点关系

  • childNodes 属性 : 每个节点都有一个 childNodes 属性，保存一个 NodeList 对象。
  • parentNode 属性 : 指向文档树中的父节点
  • previousSlibing : childNodes 中上一个同胞节点，不存在为 null。
  • nextSibling : childNodes 中下一个同胞节点，不存在为 null。
  • firstChild 和 lastChild ：父节点的第一个和最后一个节点。父节点的 firstChild = childNodes[0]; lastChild = childNodes[length-1]
  • hasChildNodes() 方法 : 查询到有一个或者多个子节点的情况下会返回 true。
  • ownerDocument 属性 : 指向表示整个文档的文档节点。

操作节点 ：基于 parentNode 操作

  • appendChild(newNode) : 向 childNodes 列表的末尾添加一个节点，返回新增的节点。如果节点已经是文档的一部分，节点会转移到新位置 (DOM 节点不能出现在文档中的多个位置上)。
  • insertBefore(newNode, indexNode) : 向 childNodes 列表 indexNode 节点位置前添加一个节点，返回新增节点。如果 indexNode = null ，与 appendChild() 操作相同。
  • replaceChild(newNode, oldNode) : 使用 newNode 替换 childNodes 列表的 oldNode 节点，返回 oldNode。
  • removeChild(indexNode) : 移除 childNodes 列表的 indexNode 节点，返回 indexNode。

其他方法

  • cloneNode(true/false) : 创建并返回节点副本。接受一个布尔值参数，为 true 时深复制，复制节点和整个子节点树，为 false 时浅复制，只复制节点本身。
  • normalize() : 处理文档树中的文本节点。

Document 类型

Document 类型可以表示 HTML 页面或者其他基于 XML 的文档。 浏览器中， document 对象表示整个 HTML 页面，是 HTMLDocument 的一个实例， HTMLDocument 继承自 Document 类型。

特征 : nodeType = 9; nodeName = “#document”; nodeValue = parentNode = ownerDocument = null; 子节点包含 最多一个 DocumentType、 最多一个 Element、 ProcessingInstruction 或 Comment。

文档的子节点

可以是 DocumentType Element ProcessingInstruction Comment。

  • childNodes 访问文档元素。
  • document.documentElement : 指向 <html> 元素。
  • document.body : 指向 <body> 元素。
  • document.doctype : 指向 <!doctype> 元素。浏览器支持不一致。
  • html 外的注释 : 浏览器支持不一致。
  • document 是只读的。

文档信息 : 标准的 Document 对象没有

  • document.title : <title>，可修改。
  • document.URL : 页面完整的 URL。不可修改。
  • document.domain : 页面域名。当 URL 中包含一个子域名时，可修改为 xxx.com 形式。(解决来自不同子域跨域问题)。
  • document.referrer : 连接到当前页面的页面的 URL。没有为 “”。可修改。

查找元素

  • getElementById(ID) : ID 区分大小写(IE8- 不区分)，返回一个元素或 null。多个 ID 相同，只返回第一次出现的元素。不要让表单字段的 name 特性与其他元素的 ID 相同 (IE7- 中 name 与 ID 匹配的表单元素也可能会被返回)。
  • getElementsByTagName(TagName) : TagName 不区分大小写(XML/XHTML 区分)，返回 NodeList 集合。在 HTML 文档中返回一个 HTMLCollection 对象。
  • getElementsByName(name) : HTMLDocument 特有。通常用于取得单选按钮。返回 HTMLCollection 对象。

HTMLCollection 对象

  • 访问 HTMLCollection 对象集合中的项可以通过 item() 或方括号。
  • 元素数量通过 length 属性获得。
  • namedItem() 方法可以通过元素的 name 特性取得集合中的项(同名则返回第一项)。
  • 对命名的项可以通过索引(数值或字符串)访问 : images[“img”]。

特殊集合 : 都为 HTMLCollection 对象

  • document.anchors : 所有带有 name 属性的 <a> 元素
  • document.link : 所有带有 href 属性的 <a> 元素
  • document.forms : <form> 元素
  • document.images : <img> 元素
  • document.applets : <applet>

DOM 一致检测

  • document.implementation.hasFeature(“功能名称”, “版本号”)
  • 在 hasFeature 检测时最好同时使用能力检测

文档写入 : 对 XHTML 文档和按照 application/xml+xhtml 内容类型提供的页面无效

  • write(“string”) : 原样写入。加载中动态写入。加载结束后(window.onload)重写整个页面。
  • writeln(“string”) : 末尾换行
  • open() : 打开网页输出流
  • close() : 关闭网页输出流

Element 类型

用于表现 XML 或 HTML 元素，提供了对元素标签名、子节点及特性的访问。

特征 : nodeType = 1; nodeName = 标签名; nodeValue = null; parentNode = Document/Element; ownerDocument = 子节点包含 Element、Text、Comment、ProcessingInstruction、CDATASection 或 EntityReference。

  • nodeName / tagName : 元素的标签名(HTML 中用大写表示，XML/XHTML 与源码一致)(toLowerCase 转换后比较)

HTML 元素

  • id : 唯一标识符。
  • className : class 属性。
  • title : 附加信息。
  • lang : 语言。
  • dir : 语言的方向(ltr/rtl)。

取得特性

  • 访问属性 . : 非自定义属性(IE 除外)
  • getAttribute() : 可以取得自定义特性的值，不区分大小写。

style 与 onclick 等事件处理程序 属性值与 getAttribute() 返回值不同。 style 属性对象/CSS 文本； 事件处理程序 JavaScript 函数或 null /代码字符串。

设置特性

  • . : 非自定义属性(IE 除外)
  • setAttribute(“属性名”, “属性值”) : 特性会统一转换为小写形式。IE7- 设置 class style 事件处理程序无效。自定义特性应该加上 data- 前缀以便验证。
  • removeAttribute() : 删除特性，IE6- 不支持。

attributes 属性 : 一般遍历元素特性时使用

  • attributes 属性只能用于 Element 类型，包含一个 NamedNodeMap ，与 NodeList 类似。

元素的每一个特性都由一个 Attr 节点表示，每个节点都保存在 NamedNodeMap 对象中。

NamedNodeMap 对象包含的方法 :

  • getNamedItem(name) : 返回 nodeName = name 的节点
  • removeNamedItem(name) : 与 removeAttribute() 效果相同，但 removeNamedItem() 返回被删除特性的 Attr 节点。从列表中移除 nodeName = name 的节点
  • setNamedItem(newAttr) : 向列表中添加属性节点，不常用，以节点的 nodeName 属性为索引
  • item(pos) : 返回位于数字 pos 位置处的节点

attributes 属性包含一系列节点，节点的 nodeName 属性为特性名 nodeValue 为特性值。

获取或修改 :

element.attributes.getNamedItem(“特性名”).nodeValue element.attributes[“特性名”].nodeValue

序列化长字符串时的技巧 : 使用数组保存名值对，最后再以空格为分隔符将他们拼接起来。

创建元素

  • document.creatElement(TagName) 创建新元素，同时设置 ownerDocument 属性。
  • IE 中可以传入完整的元素标签，也可以包含属性。

元素的子节点

可以通过 childNodes 属性遍历元素的子节点。 不同浏览器解析节点的方式不同 : IE 不会包含空白节点，其它浏览器会包含元素间的空白符。 筛选元素节点 判断 nodeType == 1 是执行操作。

Text 类型

特征 : nodeType = 3; nodeName/data = “#text”; nodeValue = 包含文本; parentNode = Element; 没有子节点。

  • length 属性 = data.length = nodeValue : 节点中字符数目
  • appendData(text) : 将 text 添加到文本的末尾
  • deleteData(offset, count) : 从 offset 位置开始删除 count 个字符
  • insertData(offset, text) : 从 offset 位置开始插入 text
  • replaceData(offset, count, text) : 用 text 替换从 offset 指定的位置开始到 offset+count 为止的文本
  • splitText(offset) : 从 offset 处将当前文本分成两个文本节点
  • substringData(offset, count) : 提取从 offset 处开始到 offset+count 为止的字符串
  • document.creatTextNode(HTML) : 创建文本节点，同时设置 ownerDocument 属性。
  • element.normalize() : 规范化文本节点

Comment 类型 : 注释

特征 : nodeType = 8; nodeName = “#comment”; nodeValue/data = 注释内容; parentNode = Document/Element; 没有子节点。

方法同 Text 类型(无 splitText)

  • document.creatComment(“comment”) : 创建注释节点

CDATASection 类型 : XML 文档

特征 : nodeType = 4; nodeName = “#cdata-section”; nodeValue = CDATA 内容; parentNode = Document/Element; 没有子节点。

  • document.createCDateSection(“xxx”) : 创建

DocumentType 类型

特征 : nodeType = 10; nodeName = doctype 名称; nodeValue = null; parentNode = Document; 没有子节点。

不能动弹创建。保存在 document.doctype 中，DOM1 描述了 3 个属性 :

  • name : 文档类型名称
  • entities : 文档类型的实体的 NamedNodeMap 对象，一般为空
  • notations : 文档类型的符号的 NamedNodeMap 对象，一般为空

IE

DocumentFragment 类型

轻量级文档 特征 : nodeType = 11; nodeName = “#document-fragment”; nodeValue = null; parentNode = null; 子节点包含 Element、Text、Comment、ProcessingInstruction、CDATASection 或 EntityReference。

  • document.createDocumentFragment() : 创建
  • 将元素添加到文档片段再通过 appendChild() 或 insertBefore() 将文档片段添加到文档中(插入所有子节点)防止浏览器反复渲染

Attr 类型 : 表示元素特性

特征 : nodeType = 2; nodeName = 特性名称; nodeValue/value = 特性值; parentNode = null; HTML 中没有子节点、XML 中可以是 Text 或 EntityReference。

  • name : 特性名称
  • value : 特性值
  • specified : 布尔值，特性是在代码中指定还是默认
  • document.createAttribute() : 创建
  • 不建议直接使用特性节点，而使用 getAttribute() setAttribute() removeAttribute()

DOM 操作技术

动态脚本

动态脚本 : 在页面加载时不存在，但将来的某一时刻通过修改 DOM 动态加的脚本。

两种方式 : 插入外部文件、直接插入 JavaScript 代码。

没有标准的方法探知脚本是否加载完成。

function loadScript(url) {
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = url;
	document.body.appendChild(script);
}

IE 将 <script> 视为一个特殊的元素，不允许 DOM 访问其子节点。

// 同 eval(code)
function loadScriptString(code) {
	var script = document.createElement("script");
	script.type = "text/javascript";
	try {
		script.appendChild(document.createTextNode(code));
	} catch (ex) {
		script.text = code;
	}
	document.body.appendChild(script);
}

动态样式

link 元素包含外部文件 或 sytle 元素指定嵌入的样式。

function loadStyle (url) {
	var link = document.createElement("link");
	link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
	var head = document.getElementsByTagName("head")[0];
	head.appendChild(link);
}

加载外部样式文件的过程是异步的。 IE 将 style 元素视为一个特殊元素，不允许访问其子节点，需要访问元素的 styleSheet 属性 的 cssText 属性解决。

function loadStyleString (css) {
	var style = document.createElement("style");
	style.type  = "text/css";
	try {
		style.appendChild(document.createTextNode(css));
	} catch (ex) {
		style.styleSheet.cssText = css;
	}
	var head = document.getElementsByTagName("head")[0];
	head.appendChild(style);
}

操作表格

为了方便创建表格，HTML DOM 为 table tbody tr 元素添加了一些属性和方法 : p282。

使用 NodeList

NodeList NamedNodeMap HTMLCollection 三个结合都是“动态的”。如果想要迭代 NodeList 对象，应初始化第二个变量。 应该尽量减少访问 NodeList 的次数，没错访问会导致文档查询。

第 11 章 DOM 扩展

选择符 API

W3C Selectors API 标准 : www.w3.org/TR/selectors-api

  • document.querySelector(“CSS 选择符”) : 返回与 CSS 选择符模式匹配的第一个元素或 null
  • document.querySelectorAll(“CSS 选择符”) : 返回包含所有匹配 CSS 选择符的元素的 NodeList 对象
  • matchesSelector(“CSS 选择符”) : 如果调用元素与该选择符匹配，返回 true ；反之 返回 false。Selector API Level 2 规范

元素遍历

Element Traversal 规范 : www.w3.org/TR/ElementTraversal IE9+ 不要担心空白文本节点的问题

  • childElementCount : 返回非文本节点和注释的元素个数
  • firstElementChild : 第一个子元素，firstChild 的元素版
  • lastElementChild : 最后一个子元素，lastChild 的元素版
  • previousElementSlibing : 前一个同辈元素，previousSibling 的元素版
  • nextElementSlibing : 后一个同辈元素，nextSibling 的元素版

HTML5 DOM

与类相关的扩充

  • getElementsByClassName(“class1 class2 …”) : 返回匹配类名的 NodeList 对象 IE9+
// 通过 className 属性删除一个类 :

// 取得类名字符串并拆分成数组
var classNames = div.className.split(/\s+/);

// 找到要删的类名
var pos = -1, i, len;
for (i=0, len=classNames.length; i<len; i++) {
	if (classNames[i] == "user") {
		pos = i;
		break;
	}
}

// 删除类名
classNames.splice(i, 1);

// 连接剩余字符串
div.className = classNames.join(" ");
  • classList 属性 : DOMTokenList 集合的实例
    • length : 元素个数
    • item()/[] : 取得元素
    • add(value) : 如 value 不存在则添加 value
    • contains(value) : 是否包含 value
    • remove(value) : 删除 value
    • toggle(value) : 已经存在删除，没有就创建

焦点管理

  • document.activeElement 属性 : DOM 中获得了焦点的元素的引用。默认情况下，文档加载期间为 null，加载完成为 document.body。
  • 元素获得焦点的方式有 页面载入、用户输入(Tab 键等)、代码中调用 focus() 方法。
  • document.hasFocus() : 判断元素是否取得焦点

HTMLDocument 的变化

  • document.readyState 属性 : 取值 loading 或 complete。不再需要借助 onload 事件处理程序设置的标签。
  • document.compatMode : 兼容模式类型。标准模式(CSS1Compat)或混杂模式(BackCompat)。
  • document.head : head 元素。var head = document.head || document.getElementsByTagName("head")[0];

字符集属性

  • document.charset : 字符集属性 IE、Safari、Opera、Chrome
  • 可以通过 meta 元素、响应头部或直接设置 charset 属性修改 document.charset
  • defaultCharset : 默认字符集 IE、Chorme、Safri
  • document.Characterset : 字符集属性 Firefox

自定义数据属性

  • 为元素添加非标准的属性要加前缀 data-，目的是为元素提供与渲染无关的信息或提供语意信息。
  • 非标准的属性通过元素的 dataset 属性取得值。dataset 属性是 DOMStringMap 的一个实例(名值对映射)

插入标记

  • innerHTML 属性 : (读)返回调用元素所有子节点对应的 HTML 标记 或 (写)根据指定的值创建新的 DOM 树替换调用元素的所有子节点

    • 不同浏览器解析节点的方式不同
    • 大多数浏览器中，通过 innerHTML 插入的 script 元素不会执行其中的脚本。IE8- defer 有作用域的元素之后 会执行脚本。
    • 大多数浏览器中，通过 innerHTML 插入的 style 元素都支持。IE8- …前置的有作用域的元素 _<style>
    • 不支持 innerHTML 属性的元素 : <col> <colgroup> <freamset> <head> <html> <style> <table> <tbody> <thead> <tfood> <tr> 和 IE8- 的 <title>

  • outerHTML 属性 : (读)返回调用元素及所有子节点对应的 HTML 标记 或 (写)根据指定的值创建新的 DOM 树替换调用元素

  • insertAdjacentHTML(“插入位置”, “HTML”) : 插入标记，位置为以下之一 :

    • “beforebegin” : 当前元素之前插入一个紧邻的同辈元素
    • “afterbegin” : 当前元素之下插入一个子元素 或 在第一个子元素之前在插入一个新的子元素
    • “beforeend” : 当前元素之下插入一个子元素 或 在最后一个子元素之前在插入一个新的子元素
    • “afterend” : 当前元素之后插入一个紧邻的同辈元素

  • 内存与性能问题 : 使用以上属性或方法前，手工删除要被替换的元素的所有事件处理程序和 JavaScript 对象属性。

  • 设置 innerHTML/outerHTML 时会创建一个 HTML 解析器，需要通过控制 使用次数

scrollIntoView() 方法 : 除 Chorme 都可用，传入的值可以为空、true、false。

专有扩展

文档模式

IE8 中引入的概念 强制浏览器以某种模式渲染页面 : 在 HTTP 头部 设置 X-UA-Compatible 或 <meta http-equiv="X-UA-Compatible" content="IEVersion"> IEVersion 一般取 Edge (最新)

  • document.documentMode : 页面使用的文档模式

childen 属性

  • HTMLCollection 的实例，只包含元素中还是元素的子节点
  • 因 IE9- 处理文本节点空白符问题而出现
  • 与 childNodes 无区别
  • element.childen.length、element.childen[0]

contains() 方法

  • A.contains(B) : B 是不是 A 的后代 true/false
  • A.compareDocumentPosition(B) : DOM Level 3 方法，确定节点间的关系，返回关系掩码(1:无关、2:居前、4:居后、8:包含、16:被包含)。通过 !!(返回值 & 掩码) 转换成布尔值。

插入文本

  • innerText : (读)返回调用元素所有子节点由浅入深的文本拼接 或 (写)根据使用文本节点替换调用元素的所有子节点。Firefox 不支持
  • outerText 不常用

滚动 safari/chrome

  • scrollIntoViewIFNeeded(alignCenter)
  • scrollByLines(lineCount)
  • scrollByPages()

第 12 章 DOM2 和 DOM3

DOM 变化

针对 XML 命名空间的变化 : HTML 不支持命名空间

其他方面的变化

  • DocumentType 类型的变化 : 新增 publicId systemId internalSubset 属性
  • Document 类型的变化 : importNode() 从一个文档中取得一个节点，将其导入到另一个文档
  • Node 类型的变化 : isSupported(“特姓名”, “版本号”)
  • 框架的变化 : HTMLFrameElement HTMLIFrameElement contentDocument

样式

HTML 中定义样式的方式 : link 元素包含外部文件、style 元素定义嵌入式样式、style 特性定义针对特定元素的样式。

访问元素的样式

style 对象是 CSSStyleDeclaration 的实例，包含通过 HTML 的 style 特性指定的所有样式信息，但不包含外部样式或嵌入式样式经层叠而来的样式。 使用 - 与驼峰命名转换(float 属性，IE 对应 styleFloat，其它对应 cssFloat)

  • style.cssText : style 特性的 CSS 代码 读取或设置
  • style.length : CSS 属性数量
  • style.parentRule : CSSRule 对象
  • style.getPropertyCSSValue(propertyName) : 返回包含给定属性值的 CSSValue 对象
  • style.getPropertyPriority(propertyName) : 如果属性使用了 !important 设置，返回 “important” 否则 “”
  • style.getPropertyValue(propertyName) : 返回给定属性的字符串
  • style.item(index) : 返回给定位置的属性名称
  • style.removeProperty(propertyName) : 从样式中删除给定属性
  • style.setProperty(propertyName, value, priority) : 将给定的属性设置为相应的值，并加上优先权标识(“!important”/“”)

在 DOM2 中，取得计算后的样式 :

  • document.defalutView.getComputedStyle(element, 伪元素字符串/null) : 返回 CSSStyleDeclaration 对象，包含当前元素的所有计算的样式
  • IE 中 getComputedStyle() 不支持，使用 element.currentstyle

操作样式表

link 元素用 HTMLLinkElement 类型表示 style 元素用 HTMLStyleElement 类型表示 CSSStyleSheet 类型表示样式表，继承自 StyleSheet

StyleSheet 属性(除 disabled 外只读) :

  • disabled : 样式表是否被禁用，可写
  • href : link 的 URL 或 null
  • media : 当前样式表支持的所有媒体类型的集合。length item() [] 。空表示适用于所有媒体。
  • ownerNode : 拥有当前样式表的节点的指针。link、style。@import 导入的为 null。
  • parentStyleSheet : @import 导入的情况下，指向导入它的样式表的指针
  • title : ownerNode 中 title 属性
  • type : “type/css”

CSSStyleSheet 属性 :

  • cssRules : 样式表中包含的样式规则的集合。 IE 不支持
  • ownerRule : @import 导入指向导入规则，否则为 null。IE 不支持
  • deleteRule(index) : 删除指定位置的规则。IE 不支持
  • insertRule(rule, index) : 向 cssRules 集合插入 rule 字符串。

所有样式表通过 document.styleSheets 集合表示。length item() []

CSSStyleRule 对象 :

  • cssText : 文本 只读

  • parentRule : 导入规则或 null

  • parentStyleSheet : 当前规则所属的样式表。IE 不支持

  • selectorText : 当前规则的选择符文本

  • style : CSSStyleDeclaration 对象

  • type : 规则类型样式规则为 1。IE 不支持

  • 创建规则 : IE8- addRule(“body”, “color:blue”, 0); 其他 document.styleSheets[0].insertRule(“body{color:blue}”, 0)

  • 删除规则 : IE removeRule(0); 其他 deleteRule(0)

元素大小

偏移量 : 只读，访问时计算。

  • offsetHeight : 包括元素高、水平滚动条的高、上下边框高
  • offsetWidth : 包括元素的宽度、垂直滚动条的宽度、左右边框宽度
  • offsetLeft : 左外边框至包含元素的左外边框之间的像素距离
  • offsetTop : 上外边框至包含元素的上内边框之间的像素距离

客户区大小 : 只读，访问时计算。

  • clientWidth : 元素内容区宽度加左右内边距宽度
  • clientHeight : 元素内容区高度加上下内边距高度
function getViewport () {
	if (document.compatMode == "BackCompat") {
		return {
			width: document.body.clientWidth,
			heitht: document.body.clientHeight
		};
	} else {
		return {
			width: document.documentElement.clientWidth,
			height: document.documentElement.clientHeight
		};
	}
}

滚动大小 :

  • scrollHeight : 没有滚动条的情况下，元素内容的总高度
  • scrollwidth : 没有滚动条的情况下，元素内容的总宽度
  • scrollLeft : 被隐藏在内容区域左侧的像素数，可设置
  • scrollTop : 被隐藏在内容区域上方的像素数，可设置

确定元素大小 :

  • getBoundingClientRect() : 返回矩形对象，包含 left top right bottom。

遍历

NodeIterator

  • document.createNodeIterator(root, whatToShow, filter, entityReferenceExpansion) : 创建 NodeIterator 实例。
    • root 想要作为搜索起点树中的节点
    • whatToShow 访问哪些节点的数字代码
    • filter : NodeFilter 对象。接受还是拒绝某种特定节点的函数
    • entityReferenceExpansion 布尔值，HTML 中为 false

TreeWalker

提供了 firstChild()、lastChild()、parentNode()、nextSibling()、previousSlibing()。

  • document.createTreeWalker (root, whatToShow, filter, NodeFilter.FILTER_ACCESS/ NodeFilter.FILTER_SKIP, entityReferenceExpansion)

范围

  • document.createRange()
  • 简单选择：selectNode()、selectNodeContents()
  • 复杂选择：setStart()、setEnd()
  • 删除范围所包含的内容：deleteContents()
  • 删除范围所包含的内容,返回范围的文档片段，将范围的内容插入到文档中的其他地方： extractContents()
  • 插入DOM范围中的内容：insertNode()
  • 折叠DOM范围：collapse()
  • 比较DOM范围：compareBoundaryPoints()
  • 复制DOM范围：cloneRange()
  • 清理DOM范围:detach()