前端 - JS DOM
目录JS文档
- 初识DOM
- DOM
- 节点
- 事件
- DOM查询
- 获取元素节点
- 获取元素节点的子节点
- 获取元素节点的父节点与兄弟节点
- 其他常用查询
- DOM增删改
- 阻止标签的默认行为
- 响应函数
- 样式
- 内联样式
- 读取元素样式
- 其他常用属性与方法
- 宽高
- 定位相关
- 滚动相关
- 事件对象
- 事件的冒泡
- 事件的委派
- 事件的传播
- 事件的绑定
- 事件的常见应用
- 拖拽
- 滚轮
- 键盘
初识DOM
DOM
JS通过文档对象模型 (Document Object Model, DOM) 对HTML文档进行操作：
- 文档：整个HTML页面的文档
- 对象：将网页中的每一个部分都转换为了对象
- 模型：使用模型来表示对象之间的关系
节点
节点(Node)是构成页面最基本的组成部分，HTML标签、属性、文本、注释都可以称为节点，不同类型的节点，拥有不同的属性和方法。
- 文档节点：整个HTML文档
- 元素节点：文档中的HTML标签
- 属性节点：元素的属性
- 文本节点：标签中的文本
节点的属性如下：
| 节点 | nodeName |
nodeType |
nodeValue |
|---|---|---|---|
| 文档节点 | #document |
9 | null |
| 元素节点 | 标签名 | 1 | null |
| 属性节点 | 属性名 | 2 | 属性值 |
| 文本节点 | #text |
3 | 文本内容 |
浏览器已经为我们提供了文档节点对象document，它是window对象的一个属性，即一个全局变量，所以我们可以直接使用。
console.log(document.nodeName); // #document
console.log(document.nodeType); // 9
console.log(document.nodeValue); // null
事件
事件是文档或浏览器窗口发生的一些特定的交互瞬间，JS和HTML之间的交互是通过事件实现的。
var btn = document.getElementById('test-btn');
console.log(btn); //
/* 给onclick事件绑定处理函数 */
btn.onclick = function() {
console.log('test button onclick');
};
浏览器在加载页面时，按照自上而下的顺序，读一行运行一行，所以我们需要将