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
改变元素
- 改变普通的元素内容:
- innerHTML
- innerText
- 改变元素属性:
- 图片img的src、title
- 链接a的href
- 改变表单元元素
- type
- value
- disabled
- 改变元素样式
- style // 用于少量样式的改动
- className // 元素样式变化较大时,在style里面写好类的样式,js直接添加类名即可。
查找元素
- 低版本方法:
- getElementByID //id选择器名查找
- getElementByTagName // 标签名查找
- H5新增方法:
- querySelsctor // 查找第一个
- querySelectorAll // 查找所有 返回值是一个伪数组
- 利用节点操作查找元素:
- 子node.parentNode // 查找子节点的父节点
- 父.node.children // 查找父节点的子元素节点
属性操作
主要针对自定义属性:
- 获取元素属性值
getAttribute(‘data-index’); - 设置元素属性值
setAttribute(‘data-index’); - 移除元素属性
removeAttribute(‘data-index’);
事件操作
首先要知道事件三要素是:事件源、事件类型、事件处理程序。
事件源(谁)
事件类型(鼠标触发事件)
事件处理程序(响应处理程序)
btn.onclick = function() {
// 当按钮被点击(触发)事件处理程序(响应)内容
}