DOM模型

[coconilu]

介绍

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML 交互的API文档。DOM 是载入到浏览器中的文档模型，它用节点树的形式来表现文档，每个节点代表文档的构成部分（例如： element——页面元素、字符串或注释等等）。

DOM就是JS能识别的HTML结构，一个普通的JS对象或者数组

作用

DOM 将 web 页面与到脚本或编程语言连接起来，是Web——万维网上使用最为广泛的API之一，因为它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建，移动或修改。事件监听器可以被添加到节点上并在给定事件发生时触发。

DOM模型

大致介绍图中接口的用途：

1. EventTarget，主要提供事件处理器注册、事件触发等功能
2. Node，主要提供操作（插删改查、比较）节点的功能
3. Element，表示页面标签元素，可以操作标签元素的属性和获取位置相关的信息，还可以细分成HTMLElement和SVGElement。
4. Document，表示网页的整个文档，它提供了获取一些文档相关属性（比如URL、Location、加载状态）的方法，还有获取HTMLCollection（比如form、image）对象
5. Window，表示客户端代理，可以注册自定义元素，操作history、数据库（indexedDB、localStorage、sessionStorage）、滚动条、定时器，跨源通信。

EventTarget

请参考另一篇博客

Node

属性：

baseURI，表示base URL的DOMString。
childNodes，返回一个包含了该节点所有子节点的实时的NodeList。
firstChild，返回该节点的第一个子节点，如果该节点没有子节点则返回null。
innerText，表示一个节点及其后代的“渲染”文本内容的属性。
isConnected，如果该节点与 DOM 树连接则返回 true , 否则返回 false。
lastChild，返回该节点的最后一个子节点，如果该节点没有子节点则返回null。
nextSibling，只读属性，返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null。
nodeName，返回当前节点的节点名称。
nodeType，只读属性 Node.nodeType 表示的是该节点的类型。
nodeValue，返回或设置当前节点的值。
outerText
ownerDocument，只读属性会返回当前节点的顶层的 document 对象。
parentElement，返回当前节点的父元素节点,如果该元素没有父节点,或者父节点不是一个元素节点.则 返回null.
parentNode，返回指定的节点在DOM树中的父节点。
previousSibling，返回当前节点的前一个兄弟节点,没有则返回null。
textContent，表示一个节点及其后代的文本内容。

方法：

appendChild()，将一个节点添加到指定父节点的子节点列表末尾。如果节点已经存在，则是移动到父节点。
cloneNode()，返回调用该方法的节点的一个副本。
compareDocumentPosition()，比较当前节点与任意文档中的另一个节点的位置关系。
contains()，返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点。
hasChildNodes(),返回一个布尔值,表明当前节点是否包含有子节点。
insertBefore()，在参考节点之前插入一个节点作为一个指定父节点的子节点。
isDefaultNamespace()，接受一个命名空间URI作为参数,如果该命名空间是当前节点的默认命名空间,则返回true,否则返回false。
isEqualNode()，判断两个节点是否相等。当两个节点的类型相同，定义特征(defining characteristics)相同（对元素来说，即 id，孩子节点的数量等等），属性一致等，这两个节点就是相等的。
lookupNamespaceURI()
lookupPrefix()
normalize()，将当前节点和它的后代节点”规范化“（normalized）。在一个"规范化"后的DOM树中，不存在一个空的文本节点，或者两个相邻的文本节点。
removeChild()，从DOM中删除一个子节点。返回删除的节点。
replaceChild()，用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。

ParentNode.append 方法在 ParentNode的最后一个子节点之后插入一组 Node 对象或 DOMString 对象。被插入的 DOMString 对象等价为 Text 节点。
而parentNode.appendChild()的入参只能接收一个节点，且不直接支持传字符串（document.createTextElement可以把字符串转化为字符节点），返回追加的Node节点。

Element

属性：

accessKey，设置了这样一个按键——用户通过敲击这个键把焦点跳转到这个元素上。
attributes，返回该元素所有属性节点的一个实时集合。
childElementCount，读属性返回一个无符号长整型数字，表示给定元素的子元素数。
children，只读属性，返回 一个Node的子elements ，是一个动态更新的 HTMLCollection。
classList，只读属性，返回一个元素的类属性的实时 DOMTokenList集合。但是可以通过add、remove操作这个classList对象。
className，获取或设置指定元素的class属性的值。由空格分隔的多个class属性值。
clientHeight，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。
clientLeft，表示一个元素的左边框的宽度，以像素表示。
clientTop，一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。
clientWidth，内部宽度，该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。
firstElementChild，返回对象的第一个孩子 Element, 如果没有子元素，则为null。
id，获取和设置一个元素的标识符(id属性)。
innerHTML，设置或获取HTML语法表示的元素的后代。
lastElementChild，读属性返回对象的最后一个孩子Element ，如果没有子元素，则返回null。
localName，只读属性，返回本地名称的。
name，
namespaceURI，
nextElementSibling，返回当前元素在其父元素的子元素节点中的后一个元素节点,如果该元素已经是最后一个元素节点,则返回null,该属性是只读的.
ongotpointercapture，事件处理器
onlostpointercapture，事件处理器
outerHTML，包括元素本身和后代元素的HTML语法。要求：必须有父元素；原变量依旧指向旧元素。
prefix，返回指定元素的命名空间前缀。
previousElementSibling，返回当前元素在其父元素的子元素节点中的前一个元素节点,如果该元素已经是第一个元素节点,则返回null,该属性是只读的。
scrollHeight，只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。不包括元素的border和margin
scrollLeft，可以读取或设置元素滚动条到元素左边的距离。
scrollTop，获取或设置一个元素的内容垂直滚动的像素数。
scrollWidth，只读属性以px为单位返回元素的内容区域宽度或元素的本身的宽度中更大的那个值。
tagName，当前元素的标签名。

方法：

getAttribute()，返回元素上一个指定的属性值。如果指定的属性不存在，则返回  null 或 "" （空字符串）。
getAttributeNames()，返回一个Array，该数组包含指定元素（Element）的所有属性名称，如果该元素不包含任何属性，则返回一个空数组。
getAttributeNode()，返回指定元素的指定属性， 返回值是 Attr 节点类型。
getBoundingClientRect()，返回元素的大小及其相对于视口的位置。获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
getClientRects()，返回一个指向客户端中每一个盒子的边界矩形的矩形集合。 
getElementsByClassName()，返回一个即时更新的（live） HTMLCollection，包含了所有拥有指定 class 的子元素。
getElementsByTagName()，返回一个动态的包含所有指定标签名的元素的HTML集合HTMLCollection。
hasAttribute()，返回一个布尔值，指示该元素是否包含有指定的属性（attribute）。
insertAdjacentElement()，将一个给定的元素节点插入到相对于被调用的元素的给定的一个位置。
insertAdjacentHTML()，将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。
insertAdjacentText()，将一个给定的文本节点插入在相对于被调用的元素给定的位置。
matches()，如果元素被指定的选择器字符串选择，Element.matches()  方法返回true; 否则返回false。
querySelector(),返回与指定的选择器组匹配的元素的后代的第一个元素。
querySelectorAll(),返回一个 NodeList 表示元素的列表，把当前的元素作为根与指定的选择器组相匹配。
removeAttribute()，指定的元素中删除一个属性。
removeAttributeNode()，从当前的 element(元素节点) 删除指定的属性。
requestFullscreen()，用于发出异步请求使元素进入全屏模式。
setAttribute()，设置指定元素上的一个属性值。
setAttributeNode()，为指定的 Element 添加属性节点.
setCapture()，在处理一个 mousedown 事件过程中调用这个方法来把全部的鼠标事件重新定向到这个元素，直到鼠标按钮被释放或者 document.releaseCapture() 被调用。

HTMLElement

属性：

contentEditable，用于表明元素是否是可编辑的。
dataset，HTMLElement.dataset属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集。
dir，dir属性用于获取或设置当前元素的元素内容的文本书写方向。
hidden，如果想要隐藏文档，值设置为 true，否则值设置为false。
isContentEditable，只读属性返回一个布尔值：如果当前元素的内容为可编辑状态，则返回 true，否则返回 false。
lang，用来获取或设置元素属性值或文本内容的基语言（base language）。
offsetHeight，只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。
offsetLeft，只读属性，返回当前元素左上角相对于  HTMLElement.offsetParent 节点的左边界偏移的像素值。
offsetParent，只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。
offsetTop，只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。
offsetWidth，只读属性，返回一个元素的布局宽度。
on + [event + name]
outerText
style，返回一个 CSSStyleDeclaration 对象，表示元素的 内联style 属性（attribute），但忽略任何样式表应用的属性。
tabIndex，获取或设置当前元素的tab键激活顺序。
title，属性表示元素的 title。当鼠标移到节点上时，会以“工具提示”（tool tip）的弹出形式显示该属性的属性值文本。

方法：

blur()，blur方法用来移除当前元素所获得的键盘焦点。
click()，click 方法可以用来模拟鼠标左键单击一个元素。
focus()，可以设置指定元素获取焦点。

Document

属性：

body，返回当前文档中的<body>元素或者<frameset>元素。
characterSet，只读属性返回当前文档的字符编码。
childElementCount，只读属性返回一个无符号长整型数字，表示给定元素的子元素数。
children，只读属性，返回 一个Node的子elements ，是一个动态更新的 HTMLCollection。
compatMode，表明当前文档的渲染模式是混杂模式还是"标准模式"。
contentType，返回当前文档的Content-Type(MIME)类型。
cookie，设置或读取cookie。
curreentScript，返回其所包含的脚本中正在被执行的 <script> 元素。
defaultView，在浏览器中，该属性返回当前 document 对象所关联的 window 对象，如果没有，会返回 null。
designMode，document.designMode 控制整个文档是否可编辑。有效值为 “on”和 “off”。
dir，代表了文档的文字朝向，是从左到右(默认)还是从右到左。
doctype，返回当前文档关联的文档类型定义(DTD)。
documentElement，返回文档对象（document）的根元素的只读属性（如HTML文档的 <html> 元素）。
documentURI，返回文档地址字符串。
domain，获取/设置当前文档的原始域部分, 用于 同源策略。
embeds，返回一个HTMLCollection对象,包含了嵌入到当前文档中的所有的OBJECT对象。
firstElementChild，只读属性，返回对象的第一个孩子 Element, 如果没有子元素，则为null。
forms，返回当前文档中的 <form>元素的一个集合(一个 HTMLCollection)。
head，返回当前文档中的 <head> 元素。如果有多个 <head> 元素，则返回第一个。
hidden，返回布尔值，表示页面是（true）否（false）隐藏。
images，返回当前文档中所有 image 元素的集合。
implementation，返回一个和当前文档相关联的DOMImplementation对象。
lastElementChild，只读属性返回对象的最后一个孩子Element ，如果没有子元素，则返回null。
lastModified，返回一个字符串,其中包含了当前文档的最后修改日期和时间。
lastStyleSheetSet，返回最后一个启用的样式表集合。
links，links 属性返回一个包含文档中所有具有 href 属性值的 <area> 元素 <a> 元素的集合。
location，本页面的Location对象。
on + [event-name]
pointerLockElement
readyState，一个document 的 Document.readyState 属性描述了文档的加载状态。loading、interactive、complete。
referrer，返回跳转或打开到当前页面的那个页面的URI。
scripts，返回一个HTMLCollection对象,包含了当前文档中所有<script>元素的集合。
scrollingElement，返回滚动文档的 Element 对象的引用。 在标准模式下, 这是文档的根元素, document.documentElement。
styleSheets，表示当前使用的样式表集合的名称。
selectedStyleSheetSet，表示当前使用的样式表集合的名称。
styleSheetSets，返回一个所有当前可用样式表集的实时列表。
title，获取或设置文档的标题。
tooltipNode
URL，返回当前文档的URL地址
visibilityState，返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染.

方法：

adoptNode()，从其他的document文档中获取一个节点。
close()，用来关闭向当前文档的数据写入。
createAttribute()，创建并返回一个新的属性节点。
createComment()，创建并返回一个注释节点。
createDocumentFragment()，创建一个新的空白的文档片段。
createElement()，创建由tagName 指定的HTML元素，或一个HTMLUnknownElement，如果tagName不被识别。
createEvent()，使用new Event()代替。
createExpression()，编译生成一个 XPathExpression ,可以用来多次的执行。
createNodeIterator()，该函数的作用是用来筛选元素（节点）的。
createProcessingInstruction()，创建一个新的处理指令节点，并返回。
createRange()
createTextNode()
createTreeWalder()
elementFromPoint()，返回坐标点的顶端元素。
evaluate()，根据传入的 XPath 表达式以及其他参数，返回一个 XPathResult 对象。
execCommand()，操作当前focus元素，指令有参考。
exitFullscressn()，让当前文档退出全屏模式。全屏元素栈。
getElementById()，根据id属性返回节点列表集合。
getElementsByClassName()，根据css类属性返回节点列表集合。
getElementsByName()，根据name属性返回节点列表集合。
getElementsByTagName()，根据标签名字返回节点列表集合。
getSelection()，返回一个  Selection 对象，表示用户选择的文本范围或光标的当前位置。
hasFocus()，回一个 Boolean，表明当前文档或者当前文档内的节点是否获得了焦点。
importNode()，将外部文档的一个节点拷贝一份,然后可以把这个拷贝的节点插入到当前文档中。
open()，打开一个要写入的文档。如果目标中存在文档，则此方法将清除它。
queryCommandEnabled()，查询浏览器中指定的编辑指令是否可用。
queryCommandSupported()，确定浏览器是否支持指定的编辑指令。
querySelector()，返回与指定的选择器组匹配的元素的后代的第一个元素。
querySelectorAll()，返回一个 NodeList 表示元素的列表，把当前的元素作为根与指定的选择器组相匹配。
releaseCapture()
write()，将一个文本字符串写入由 document.open() 打开的一个文档流。
writeIn()，向文档中写入一串文本，并紧跟着一个换行符。

Window

也是浏览器JavaScript运行时的全局对象。

属性：

applicationCache，应用缓存对象的一个引用。
closed，表示所引用的窗口是否关闭。
console，控制台对象的引用。
crypto，返回与全局对象关联的 Crypto对象。
customElements，返回当前窗口的自定义元素注册表的CustomElementRegistry对象的实例。
devicePixelRatio，此属性返回当前显示设备的物理像素分辨率与CSS像素分辨率的比值。
document，返回指向当前窗口内的文档节点
frameElement，返回嵌入当前window对象的元素
frames，返回当前窗口，一个类数组对象，列出了当前窗口的所有直接子窗口。
fullScreen，这个属性表明了窗口是否处于全屏模式下。
history，返回History 对象的引用，History 对象提供了操作浏览器会话历史（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口。
indexedDB，返回indexedDB的引用。
innerHeight，只读，浏览器窗口的视口（viewport）高度（以像素为单位），如果存在水平滚动条，则包括它。
innerWidth，只读，浏览器视口（viewport）宽度（单位：像素），如果存在垂直滚动条则包括它。
length，返回当前窗口中包含的框架数量(框架包括frame和iframe两种元素)。
localStorage，返回localStorage的引用。
location，只读属性，返回一个 Location  对象，其中包含有关文档当前位置的信息。可以赋给它一个 DOMString。只要赋给 location 对象一个新值，文档就会使用新的 URL 加载。
locationbar，返回一个可以检查visibility属性的 locationbar 对象。
menubar，返回一个可以检测visibility属性的 menubar 对象。
name，窗口的名字主要用于为超链接和表单设置目标（targets）。窗口不需要有名称。
navigator，返回一个navigator对象的引用,可以用它来查询一些关于运行当前脚本的应用程序的相关信息。
on + [event-name]，各种事件类型。
opener，返回打开当前窗口的那个窗口的引用。
outerHeight，Window.outerHeight 获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框（window resizing borders/handles）。
outerWidth，Window.outerWidth 获取浏览器窗口外部的宽度。表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框（window resizing borders/handles）。
pageYOffset，这是 scrollY 的别名。
parent，返回当前窗口的父窗口对象，如果一个窗口没有父窗口,则它的 parent 属性为自身的引用。
performance，Web Performance API允许网页访问某些函数来测量网页和Web应用程序的性能，包括 Navigation Timing API和高分辨率时间数据。
personalbar，返回一个可以检测visibility属性的 personalbar 对象。
screen，返回当前window的screen对象。screen对象实现了Screen接口，它是个特殊的对象，返回当前渲染窗口中和屏幕有关的属性。
screenX，返回浏览器左边界到操作系统桌面左边界的水平距离。
screenY，返回浏览器顶部距离系统桌面顶部的垂直距离。
scrollbars，返回可以检查其可见性的滚动条对象。
scrollX，返回文档/页面水平方向滚动的像素值。
scrollY，返回文档在垂直方向已滚动的像素值。
self，返回一个指向当前 window 对象的引用。
sessionStorage，sessionStorage 属性允许你访问一个 session Storage 对象。
top，返回窗口体系中的最顶层窗口的引用。
URL，Window.URL 属性返回一个对象，它提供了用于创建和管理对象URLs的静态方法。
window，指向自己。

方法：

alert()，显示一个警告对话框,上面显示有指定的文本内容以及一个"确定"按钮。
atob()，对用base-64编码过的字符串进行解码 。
blur()，将焦点移出顶层窗口。
btoa()，编码。
cancelIndleCallback()，用于取消之前调用window.requestIdleCallback() 的回调。
clearImmediate()，清除 window.setImmediate
clearInterval()，取消用setInterval设置的重复定时任务。
clearTimeout()，取消了先前通过调用setTimeout()建立的定时器。
close()，关闭当前窗口或某个指定的窗口。
confirm()，显示一个具有一个可选消息和两个按钮(确定和取消)的模态对话框。
createImageBitmap()
fetch()
focus()，请求将窗口显示在前（靠近屏幕），这可能由于用户设置而失败，并且该窗口在方法返回之前不能保证会显示在最前。
getComputedStyle()，返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。
getSelection()，返回一个  Selection 对象，表示用户选择的文本范围或光标的当前位置。
matchMedia()，返回一个新的MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。
minimize()，让当前浏览器窗口最小化。
moveBy()，根据指定的值，移动当前窗口。备注：不能实现的原因。
moveTo()，将当前窗口移动到指定的坐标位置。备注：不能实现的原因。
open()，根据指定的参数，将一个资源加载到一个新的浏览上下文（如一个窗口）或一个已经存在的浏览上下文中。
postMessage(message, targetOrigin, [transfer])，可以安全地实现跨源通信。
print()，打开打印对话框打印当前文档。
prompt()，显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字。
requestAnimationFrame()，告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。
requestIdleCallback()，会在浏览器空闲时期依次调用函数， 这就可以让开发者在主事件循环中执行后台或低优先级的任务，而且不会对像动画和用户交互这样延迟触发而且关键的事件产生影响。函数一般会按先进先调用的顺序执行，除非函数在浏览器调用它之前就到了它的超时时间。
resizeBy()，调整窗口大小。备注：不能实现的原因。
resizeTo()，动态调整窗口的大小。备注：不能实现的原因。
scroll()，滚动窗口至文档中的特定位置。
scrollBy()，在窗口中按指定的偏移量滚动文档。
scrollTo()，滚动到文档中的某个坐标。
setImmediate()，仅IE10支持。
setInterval()，重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。
setTimeout()，设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。
stop()，此方法用于阻止页面资源加载。

参考：

MDN上介绍的DOM：https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model