DOM核心重点 | 学习总结

DOM接口简介

文档对象模型（Document Object Model，），简称 DOM****是处理（如：HTML、XML）的标准编程接口。通过这些DOM接口可以改变网页的内容、结构、样式。

改变HTML

对于HTML，DOM使得html形成一颗DOM树，包括：文档document、元素element、节点node。

值得注意，一个页面就是一个文档；页面内的所有内容都是一个节点，包括：注释、标签、属性、文本。而元素只是页面内容里的标签而已。因此，元素属于节点的一部分。

DOM把以上内容都看做对象。

DOM操作

上述提到DOM包括：文档、元素和节点。但是关于DOM操作主要是对元素的操作。接下来详细介绍DOM操作如何实现。

创建元素

主要有两种创建元素的方式：

• document.createElement(‘th’); //创建th标签
• element.innerHTML = ‘小明’; // 创建td标签

添加元素

• node.appendChild(child); // 在父节点的子节点列表末尾追加child
• node.insertBefore(child); // 在父节点的子节点列表前面插入child

删除元素

node.removeChild(child); // 在父节点的子节点列表删除指定child

改变元素

1. 改变普通的元素内容：

• innerHTML
• innerText

2. 改变元素属性：

• 图片img的src、title
• 链接a的href

3. 改变表单元元素

• type
• value
• disabled

4. 改变元素样式

• style // 用于少量样式的改动
• className // 元素样式变化较大时，在style里面写好类的样式，js直接添加类名即可。

查找元素

1. 低版本方法：

• getElementByID //id选择器名查找
• getElementByTagName // 标签名查找

2. H5新增方法：

• querySelsctor // 查找第一个
• querySelectorAll // 查找所有 返回值是一个伪数组

4. 利用节点操作查找元素：

• 子node.parentNode // 查找子节点的父节点
• 父.node.children // 查找父节点的子元素节点

属性操作

主要针对自定义属性:

1. 获取元素属性值
   getAttribute(‘data-index’);
2. 设置元素属性值
   setAttribute(‘data-index’);
3. 移除元素属性
   removeAttribute(‘data-index’);

事件操作

首先要知道事件三要素是：事件源、事件类型、事件处理程序。
事件源（谁）
事件类型（鼠标触发事件）
事件处理程序（响应处理程序）

btn.onclick = function() {
    // 当按钮被点击（触发）事件处理程序（响应）内容
}