DOM

DOM(Document Object Model)

Node 分为 Document（html）、Element（元素）和 Text（文本），以及其他不重要的。
Node相当于是Document、Element、Text的根元素，Node具有的属性，Document、Element、Text都具有，但Document、Element、Text又各自具有自己的属性（这跟Array、Function与Object的关系是一样的，Array、Function都具有Object的公用属性，但它们又有各自的特性）

Node 的接口

Node具有的接口，Document、Element、Text也都具有。

1. 属性

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

   妈的记不住。
   如果记不住就背下以下单词：

   • child / children / parent
   • node
   • first / last
   • next / previous
   • sibling / siblings
   • type
   • value / text / content
   • inner / outer
   • element
     然后互相组合

document.body.childNodes会把回车也当作子节点
document.body.firstChild也会把回车当子节点
document.body.lastChild也会把回车当子节点
document.body.previousSibling也会把回车当子节点
document.body.nextSibling也会把回车当子节点
document.body.children不会把回车当子节点
document.body.firstElementChild不会把回车（文本）当子节点
document.body.lastElementChild不会把回车（文本）当子节点
document.body.previousElementSibling不会把回车（文本）当子节点
document.body.nextElementSibling不会把回车（文本）当子节点

firstElementChild、lastElementChild、previousElementSibling不是Node的属性，是Element的属性。

nodeName都是大写，除了svg，HTML要写成document.documentElement.nodeName(死记硬背)

nodeType取值：

nodeType = 1的Node就是Element；nodeType = 3的Node就是Text；nodeType = 8的Node就是Comment；nodeType = 9的Node就是Document
考点：DocumentFragment性能优化

innerText和textContent区别：

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

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

cloneNode():
存在深拷贝和浅拷贝

Document 接口

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

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

Element 接口

自己看mdn