核心知识：

节点层级

document 节点表示每个文档的根节点，根节点的唯一子节点是 <html> 元素。我们称之为文档元素。
document.documentElement 指向 html
document.body 指向 body

Node 类型

在 JS 中所有节点类型都继承 Node 类型。

每个节点都有 nodeType 属性，表示该节点的类型。
Node.ELEMENT_NODE (1) 元素节点
Node.ATTRIBUTE_NODE (2)
Node.TEXT_NODE (3) 文本节点
Node.CDATA_SECTION_NODE (4)
Node.ENTITY_REFERENCE_NODE (5)
Node.DOCUMENT_NODE (9) 文档类型

  1. // 判断节点类型方式
  2. if (some.nodeType === Node.ELEMENT_NODE) {
  3.     alert("Node is an element.")
  4. }

nodeName 和 nodeValue

节点关系

每个节点都有一个 childNodes 属性，其中包含一个 NodeList 的实例。NodeList 是类数组对象，可以使用 Array.prototype.slice(someNode.childNodes, 0) 或 Array.from(some.childNodes)
将其转化为数组.

parentNode
previousSibling
nextSibling
firstChild
lastChild

ownerDocument 属性是一个指向代表整个文档的文档节点的指针。

操纵节点

appendChild()方法返回新添加的节点，注意：传入已存在的节点，节点会变为改节点的最后的子节点。
insertBefore(要插入的节点，参照节点)， 如果参照节点为null，则和 appendChild 相同
replaceChild(newNode, someNode.firstChild) 替换。
removeChild 移除节点
cloneNode 复制节点

Document 类型

一般来说，文档类型如果存在 Document (document ) 是只读的，并且只能有一个 Element (html)类型的节点.
document.domain
document.URL
document.refferrer

document.getElementById()
document.getElementsByTagName()
document.getElementsByName()
以上都返回 HTMLConllent 集合

特殊集合：
document.anchors 包含文档中所有带 name 属性的 元素

Elment 类型

元素类型，最常见的节点类型
element.tagName.toLowerCase() === someNode.nodeName

HTML 元素

操作 attribute
getAttribute()
setAttribute(attrKey, attrValue)
removeAttribute()

attributes 属性

document.createElement()

Text 类型

nodeType 为 1
document.createTextNode()

MutationObserver 接口

MutationObserver 的实例要通过调用 MutationObserver 构造函数并传入一个回调函数来创建：
let observer = new MutationObserver(() => console.log(‘DOM was mutated’))

observer.observe(document.body, {attributes: true})
observer.disconnet()
observer.takeRecords()

Dom 扩展

querySeletor()
querySeletorsAll()
matches()

childElementCount
lastElementChild
firstElementChild
previousElementSibling
nextElementSibling

css 类扩展

getElementsByClassName()

classList 属性:
add
contains
remove
toggle

焦点管理

document.activeElement 当前拥有焦点的 DOM 元素
document.hasFocus() 判断当前页面是否拥有焦点，因为只有页面完全加载完才会将焦点设置为 document.body

HTMLDocument 扩展
1.readyState 属性
有两个值：loading 和 complete

2.document.compatMode 判断页面渲染模式 “CSS1Compat”
3.document.head
4.document.characterSet 判断文档字符集
5.div.dataset.myname data- 自定义的属性

innerText
outerText
innerHTML
outerHTML
textContent

scrollIntoView()

document.form[0].scrollIntoView({behavior:’smooth’, block: ‘start’})

DOM2 和 DOM3

命名空间

div.setUserData(“name”, “zorro”, function(){})
div.getUserData(“name”)

样式

div.style 属性
div.defaultView.getComputedStyle() 获取计算属性 第二个参数可以获得伪类的样式

操作样式表 CSSStyleSheet

CSSStyleSheets 类型表示 CSS 样式表，包括使用 元素和通过