⽂档对象模型DOM⼤全整理（MDN）
DOM
概念
定义：⽂档对象模型 (DOM) 是HTML和XML⽂档的编程接⼝。它提供了对⽂档的结构化的表述，并定义了⼀种⽅式可以使从程序中对该结构进⾏访问，从⽽改变⽂档的结构，样式和内容。
简⽽⾔之：将 web 页⾯与到脚本或编程语⾔连接起来。
DOM模型⽤⼀个逻辑树来表⽰⼀个⽂档，树的每个分⽀的终点都是⼀个节点(node)，每个节点都包含着对象(objects)。
DOM的⽅法(methods)让你可以⽤特定⽅式操作这个树，⽤这些⽅法你可以改变⽂档的结构、样式或者内容。节点可以关联上事件处理器，⼀旦某⼀事件被触发了，那些事件处理器就会被执⾏。
数据类型
document：当⼀个成员返回 document 对象 （例如，元素的 ownerDocument 属性返回它所属于 document ) ，这个对象就是root document 对象本⾝。
element：是指由DOM API 中成员返回的类型为 element 的⼀个元素或节点。 例如， ateElement() ⽅法会返回⼀个node 的对象引⽤，也就是说这个⽅法返回了在DOM中创建的 element。 element 对象实现了 DOM Element 接⼝以及更基本的 Node 接⼝，参考⽂档将两者都包含在内。
nodeList：是⼀个元素的数组，如从 ElementsByTagName() ⽅法返回的就是这种类型。 nodeList 中的条⽬由通过下标有两种⽅式进⾏访问list.item(1) / list[1]两种⽅式是等价的，第⼀种⽅式中 item() 是 nodeList 对象中的单独⽅法。 后⾯的⽅式则使⽤了经典的数组语法来获取列表中的第⼆个条⽬。
attribute：当 attribute 通过成员函数 (例如，通过 createAttribute()⽅法) 返回时，它是⼀个为属性暴露出专门接⼝的对象引⽤。DOM中的属性也是节点.
namedNodeMap：和数组类似，但是条⽬是由name或index访问的，虽然后⼀种⽅式仅仅是为了枚举⽅便，因为在 list 中本来就没有特定的顺序。 出于这个⽬的， namedNodeMap 有⼀个 item() ⽅法，你也可以从 namedNodeMap 添加或移除条⽬。
Document
Document 接⼝表⽰任何在浏览器中载⼊的⽹页，并作为⽹页内容的⼊⼝，也就是。DOM 树包含了像<body> 、<table>这样的元素，以及。它向⽹页⽂档本⾝提供了全局操作功能，能解决如何获取页⾯的 URL ，如何在⽂档中创建⼀个新的元素这样的问题。
Document 接⼝描述了任何类型的⽂档的通⽤属性与⽅法。根据不同的⽂档类型（例如、、，…），还能使⽤更多 API：使⽤
“text/html” 作为内容类型（content type）的 HTML ⽂档，还实现了 接⼝，⽽ XML 和 SVG ⽂档则（额外）实现了 接⼝。
属性
此接⼝也继承⾃ 和 接⼝。
返回当前⽂档中的<body>元素或者<frameset>元素.
只读
返回⽂档正在使⽤的字符集
eg:document.characterSet= “UTF-8”
只读
指⽰⽂档是否以 quirks 怪异模式或 strict 严格模式呈现。
返回值：是⼀个枚举值（enumerated value），可能的值有：
“BackCompat”：⽂档为怪异模式。
“CSS1Compat”：⽂档不是怪异模式，意味着⽂档处于标准模式或者准标准模式。
documentpatMode =“CSS1Compat”
只读
根据当前⽂档的 MIME Header，返回它的 Content-Type。
只读
返回当前⽂档的⽂档类型定义（Document Type Definition, DTD）。eg:document.doctype.name = “html"
Document.documentElement 只读
返回返回⽂档对象（）的根的只读属性（如HTML⽂档的 元素）。应当使⽤
document.documentElement 来获取根元素
Document.documentURI 只读
以字符串的类型，返回当前⽂档的路径。
以列表(list)的类型，返回当前⽂档的嵌⼊式的元素 。
Document.fonts
返回当前⽂档的 FontFaceSet 接⼝。FontFaceSet 接⼝对 加载新字体、检查已加载字体的加载状态 来说⾮常有⽤。
ady.then(function() {
// 字体加载完成后的逻辑
});
Document.forms 只读
返回⼀个包含当前⽂档中所有表单元素 的列表。
获取表单内的元素
var selectForm = document.forms[index];
var selectFormElement = document.forms[index].elements[index];
Document.head 只读
返回当前⽂档的 元素。如果有多个 元素，则返回第⼀个; document.head 是个只读属性，为该属性赋值只会静默失败，如果在严格模式中，则会抛出TypeError异常。
Document.hidden 只读
返回⼀个布尔值，表明当前页⾯是否隐藏。
Document.images 只读
返回当前⽂档中所包含的图⽚的列表。
Document.links 只读
返回⼀个⽂档中所有具有 href 属性值的 元素与 元素的集合。
Document.plugins 只读
返回⼀个 对象，该对象包含⼀个或多个s表⽰当前⽂档中的 元素。
Document.scripts 只读
返回⽂档中所有的<script>元素。
Document.scrollingElement 只读
返回对⽂档 Element 元素的引⽤。
在标准模式下, 这是⽂档的根元素, document.documentElement.当在怪异模式下， scrollingElement 属性返回 HTML body 元素（若不存在返回 null ）。
Document.selectedStyleSheetSet
返回当前正使⽤的样式表集。
Document.styleSheetSets 只读
返回⽂档上可⽤样式表的列表。
Document.timeline 只读
返回 DocumentTimeline 的⼀个实例，该实例是在页⾯加载时⾃动创建的。表⽰当前⽂档的默认时间轴。
Document.visibilityState 只读
返回 string 表明当前⽂档的可见性。可能的取值有 visible, hidden, prerender, unloaded 。
Document 接⼝继承⾃ ParentNode 的接⼝
ParentNode.childElementCount 只读
返回这个ParentNode的⼦元素的数量。var count = node.childElementCount;
count：返回值，是⼀个unsigned long（简单的整数）类型。
node：表⽰⼀个对象Document，DocumentFragment或Element。
ParentNode.children 只读
返回⼀个live HTMLCollection，其中包含作为这个
ParentNode的⼦元素的所有元素对象，省略掉它的所有⾮元素节点。
ParentNode.firstElementChild 只读
返回第⼀个节点，该节点既是ParentNode的⼦节点，也是⼀个元素，如果没有元素，则返回null。
ParentNode.lastElementChild 只读
返回最后⼀个节点，该节点既是ParentNode的⼦节点，⼜是⼀个元素，如果没有元素，则返回null。
HTMLDocument 的扩展
HTML ⽂件的 Document 接⼝继承⾃ HTMLDocument 接⼝（从 HTML5 扩展）：
返回⼀个使⽤分号分隔的 cookie 列表，或设置（写⼊）⼀个 cookie。
Document.defaultView 只读
返回⼀个对（当前） window 对象的引⽤。如果没有，会返回 null。根据 quirksmode，IE 9 以下版本不⽀持 defaultView。
Document.designMode
获取或设置（让⽤户）编辑整个⽂档的能⼒。有效值为 “on” 和 “off” 。在 IE6 到 IE10 中，该值为⼤写。
Document.dir 只读
获取或设置⽂档的⽂字⽅向（rtl 或 ltr）。是从左到右(默认，ltr)还是从右到左（rtl）。
Document.domain
获取或设置当前⽂档的域名。
Document.lastModified 只读
返回⽂档最后修改的时间。格式："10/13/2020 21:23:39"
Document.location 只读
返回当前⽂档的 URI，对象形式
返回当前⽂档的加载状态。
loading（正在加载）
document 仍在加载。
interactive（可交互）
⽂档已被解析，"正在加载"状态结束，但是诸如图像，样式表和框架之类的⼦资源仍在加载。
complete（完成）
⽂档和所有⼦资源已完成加载。表⽰ load 状态的事件即将被触发。
返回来源页⾯的 URI。（即上⼀个页⾯）
Document.title
获取或设置当前⽂档的标题。
Document.URL 只读
以字符串形式返回⽂档的地址栏链接。(完整)
整理编辑暂停于此
DocumentOrShadowRoot 包含的属性
Document 接⼝混⼊（mixin）DocumentOrShadowRoot 包含的属性。请注意，这些属性⽬前仅有 Chrome 实现；其他浏览器仍在Document 接⼝上直接实现它们。.
DocumentOrShadowRoot.activeElement 只读
返回阴影树内聚焦的 Element 。
Document.fullscreenElement 只读
当前⽂档处于全屏模式下的元素。
DocumentOrShadowRoot.pointerLockElement 只读
返回 element set as the target for mouse events while the pointer is locked. null if lock is pending, pointer is unlocked, or if the target is in another document.
DocumentOrShadowRoot.styleSheets 只读
Returns a StyleSheetList of CSSStyleSheet objects for stylesheets explicitly linked into, or embedded in a document. Event handlers
Represents the event handling code for the afterscriptexecute event.
Represents the event handling code for the beforescriptexecute event.
Represents the event handling code for the copy event.
Represents the event handling code for the cut event.
html document是什么Is an EventHandler representing the code to be called when the fullscreenchange event is raised.
Is an EventHandler representing the code to be called when the fullscreenerror event is raised.
Represents the event handling code for the paste event.
Represents the event handling code for the readystatechange event.
Is an EventHandler representing the code to be called when the selectionchange event is raised.
Is an EventHandler representing the code to be called when the visibilitychange event is raised.
The Document interface is extended with the GlobalEventHandlers interface:
Is an EventHandler representing the code to be called when the abort event is raised.
An EventHandler called when an animationcancel event is sent, indicating that a running CSS animation has been canceled. animationend
An EventHandler called when an animationend event is sent, indicating that a CSS animation has stopped playing. animationiteration
An EventHandler called when an animationiteration event has been sent, indicating that a CSS animation has begun playing a new iteration of the animation sequence.
An EventHandler called when an animationstart event is sent, indicating that a CSS animation has started playing. auxclick
An EventHandler called when an auxclick event is sent, indicating that a non-primary button has been pressed on an input device (e.g. a middle mouse button).
Is an EventHandler representing the code to be called when the blur event is raised.
Is an OnErrorEventHandler representing the code to be called when the error event is raised.
Is an EventHandler representing the code to be called when the focus event is raised.
Is an EventHandler representing the code to be called when the cancel event is raised.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。