1.DOM简介
-
是什么DOM
DOM：文档对象模型，是W3C组织推介处理可扩展标记语言的标椎编程接口
-
DOM树
- 文档： 一个页面就是一个文档，DOM中使用document表示
- 元素：页面中的所有标签都是元素，DOM使用element来表示
-
DOM节点
节点：网页中所有的内容都是节点（标签、属性、文本），DOM中使用node表示
2.获取元素
-
根据ID获取
使用getElementById()方法获取带有id元素的对象
-
根据标签名获取
使用getElementByTagName()方法可以获取带有指定标签名的对象的集合
-
通过Class获取
使用getElementByClassName()方法可以获取带有指定类名的对象的集合
- querySelector
| 方法 | 案例 | 说明 |
|---|---|---|
| querySelector | querySelector('div') | 选择第一个div |
| querySelector | querySelector('#nav') | 选择第一个带有class选择器的元素 |
| querySelector | querySelector('.nav') | 选择第一个带有id选择器的元素 |
| querySelectorAll | querySelectorAll('div') | 选择所有div |
| querySelectorAl | querySelectorAll('#nav') | 选择所有带有class选择器的元素 |
| querySelectorAll | querySelectorAll('.nav') | 选择所有带有id选择器的元素 |
-
特殊元素获取
- 获取body元素
document.body
- 获取html元素
document.documentElement
3.事件基础
事件三要素：事件源、事件类型、处理程序
-
事件源
DOM节点
-
事件类型
触发机制，通过什么方式触发处理程序
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击右键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标摁下触发 |
-
处理程序
处理事件的程序
4.操作元素
-
改变元素类容
- element.innerText
回去除HTML标签、空格和换行
- element.innerHTML
保留HTML标签、空格、换行
-
改变元素属性
element.属性 = " 属性值"
-
改变元素的样式
element.style.属性 = "属性值"
element.className = "class类名"
5.节点操作
-
节点到达组成
nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）
- 元素节点?nodeType为1
- 属性节点 nodeType为2
- 文本节点nodeType为3
-
父级节点
node.parentNode
-
子节点
parentNode.childNodes //获取所有子节点
parentNode.firstChild //第一个子节点，不管是文本节点还是元素节点
parentNode.lastChild // 最后一个子节点，不管是文本节点还是元素节点
-
兄弟节点
node.nextSibling? ? ? ? //下一个节点
node.previousSiling? ? ? ? //上一个节点
-
创建节点
document.createElement('tagName')
-
添加节点
node.appendChild(child)? ? ? ? //添加到子节点尾部
node.insertBefore(child，指定元素)? ? ? ? //添加到指定子节点位置
-
删除节点
node.removechild(child)