JavaScript-DOM

一、DOM介绍

1. 什么是DOM

• window包括DOM、BOM、JavaScript
• DOM（Document Object Model）
  • 文档对象模型
  • 将页面所有的内容表示为可以修改的对象
• BOM（Browser Object Model）
  • 浏览器对象模型
  • 由浏览器提供的用于处理文档之外的所有内容的其他对象
• 深入理解DOM
  • 浏览器会对我们编写的HTML、CSS进行渲染，同时它又要考虑我们可能会通过JavaScript来对其进行操作
  • 于是浏览器将我们编写在HTML中的每一个元素都抽象成了一个对象
  • 所有这些对象都可以通过JavaScript对其进行访问，那么我们就可以通过JavaScript来操作页面
  • 所以，我们将这个抽象过程称之为文档对象模型

2. 认识DOM Tree

• 理解
  • 一个页面有很多元素，在html结构中，最终会形成一个树结构
  • 在抽象成DOM对象的时候，它们也会形成一个树结构，我们称之为DOM Tree

3. DOM的整体结构

• DOM的继承关系

• document对象
  • Document节点表示整个载入的网页，它的实例是全局的document对象

二、节点和元素

1. 节点和元素的关系

• 节点包括文档节点、元素节点、文本节点、属性节点、注释节点。
• 元素是节点的其中之一

2. 节点和元素的导航

• 节点之间的导航
  如果我们获取到一个节点后，可以根据这个节点去获取其他的节点，我们称之为节点之间的导航。
  • 父节点：parentNode
  • 前兄弟节点：previousSibling
  • 后兄弟节点：nextSibling
  • 子节点：childNodes
  • 第一个子节点：firstChild
  • 最后一个子节点：lastChild
• 元素之间的导航
  • parentElement
  • previousElementSibling
  • nextElementSibling
  • children
  • firstElementChild
  • lastElementChild

三、Node节点的属性

• nodeType：节点类型
• nodeName：节点名称
• tagName：元素名称
• innerHTML：设置元素中的内容，作为HTML插入
• textContent：设置元素中的文本内容，作为文本插入
• nodeValue：非元素节点的文本内容

四、元素

1. 获取元素的方法

• querySelector
• querySelectorAll
• getElementById
• getElementsByName
• getElementsByTagName
• getElementsByClassName

2. 元素的特性attribute

• attribute的分类
  • 标准的attribute：比如id、class、href、type等
  • 非标准的attribute：自定义的属性
• attribute的操作
  • hasAttribute(name)：检查特性是否存在
  • getAttribute(name)： 获取这个特性值
  • setAttribute(name, value)：设置这个特性值
  • removeAttribute(name)：移除这个特性
  • attributes：attr对象的集合

3. 元素的属性property

• 对于标准的attribute，会在DOM对象上创建与其对应的property
• 大多数情况下，设置、获取attribute，推荐使用property
• data-*自定义属性，可以通过dataset属性获取

4. 元素的class和style

• 元素的className
  • 元素的class attribute，对应的property并非叫class，而是className
• 元素的classList
  • add：添加
  • remove：移除
  • toggle：切换
  • contains：包含
• 元素的style样式

5. 元素的常见操作

• 创建元素
  • createElement
• 插入元素
  • append
  • prepend
  • before
  • after
  • replaceWith
• 移除元素
  • remove
• 克隆元素
  • cloneNode

6. 元素的大小和滚动

• clientWidth：contentWidth+padding（不包含滚动条）
• clientHeight：contentHeight+padding
• clientTop：border-top的宽度
• clientLeft：border-left的宽度
• offsetWidth：元素完整的宽度
• offsetHeight：元素完整的高度
• offsetLeft：距离父元素的x
• offsetHeight：距离父元素的y
• scrollHeight：整个可滚动的区域高度
• scrollTop：滚动部分的高度