DOM API

DOM重点

1. 搜索归纳,以掌握 DOM 基本思想

2. DOM 的作用 === 表示 HTML 文档

3. DOM提供的 API === 查询,修改 HTML 文档内容

4. 输入document.documentElement来获得 html 节点

5. 只有Node.querySelectorAll()返回的数组不是动态的

6. scrollHeight返回的是高度

7. scrollTop返回的是滚动高度

8. DocumenFragment(优化)
   ​

DOM是什么

1. DOM === 想象的树型结构模型.

2. DOM提供的API的作用就是修改或者查看 HTML 代码

3. DOM中的O指的是Object,他是在内存中,按照树型结构,通过构造函数(如Node,Element(翻译为标签比较好),Document三个构造函数),构造出对象,将 DOM 展现到内存中

4. DOM的D指的是Document,可以认为是 HTML 文档

5. DOM的M指的是Model,因为在 HTML结构 在内存中不好用笔表示,所以用一个模型来表示,这个模型就是树型结构

6. DOM 树型结构

DOM树形图

i. 上图就是DOM,其中的每个节点(包括矩形节点和椭圆形节点)都是Node类型

ii. document节点是Document构造函数的一个实例对象,document节点代表了整个文档(整个树型结构
,我们可以通过直接输入document来获取document节点

iii. html节点是Element构造函数的一个实例对象,html节点又叫根节点
我们可以通过输入document.documentElement来获得html节点

iv. 椭圆形的文本节点:"你好,我叫饶家俊" 是Text构造函数的一个实例对象(文本节点是Text构造函数的一个实例对象)

v. Node,Element,Text的关系

Node,Element,Text的关系

node的接口

• child / children / parent
• node
• first / last
• next / previous
• sibling / siblings
• type
• value / text / content
• inner / outer
• element

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

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

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

DOM APi 无外乎「增删改查」

nextSibing是可能会获取到文本的，
innerText和textConten是有细微的差别的，
nodeType1表示元素3表示文本
cloneNode()ture是深拷贝false是浅拷贝
isEqualNode()和isSameNode()的区别isEqualNode()是看起来相等，isSameNode()是真的相等
normalize() // 常规化 把不正常的东西变得正常了

Document 接口

属性

• 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()