文档树
Document Object Model (DOM) 为文档对象模型， 它使用对象的表示方式来表示对应的文档结构及其中的内容。
下面为一个样例 p 元素在文档中的对象所包含的所有属性。
控制台：
p#dom
accessKey: ""
align: ""
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {0: id, id: id, length: 1}
autocapitalize: ""
baseURI: "file:///E:/yuanli.html"
childElementCount: 0
childNodes: NodeList [text]
children: HTMLCollection []
classList: DOMTokenList [value: ""]
className: ""
clientHeight: 26
clientLeft: 0
clientTop: 0
clientWidth: 713
contentEditable: "inherit"
dataset: DOMStringMap {}
dir: ""
draggable: false
firstChild: text
firstElementChild: null
hidden: false
id: "dom"
innerHTML: "查看我自己都有哪些属性"
innerText: "查看我自己都有哪些属性"
inputMode: ""
isConnected: true
isContentEditable: false
lang: ""
lastChild: text
lastElementChild: null
localName: "p"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: script
nextSibling: text
nodeName: "P"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 26
offsetLeft: 8
offsetParent: body
offsetTop: 20
offsetWidth: 713
onabort: null
onauxclick: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
onfullscreenchange: null
onfullscreenerror: null
ongotpointercapture: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onlostpointercapture: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onpointercancel: null
onpointerdown: null
onpointerenter: null
onpointerleave: null
onpointermove: null
onpointerout: null
onpointerover: null
onpointerup: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onsearch: null
onseeked: null
onseeking: null
onselect: null
onselectionchange: null
onselectstart: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
onvolumechange: null
onwaiting: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwheel: null
outerHTML: "<p id="dom">查看我自己都有哪些属性</p>"
outerText: "查看我自己都有哪些属性"
ownerDocument: document
parentElement: body
parentNode: body
prefix: null
previousElementSibling: null
previousSibling: text
scrollHeight: 26
scrollLeft: 0
scrollTop: 0
scrollWidth: 713
shadowRoot: null
slot: ""
spellcheck: true
style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
tabIndex: -1
tagName: "P"
textContent: "查看我自己都有哪些属性"
title: ""
translate: true
__proto__: HTMLParagraphElement
通过使用 DOM 提供的 API (Application Program Interface) 可以动态的修改节点（node），也就是对 DOM 树的直接操作。 浏览器中通过使用 JavaScript 来实现对于 DOM 树的改动。
DOM 包含
- DOM Core
- DOM HTML
- DOM Style
- DOM Event
HTML 转换 DOM 树
<!DOCTYPE html> <html lang="en"> <head> <title>My title</title> </head> <body> <a href="">My Link</a> <h1>My header</h1> </body> </html>
节点遍历
在元素节点中提取自己所需的节点，并予以操作。
节点类型
常用节点类型
- ELEMENT_NODE 可使用 Document.createElement('elementName'); 创建
- TEXT_NODE 可使用 Document.createTextNode('Text Value'); 创建
不同节点对应的NodeType类型
此值可以通过 Node.nodeType 来获取。
1元素，2属性，3文本，8注释，9文档等比较常用。还有平常说的元素 其实指的是节点中得元素节点，所以说节点包含元素，节点还包括文本节点、实体节点等。