DOM知识点小结

DOM(Document Object Model)将HTML和XML按结构解析为节点和对象组成的树形图如下图。通过定义的API来操作文档结构，达到改变文档结构、样式和内容的目的。 Using_the_W3C_DOM_Level_1_Core-doctree.jpg
20180203230047.png

• Document构造了HTML标签。
• Text构造了文本节点，相邻标签之间的回车是一个text节点，用js生成的- - 标签没有回车，因而也就没有该节点。
• Element构造了标签。
• Comment构造了注释节点。
• and so on... 可以在控制台上console.dir()，通过查看其_proto_来查看。
• 节点类型用nodeType表示。可以用document.nodeType === Node.DOCUMENT_NODE或者document.nodeType === 9检测节点类型。目前仍在使用的节点类型有如下几种：
  微信截图_20180203230756.png

常用的Node属性：

1. 父节点： parentElement,parentNode
2. 兄弟节点：previousSibling,nextSibling
3. 子节点：childNodes,firstChild,,lastChild
4. 自身：nodeName,nodeType,nodeValue,ownerDocument,textContent,
   innerText,outerText.

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

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

1. 搞清楚英文单词的意思就知道用法
2. 如果发现知道英文后依然不明白用法，看 MDN 的例子即可，如 normalize

DOM APi 无外乎「增删改查」
Document 接口
属性

anchors
body
characterSet
childElementCount
children
doctype
documentElement
domain
fullscreen
head
hidden
images
links
location
onxxxxxxxxx
origin
plugins
readyState
referrer
scripts
scrollingElement
styleSheets
title
visibilityState
方法：

close()
createDocumentFragment()
createElement()
createTextNode()
execCommand()
exitFullscreen()
getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
getSelection()
hasFocus()
open()
querySelector()
querySelectorAll()
registerElement()
write()
writeln()
document.querySelector 和 document.querySelectorAll