javascript object notation_JavaScript核心之DOM-CSDN博客

本博客主要介绍内容如下：

1、DOM是什么；

2、DOM中的Node接口的属性；

3、DOM中的Node接口的方法；

4、DOM中的Document接口的属性；

5、DOM中的Document接口的方法

1、DOM是什么

文档对象模型DOM英文全称 Document Object Model，是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来；
DOM遵循W3C DOM 和WHATWG DOM标准；
所有操作和创建web页面的属性，方法和事件都会被组织成对象的形式；
DOM 并不是一个编程语言；
不同的浏览器都有对DOM不同的实现，这些实现对当前的DOM标准而言，都会呈现出不同程度的一致性，每个web浏览器都会使用一些文档对象模型，从而使页面可以被脚本语言访问；
许多对象都实现了多个接口（API）供使用；
重要的数据类型：

document
element
nodeList
attribute
namedNodeMap

详细可以查看MDN链接

DOM概述developer.mozilla.org

文档对象模型 (DOM)developer.mozilla.org

通过一张图来加深了解

DOM中的D就是Document，代表文档结构，以一颗树的形式展示，这里都是标签名字以及文字内容。

DOM中的O就是Object，代表文档转换为对象的结构，以一颗树的形式展示，这里都是构造函数，前面有学到过构造函数.prototype就是一个对象。这里最后形成的对象都与Document中的标签和文字一一对应。

另外文本节点构成的对象后面其实还有String构造函数构造的对象

所以页面中的节点通过构造函数，构造出对应的对象，这就是DOM的主要功能。

我们继续在浏览中测试一下该对象是否相等。

在浏览器中文档是window.document，也可以直接写成document，这里的第一个d是小写。

而Document作为构造函数，第一个D是大写的。

文档中的每一个标签都可以用一个对象来代替

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数

通过上面的图和文字介绍，于是我可以知道JavaScript可以访问和操作存储在DOM中的内容，因此我们可以写成这个近似的等式：

API (web 或 XML 页面) = DOM + JS (脚本语言)

以上的接口都是构造函数，我们通过typeof 来测试

从上面的构造函数的情况来看们主要后缀就是分为Document、Element、Text

Document——根据文档的类型（例如HTML，XML，SVG，...）分为HTMLDocument接口（使用"text/html"内容类型）和XMLDocument接口（XML和SVG文档）；
Element——是非常通用的基类，所有 Document对象下的对象都继承它，根据类型还可以分为HTMLElement接口（所有HTML元素的基础接口）、SVGElement接口（是所有SVG元素的基本接口）、XULElement接口（在web以外的语言,像 XUL）；
Text——代表Element或Attr的文本内容的文本内容；

那么既然HTML文档中有所有的标签都可以转换成对应的对象，作为对象肯定会有原型（公用属性）。

1、document的原型链

Documentdeveloper.mozilla.org

document分为HTML文档、XML和SVG文档，HTML文档实现了HTMLDocument接口，而XML和SVG文档实现了XMLDocument接口;

主要测试HTMLDocument接口

2、Element的原型链

Elementdeveloper.mozilla.org

Element根据类型还可以分为HTMLElement接口（所有HTML元素的基础接口）、SVGElement接口（是所有SVG元素的基本接口）、XULElement接口（在web以外的语言,像 XUL）

主要测试HTMLDocument接口

3、Text的原型链

Textdeveloper.mozilla.org

Text包括了Element或Attr的文本内容的文本内容

这里主要测试Element的接口

他们最终都是引用Object构造函数所构造的对象，这跟前面说的JavaScript的几种基本类型的原型链一致。

bomber：《Global Object、公用属性（原型）、prototype和__proto__》zhuanlan.zhihu.com

所以我们可以看到document、Element、Text原型链总结图，他们在引用Object.prototype之前都引用了Node.prototype。

我们终于引出了Node

Nodedeveloper.mozilla.org

Node是一种被多种DOM类型继承的接口接口，它允许各种类型的DOM能以同样的方式来操作。除了上面三种Document、Element、Text继承了Node，还有很多。

Node继承自EventTarget，而继承Node的属性和方法的接口则有：Document，Element，Attr，CharacterData（Text，Comment，和CDATASection继承原型自CharacterData），ProcessingInstruction，DocumentFragment，DocumentType，Notation，Entity，EntityReference 。

Node就可以代表其他的类型

Node.nodeTypedeveloper.mozilla.org

我们在浏览器上测试几个：

文本节点

元素(标签)节点

文档节点

所以DOM 是一棵树（tree），树上有 Node，Node 分为 Document（html）、Element（元素）和 Text（文本），以及其他不常用的。

2、DOM中的Node接口的属性

我们在讨论Node有哪些接口（API）的时候，其实是在讨论DOM树中的所有对象有哪些接口（API）

Nodedeveloper.mozilla.org

常用的：

childNodes
firstChild
innerText
lastChild
nextSibling
nodeName
nodeType
nodeValue
outerText
ownerDocument
parentElement
parentNode
previousSibling
textContent

（1）childNodes

Node.childNodesdeveloper.mozilla.org

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

需要注意的是返回的子节点包括回车，回车也是一个文本节点。

（2）children

ParentNode.childrendeveloper.mozilla.org

ParentNode.children 是一个只读属性，返回一个Node的子elements，是一个动态更新的 HTMLCollection。它是一个伪数组。

它返回的全是元素（标签）节点，没有文本节点

(3)parentNode返回父节点(可能是元素或者非元素节点)

ParentNodedeveloper.mozilla.org

ParentNode 是一个原始接口，不能够创建这种类型的对象；它在Element、Document和DocumentFragment对象上被实现。

如果上个父元素是一个元素节点，会返回元素节点。

如果上个父元素是一个非元素节点，比如文档节点，会返回文档节点。

(4)parentElement返回父元素节点

Node.parentElementdeveloper.mozilla.org

返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM元素，则返回null。

如果上个父元素是一个元素节点，会返回元素节点。

如果上个父元素是一个非元素节点，比如文档节点，会返回null

(5)parentElement返回父元素（标签）节点

Node.parentElementdeveloper.mozilla.org

返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM元素，则返回null。

(6)第一个子节点(可能是文本或者元素节点)

Node.firstChilddeveloper.mozilla.org

开发者工具上面会显示那种API来自Element或者Node

(7)第一个是元素（标签）节点的子节点

ParentNode.firstElementChilddeveloper.mozilla.org

开发者工具上面会显示那种API来自Element或者Node

(8)最后一个子节点（可能是文本或者元素节点）

https://developer.mozilla.org/zh-CN/docs/Web/API/Node/lastChilddeveloper.mozilla.org

Node.lastChild

Node.lastChilddeveloper.mozilla.org

(9)最后一个是元素（标签）节点的子节点。

ParentNode.lastElementChilddeveloper.mozilla.org

(10)同级中前面的节点（可能是文本或者元素节点）

Node.previousSiblingdeveloper.mozilla.org

使用一次

使用两次就可以找到前面的元素节点了

(11)同级中前面的元素（标签）节点

NonDocumentTypeChildNode.previousElementSiblingdeveloper.mozilla.org

(12)同级中后面的节点（可能是文本或者元素节点）

Node.nextSiblingdeveloper.mozilla.org

用一次有一个回车text节点，用两次有一个body元素节点。

(13)同级中后面的元素（标签）节点

NonDocumentTypeChildNode.nextElementSiblingdeveloper.mozilla.org

(14)nodename

Node.nodeNamedeveloper.mozilla.org

在XHTML(以及属于XML类型的文档)中,变量包含的值会是小写的"div"，在HTML中,变量text_field包含的值会是大写的"DIV"

返回大写的部分情况

不是标签的文本节点，或者SVG标签的时候返回的就是小写

文档节点返回也是小写

(15)tagName

Element.tagNamedeveloper.mozilla.org

在XHTML中 (或者其他的XML格式文件中), 会弹出小写，而在HTML中, 会弹出大写。

返回大写的部分情况

SVG标签返回小写

非元素（标签）节点，比如文本节点的时候返回undefined

文档节点返回的也是undefined

如果是元素节点,nodeName属性和tagName属性返回相同的值,但如果是文本节点,nodeName属性会返回"#text",而tagName属性会返回undefined.

(16)nodeType

Node.nodeTypedeveloper.mozilla.org

这里可以用数字1到11来代替不同的node类型，因为以前的内存不够，为了节省内存所有用单个数字来代替node类型。

但是后面内存越来越大，于是就可以是某个数字等于某个node类型的常量。

举两个例子，比如元素节点和文本节点可以直接与数字相等

DocumentFragment的性能优化属于面试的考点

(17)ownDocument

Node.ownerDocumentdeveloper.mozilla.org

Node.ownerDocument只读属性会返回当前节点的顶层的 document 对象。

被此属性返回的 document对象是在实际的HTML文档中的所有子节点所属的主对象。如果在文档节点自身上使用此属性，则结果是null。

如果用到了iframe标签，那么他的顶层document就不同

比如iframe里面的document

iframe外面的document

(18)nodeValue

Node.nodeValuedeveloper.mozilla.org

Node.nodeValue 属性返回或设置当前节点的值。它是一个包含当前节点的值的字符串（如果有的话）

举两个例子：

文本节点会返回文本节点的内容

元素（标签）节点会返回null

另外如果一个节点通过使用childNodes[0]获得一个文本节点后，还可以使用nodeValue，说明文本节点后面才是字符串。

所以前面的图形应该加入字符串在文本节点后面。

(19)innerText

Node.innerText 是一个表示一个节点及其后代的“渲染”文本内容的属性。

作为一个获取器，如果用光标突出显示元素的内容，然后将其复制到剪贴板，则它将近似于用户将获得的文本。此功能最初由Internet Explorer引入，并在所有主要浏览器供应商采用后于2016年在HTML标准中正式规定。

返回的是字符串

Node.innerTextdeveloper.mozilla.org

innerText针对文本节点无效，会返回undefined。

innerText针对文档节点无效，会返回undefined。

innerText受 CSS 样式的影响，并且不会返回隐藏元素的文本

如果CSS有display:none等隐藏的样式，不会打印出来。

如果innerText在head标签里面的script标签或者style标签会打印出来里面的内容

如果innerText在body标签里面的script标签或者style标签不会打印出来里面的内容

并且，样式也不会改变。

由于innerText受 CSS 样式的影响，它会触发重排（reflow）;

在 Internet Explorer (对于小于等于 IE11 的版本) 中对 innerText 进行修改，不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点（所以不可能再次将节点再次插入到任何其他元素或同一元素中）。

如果用innerText修改文本内容，会把元素的其他子节点信息都覆盖掉

https://www.zhihu.com/video/1105802715170660352

(20)textContent

innerText出现在IE浏览器中后，Firefox和Chrome就出现了textContent，之后多个新版浏览器都可以使用，这两个属性。

Node.textContentdeveloper.mozilla.org

Node.textContent属性表示一个节点及其后代的文本内容，返回的是字符串。

innerText针对文本节点无效，会返回undefined。

如果节点是个CDATA片段，注释，ProcessingInstruction节点或一个文本节点，textContent 返回节点内部的文本内容（即 nodeValue）。

举例文本节点会返回文本内容，这与nodeValue效果一样。

如果 element 是 Document，DocumentType 或者 Notation 类型节点，则 textContent 返回null。

举例Document文档节点会返回null

对于其他节点类型，textContent 将所有子节点的 textContent 合并后返回，除了注释、ProcessingInstruction节点。如果该节点没有子节点的话，返回一个空字符串。

在节点上设置 textContent 属性的话，会删除它的所有子节点，并替换为一个具有给定值的文本节点。

textContent不受CSS 样式的影响，就算隐藏了文本，也会返回该文本。

如果CSS有display:none等隐藏的样式，会打印出来。

如果textContent在head标签里面的script标签或者style标签会打印出来里面的内容

如果textContent在body标签里面的script标签或者style标签会打印出来里面的内容

并且，样式也会改变。

另外如果一个节点通过使用childNodes[0]获得一个文本节点后，还可以使用textContent，说明文本节点后面才是字符串，这与前面说到的nodeValue一样。

如果用textContent修改文本内容，只覆盖文本节点

https://www.zhihu.com/video/1105803223360958464

如果元素后面没有文字，只是想增加文本节点，也可以直接用appendChild插入到末尾。

https://www.zhihu.com/video/1105807686138146816

(21)innerHTML

element.innerHTMLdeveloper.mozilla.org

Element.innerHTML属性设置或获取HTML语法表示的元素的后代，返回的是字符串。

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

如果一个元素节点有一个文本子节点，该节点包含字符 <, >等, innerHTML 将这些字符分别返回为< 和 >。使用Node.textContent 可获取一个这些文本节点内容的正确副本。

小结：

带element和children都返回元素节点

nodename在HTML标签中返回的是大写，在文档节点、SVG节点返回的是小写。

tagName在HTML标签中返回的是大写，在文档节点无效，SVG节点返回的是小写。

innerText和textContent的区分

nodeValue和textContent的区分

innerHTML和textContent的区分

3、DOM中的Node接口的方法

方法（如果一个属性是函数，那么这个属性就也叫做方法；换言之，方法是函数属性）

常用的

appendChild()
cloneNode()
contains()
hasChildNodes()
insertBefore()
isEqualNode()
isSameNode()
removeChild()
replaceChild()
normalize() // 常规化

(1)appendChild()

Node.appendChilddeveloper.mozilla.org

Node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。

(2)cloneNode()

Node.cloneNodedeveloper.mozilla.org

Node.cloneNode(deep)方法返回调用该方法的节点的一个副本.

deep——是否采用深度克隆（深浅拷贝）,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.

前面博客也有说到过深浅拷贝

bomber：《JS类型转换、内存图、GC、深/浅拷贝》zhuanlan.zhihu.com

如果写了true，这里的深入是指所有子代节点都拷贝，如果没有写true，就代表只克隆表面的子节点

https://www.zhihu.com/video/1105602865497964544

如果参数deep没有写，一般默认都是false。

(3)contains()

Node.containsdeveloper.mozilla.org

Node.contains()返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点。

(4)hasChildNodes()

Node.hasChildNodesdeveloper.mozilla.org

hasChildNodes方法返回一个布尔值,表明当前节点是否包含有子节点.

(5)insertBefore()

Node.insertBefore()developer.mozilla.org

Node.insertBefore()方法在参考节点之前插入一个拥有指定父节点的子节点。

(6)isEqualNode()

Node.isEqualNodedeveloper.mozilla.org

Node.isEqualNode()方法可以判断两个节点是否相等。当两个节点的类型相同，定义特征(defining characteristics)相同（对元素来说，即 id，孩子节点的数量等等），属性一致等，这两个节点就是相等的。一些具体的数据指出：多数时候的比较是根据节点的类型来的。

(7)isSameNode()

中文版面显示该方法已被弃用

Node.isSameNodedeveloper.mozilla.org

Node.isSameNode()developer.mozilla.org

Node.isSameNode() 方法测试两个节点是否相同，即它们是否引用相同的对象。

对于节点来说，该isSameNode()方法可以简写为

node1 === node2 或者 node1 == node2

(8)removeChild()

Node.removeChilddeveloper.mozilla.org

Node.removeChild() 方法从DOM中删除一个子节点。返回删除的节点。

被移除的这个子节点仍然存在于内存中,只是没有添加到当前文档的DOM树中,因此,你还可以把这个节点重新添加回文档中,当然,实现要用另外一个变量来保存这个节点的引用.

若有没有用变量来保存这个移除的子节点，则认为被移除的节点已经是无用的, 在短时间内将会被内存管理回收.

垃圾回收前面的博客也有说到

bomber：《JS类型转换、内存图、GC、深/浅拷贝》zhuanlan.zhihu.com

(9)replaceChild()

Node.replaceChilddeveloper.mozilla.org

用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。

被替换的这个子节点仍然存在于内存中,只是没有添加到当前文档的DOM树中,因此,你还可以把这个节点重新添加回文档中,当然,实现要用另外一个变量来保存这个节点的引用.

若有没有用变量来保存这个移除的子节点，则认为被移除的节点已经是无用的, 在短时间内将会被内存管理回收.

(10)normalize() // 常规化

Node.normalize()developer.mozilla.org

Node.normalize() 方法将当前节点和它的后代节点”规范化“（normalized）。在一个"规范化"后的DOM树中，不存在一个空的文本节点，或者两个相邻的文本节点。

注1：“空的文本节点”并不包括空白字符(空格，换行等)构成的文本节点。

注2：两个以上相邻文本节点的产生原因包括：

通过脚本调用有关的DOM接口进行了文本节点的插入和分割等。
HTML中超长的文本节点会被浏览器自动分割为多个相邻文本节点。

小结：

以上说的基本上都是增删改。

nextsibiling和privossibiling有可能会获取到文本节点。回车也算文本节点

innerText和textcontent区别

nodeType的值，主要的两个值是1表示元素节点，3表示文本节点

clonenode分深浅拷贝

isSameNode()和isEqualNode()分清楚

normalize()的意思

4、DOM中的Document接口的属性

document接口中大部分都是查询功能

属性

anchors
body
characterSet
childElementCount
children
doctype
documentElement
domain
fullscreen
head
hidden
images
links
location
onxxxxxxxxx
origin
plugins
readyState
referrer
scripts
scrollingElement
styleSheets
title
visibilityState

(1)anchors

该标签已经被弃用

document.anchorsdeveloper.mozilla.org

anchors属性返回当前文档中的所有锚点元素.返回的是HTMLCollection，它是一个伪数组。

由于向后兼容的原因,该属性只返回那些拥有name属性的a元素,而不是那些拥有id属性的a元素.

但是我测试了下还是可以用的，返回的仅仅是带name属性的a元素。

因为用document.querySelectorAll('a')返回的a标签会更多，而且是NodeList。

(2)body

document.bodydeveloper.mozilla.org

返回当前文档中的<body>元素或者<frameset>元素.

document.body是包含当前页面内容的元素,对于拥有<body>元素的文档来说,返回的是<body>元素,对于一个拥有<frameset>元素的文档来说,返回的是最外层的<frameset>元素.

该属性是可写的,且为该属性赋的值必须是一个<body>元素.

(3)characterSet

document.characterSetdeveloper.mozilla.org

Document.characterSet只读属性返回当前文档的字符编码。该字符编码是用于渲染此文档的字符集，可能与该页面指定的编码不同。（用户可以重写编码方式。）

(4)childElementCount

ParentNode.childElementCountdeveloper.mozilla.org

只读属性返回一个无符号长整型数字，表示给定元素的子元素数。

(5)children

ParentNode.childrendeveloper.mozilla.org

ParentNode.children 是一个只读属性，返回一个Node的子elements，是一个动态更新的 HTMLCollection。它是一个伪数组。

返回的对象类型是HTMLCollection

(6)doctype

document.doctypedeveloper.mozilla.org

返回当前文档关联的文档类型定义(DTD). 返回的对象实现了DocumentType接口

如果当前文档没有DTD,则该属性返回null.

在HTML文档中,如果文档有DTD,则该属性等价于document.firstChild.

(7)documentElement

document.documentElementdeveloper.mozilla.org

Document.documentElement 是一个会返回文档对象（document）的根元素的只读属性（如HTML文档的 <html> 元素）。

HTML 文档通常包含一个子节点 <html>，可能在它前面还有个 DOCTYPE 声明。

所以你应该使用 document.documentElement 来获取根元素, 而不是 document.firstChild。 当然用document.firstElementChild也可以获取根元素。

(8)domain

Document.domaindeveloper.mozilla.org

获取/设置当前文档的原始域部分, 用于同源策略.

返回的是字符串。

(9)fullscreen

Document.fullscreendeveloper.mozilla.org

该特性是非标准的。Document.fullscreen该特性是非标准的。

返回一个布尔值,表明当前文档是否处于全屏模式.

(10)head

Document.headdeveloper.mozilla.org

返回当前文档中的<head>元素。如果有多个<head>元素，则返回第一个。

(11)hidden

Document.hiddendeveloper.mozilla.org

Document.hidden （只读属性）返回布尔值，表示页面是（true）否（false）隐藏。

(12)images

document.imagesdeveloper.mozilla.org

Document接口的只读属性images返回当前文档中所有image元素的集合.

返回的是一个HTMLCollection 它是一个伪数组。

(13)links

Document.linksdeveloper.mozilla.org

links 属性返回一个文档中所有具有 href 属性值的<area>元素与<a>元素的集合。

返回值是一个HTMLCollection。它是一个伪数组。

(14)location

Document.locationdeveloper.mozilla.org

Document.location 是一个只读属性，返回一个 Location 对象，包含有文档的 URL 相关的信息，并提供了改变该 URL 和加载其他 URL 的方法。

尽管 Document.location 是一个只读的 Location 对象，你也能够赋给它一个 DOMString。这意味着你能够赋给 document.location 字符串，大多数情况下像这样使用：document.location = 'http://www.example.com'，也可写为document.location.href = 'http://www.example.com'。

只是想获取字符串形式的 URL，可以使用只读属性 document.URL。

(15)onxxxxxxxxx

部分事件，比如onclick、onblur等

DOM 事件回调developer.mozilla.org

https://developer.mozilla.org/zh-CN/docs/Web/API/Eventdeveloper.mozilla.org

(16)origin

Document.origindeveloper.mozilla.org

Document.origin （只读属性）返回文档的来源。

该属性在很多浏览器中还不可以实现功能。

可以通过 document.defaultView.location.origin 代替，他们功能类似。

(17)plugins

Document.pluginsdeveloper.mozilla.org

Document接口的插件只读属性返回一个HTMLCollection对象，它是一个伪数组。该对象包含一个或多个HTMLEmbedElements表示当前文档中的<embed> 元素。

返回的是 HTMLCollection, 或者为null。

(18)readyState

document.readyStatedeveloper.mozilla.org

一个document 的Document.readyState 属性描述了文档的加载状态。

一个文档的readyState 可以是以下之一：

loading / 加载——document 仍在加载。

interactive / 互动——文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。

complete / 完成——文档和所有子资源已完成加载。状态表示load事件即将被触发。

当这个属性的值变化时，document对象上的readystatechange事件将被触发。

用把网速调慢，QQ主页来测试下

https://www.zhihu.com/video/1105870969964621824

(19)referrer

document.referrerdeveloper.mozilla.org

返回跳转或打开到当前页面的那个页面的URI。

如果用户直接打开了这个页面（不是通过页面跳转，而是通过地址栏或者书签等打开的），则该属性为空字符串。由于该属性只是返回一个字符串，所以不能够通过该属性引用页面的 DOM。

某些情况下可以禁止通过直接输入网站地址来范围网页，必须通过网页跳转的方式访问网页。

(20)scripts

Document.scriptsdeveloper.mozilla.org

返回一个HTMLCollection对象,包含了当前文档中所有<script>元素的集合.它是一个伪数组。

(21)scrollingElement

Document.scrollingElementdeveloper.mozilla.org

scrollingElement （ Document 的只读属性）返回滚动文档的 Element 对象的引用。在标准模式下, 这是文档的根元素, document.documentElement.

当在怪异模式下， scrollingElement 属性返回 HTML body 元素（若不存在返回 null ）。

(22)styleSheets

Document.styleSheetsdeveloper.mozilla.org

Document.styleSheets 只读属性，返回一个由StyleSheet对象组成的 StyleSheetList，每个StyleSheet对象都是一个文档中链接或嵌入的样式表。

返回的对象是一个StyleSheetList。

它是一个StyleSheet对象的有序集合。styleSheetList.item(index) 或 styleSheetList[index] 根据它的索引（索引基于0）返回一个单独的样式表对象。

(23)title

Document.titledeveloper.mozilla.org

获取或设置文档的标题。返回字符串

title 是一个包含 document 标题的字符串。如果通过设置 document.title 将标题覆盖，则返回覆盖后的值。否则返回标签里指定的标题（参见下面的Notes）。

(24)visibilityState

Document.visibilityStatedeveloper.mozilla.org

Document.visibilityState （只读属性）, 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染.可用的值如下：

'visible' : 此时页面内容至少是部分可见. 即此页面在前景标签页中，并且窗口没有最小化.
'hidden' : 此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 '锁屏状态' .
'prerender' : 页面此时正在渲染中, 因此是不可见的 (considered hidden for purposes of document.hidden). 文档只能从此状态开始，永远不能从其他值变为此状态.注意: 浏览器支持是可选的.
'unloaded' : 页面从内存中卸载清除. 注意: 浏览器支持是可选的.

典型用法是防止当页面正在渲染时加载资源, 或者当页面在背景中或窗口最小化时禁止某些活动.

我们用个延时间隔的函数来测试，结果在网页中切换页面或者最小化页面是可以显示出hidden，如果把活动页面窗口切换为别的页面窗口，不会显示出hidden。

https://www.zhihu.com/video/1105895873011261440

5、DOM中的Document接口的方法

方法：

close()
createDocumentFragment()
createElement()
createTextNode()
execCommand()
exitFullscreen()
getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
getSelection()
hasFocus()
open()
querySelector()
querySelectorAll()
registerElement()
write()
writeln()

(1)close()、write()、writeln()、open()

一个document写入信息有三个动作，打开——写入——关闭

document.closedeveloper.mozilla.org

document.close()方法用来关闭向当前文档的数据写入

Document.open()developer.mozilla.org

Document.open()方法打开一个要写入的文档。如果目标中存在文档，则此方法将清除它。

document.writedeveloper.mozilla.org

document.write()将一个文本字符串写入由document.open() 打开的一个文档流。

document.writelndeveloper.mozilla.org

document.writeln向文档中写入一串文本，并紧跟着一个换行符，仅仅相对于document.write多了一个换行符。

因为writeln(）和write(）很相似，所以这里仅用write(）测试。

通过查看MDN文档，发现部分部分描述存在一些问题，我就按照我自己测试来总结吧

通过直接在开发者工具中（单独使用）输入document.open()，那么整个页面会消失，也就是清除掉了。

这里本来做了一个视频，但是审核没通过，不知道为啥不让我通过。。。

通过直接使用document.open()和document.close()，并不能清除原本的页面信息也关闭文档流。
在关闭(已加载)的文档上调用 document.write 会自动调用 document.open，这将清空该文档的内容。
上面的document.write会自动调用document.open满足两个条件，1、在关闭(已加载)的文档上调用 document.write；2、如果 document.write和document.open一起使用。此时document.open()已经没有存在的必要。
在关闭(已加载)的文档上调用document.close()，它会实现它的功能，也就是关闭文档流，无法再写入文档信息。
通过window.onload，或者setTimeout可以实现在关闭(已加载)的文档上调用document.write

下面的视频实现了close关闭文档流后无法再次写入的功能；

在关闭(已加载)的文档上调用 document.write 会自动调用 document.open的功能。

https://www.zhihu.com/video/1105934137348939776

由于每篇文章只能发送十个视频限制，所以还有一个问题文字说明，就是如果在开发者模式中输入setTimeout来清除整个页面的时候，document.write并不是自动调用document.open，而添加了document.open后，整个页面才会清空。

(2)createDocumentFragment()

Document.createDocumentFragment()developer.mozilla.org

创建一个新的空白的文档片段( DocumentFragment)。

DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。

因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。

(3)createElement()

Document.createElement()developer.mozilla.org

在一个HTML 文档中， Document.createElement() 方法创建由tagName指定的HTML元素，或一个HTMLUnknownElement，如果tagName不被识别。

返回元素节点

(4)createTextNode()

document.createTextNodedeveloper.mozilla.org

创建一个新的文本节点.

(5)execCommand()

document.execCommanddeveloper.mozilla.org

该方法是当需要写一个富文本编辑器的时候需要用到它。

Mozilla中的富文本编辑器developer.mozilla.org

copy拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。

它还可以拷贝选中文字

(6)exitFullscreen()

Document.exitFullscreen()developer.mozilla.org

Document.exitFullscreen() 方法用于让当前文档退出全屏模式

测试了下报错了，不知道具体为啥

(7)getElementById()

document.getElementByIddeveloper.mozilla.org

Document的方法 getElementById()返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。

返回一个匹配到 ID 的 DOMElement对象。若在当前 Document下没有找到，则返回 null。

不同于其他Element查找方法（如Document.querySelector()以及Document.querySelectorAll()），getElementById() 只有在作为 document 的方法时才能起作用，而在DOM中的其他元素下无法生效。这是因为 ID 值在整个网页中必须保持唯一。因此没有必要为这个方法创建所谓的 “局部” 版本。

(8)getElementsByClassName()

Element.getElementsByClassName()developer.mozilla.org

Element.getElementsByClassName() 方法返回一个即时更新的（live）HTMLCollection，包含了所有拥有指定 class 的子元素。它是一个伪数组。

可以在任何HTMLCollection上面使用Array.prototype的方法，要把HTMLCollection作为该方法的上下文对象（this）。下例，查找类名为test的元素中的所有<div>元素：

我们可以通过数组的方法在HTMLCollection上传递它的值作为this的值，

var testElements = document.getElementsByClassName('test');
var testDivs = Array.prototype.filter.call(testElements, function(testElement) {
  return testElement.nodeName === 'DIV';
});//这里的Array.prototype可以直接写成空数组[]

这里就是把testElements里面的value传递给this，然后this传递给调用前的一个对象。也就是call前面的Array.prototype.filter

this从testElements里面获得value，然后传递给前面的Array.prototype，这里的Array.prototype可以直接写成一个空数组。

(9)getElementsByClassName()

Document.getElementsByName()developer.mozilla.org

根据给定的name返回一个在 (X)HTML document的节点列表集合。返回的是一个实时更新的元素的带name属性的NodeList集合。

(10)getElementsByTagName()

Document.getElementsByTagName()developer.mozilla.org

返回一个包括所有给定标签名称的元素的HTML集合HTMLCollection。它是一个伪数组。整个文件结构都会被搜索，包括根节点。返回的 HTMLCollection是动态的, 意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用 document.getElementsByTagName() 。

document.getElementsByTagName(name)

name 是一个代表元素的名称的字符串。特殊字符 "*" 代表了所有元素。

最新的 W3C 规范说明这些元素是 HTMLCollection（HTML集合）； 然而, 这个方法在WebKit内核的浏览器中返回一个 NodeList。更多详情请查看 bug 14869。

(11)getSelection()

document.getSelectiondeveloper.mozilla.org

该方法的功能等价于 Window.getSelection()方法；其返回一个 Selection对象，表示文档中当前被选择的文本。

返回一个Selection对象，表示用户选择的文本范围或光标的当前位置

selection 是一个 Selection 对象。如果想要将 selection 转换为字符串，可通过连接一个空字符串（""）或使用 String.toString() 方法。

(12)hasFocus()

document.hasFocusdeveloper.mozilla.org

Document.hasFocus()方法返回一个Boolean，表明当前文档或者当前文档内的节点是否获得了焦点。该方法可以用来判断当前文档中的活动元素是否获得了焦点。

如果当前文档的活动元素获得了焦点，返回true，否则返回false。

我们用个延时间隔的函数来测试，结果在网页中切换页面、最小化页面、把活动页面窗口切换为别的页面窗口，都会显示出false。

https://www.zhihu.com/video/1106192579208638464

这与visibilityState有点类似。

(13)querySelector()

document.querySelector()developer.mozilla.org

文档对象模型Document引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 html元素Element。如果找不到匹配项，则返回null。

表示文档中与指定的一组CSS选择器匹配的第一个元素的 html元素Element对象。

如果要匹配的ID或选择器不符合 CSS 语法（比如不恰当地使用了冒号或者空格），你必须用反斜杠将这些字符转义

包含一个name属性为"login"的input元素<input>(<input name="login"/>) 可以用中括号

var el = document.querySelector("input[name='login']");

如果是包含name属性可以删除等号后面的

var el = document.querySelector("input[name]");

(14)querySelectorAll()

Document.querySelectorAlldeveloper.mozilla.org

返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是NodeList 。它是一个伪数组。

返回的是一个静态NodeList，包含一个与至少一个指定选择器匹配的元素的Element对象，或者在没有匹配的情况下为空NodeList

(15)registerElement()

该特性已经从 Web 标准中删除

Document.registerElement()developer.mozilla.org

Document.registerElement() 在浏览器注册一个新的自定义元素，返回一个该元素的构造函数。

本文为本人的原创文章，著作权归本人和饥人谷所有，转载务必注明来源