DOM

1.什么是DOM

• DOM，全称Document Object Model文档对象模型。

• JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
• 文档
– 文档表示的就是整个的HTML网页文档
• 对象
– 对象表示将网页中的每一个部分都转换为了一个对象。
• 模型
– 使用模型来表示对象之间的关系，这样方便我们获取对象。

mdn文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction

2.文档节点（document）

• 文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点。
• document对象作为window对象的属性存在的，我们不用获取可以直接使用。
• 通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。

3.元素节点（Element）

HTML中的各种标签都是元素节点，这也是我们最常用的一个节点。
• 浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点。
• 比如：
– document.getElementById()根据id属性值获取一个元素节点对象。

4.文本节点（Text）

文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本
都是文本节点。
• 它包括可以字面解释的纯文本内容。
• 文本节点一般是作为元素节点的子节点存在的。
• 获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本
节点。
• 例如：
– 元素节点.firstChild;– 获取元素节点的第一个子节点，一般为文本节点

5.事件

• 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。
• JavaScript 与 HTML 之间的交互是通过事件实现的。
• 对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。

6.获取元素节点

通过document对象调用
1. getElementById()– 通过id属性获取一个元素节点对象 object
2. getElementsByTagName()– 通过标签名获取一组元素节点对象 类数组（有length属性）
3. getElementsByName()– 通过name属性获取一组元素节点对象 类数组（有length属性）

7.获取元素节点的子节点

• 通过具体的元素节点调用
1. getElementsByTagName()
– 方法，返回当前节点的指定标签名后代节点
2. childNodes
– 属性，表示当前节点的所有子节点
3. firstChild
– 属性，表示当前节点的第一个子节点
4. lastChild
– 属性，表示当前节点的最后一个子节点

8.获取父节点和兄弟节点

• 通过具体的节点调用
1. parentNode
– 属性，表示当前节点的父节点
2. previousSibling
– 属性，表示当前节点的前一个兄弟节点
3. nextSibling
– 属性，表示当前节点的后一个兄弟节点

9.使用CSS选择器进行查询

• querySelector()
• querySelectorAll()
• 这两个方法都是用document对象来调用，两个方法使用相同，
都是传递一个选择器字符串作为参数，方法会自动根据选择器
字符串去网页中查找元素。
• 不同的地方是querySelector()只会返回找到的第一个元素，而
querySelectorAll()会返回所有符合条件的元素。

10.节点的修改

• 这里的修改我们主要指对元素节点的操作。
• 创建节点
– document.createElement(标签名)
• 删除节点
– 父节点.removeChild(子节点)
• 替换节点
– 父节点.replaceChild(新节点 , 旧节点)
• 插入节点
– 父节点.appendChild(子节点)
– 父节点.insertBefore(新节点 , 旧节点)

11.clientWidth和offsetWidth的区别

/
clientWidth
clientHeight
- 这两个属性可以获取元素的可见宽度和高度
- 这些属性都是不带px的，返回都是一个数字，可以直接进行计算
- 会获取元素宽度和高度，包括内容区和内边距
* - 这些属性都是只读的，不能修改

offsetWidth
offsetHeight
获取元素的整个的宽度和高度，包括内容区、内边距和边框