文章目录
1. DOM
1.1 DOM简介
文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。
W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。
1.2 DOM树
- 文档:一个页面就是一个文档,DOM 中使用 document 表示
- 元素:页面中的所有标签都是元素,DOM 中使用 element 表示
- 节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM 中使用 node 表示
DOM 把以上内容都看做是对象
2. 获取元素
2.1 经典
2.1.1 getElementById
document.getElementById('id');
2.1.2 getElementsByTagName
document.getElementsByTagName('标签名');
- 因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历。
- 得到元素对象是动态的
- 如果获取不到元素,则返回为空的伪数组(因为获取不到对象)
2.2 HTML5新增
2.2.1 getElementsByClassName
document.getElementsByClassName(‘类名’); // 根据类名返回元素对象集合
2.2.2 querySelector
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
2.2.3 querySelectorAll
document.querySelectorAll('选择器'); // 根据指定选择器返回
2.3 body&html
2.3.1 document.body
document.body; // 返回 body元素对象
2.3.2 document.documentElement
document.documentElement; // 返回 html元素对象
3. 事件基础
3.1 事件三要素
- 事件源————事件被触发的对象
- 事件类型————如何触发 什么事件(鼠标点击、经过、键盘按下)
- 事件处理程序————通过函数赋值完成
3.2 执行事件步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('你好吗');
};
3.3 常见鼠标事件
鼠标事件 | 触发条件 |
---|---|
onclick | 鼠标点击左键触发 |
onmouseover | 鼠标经过触发 |
onmoouseout | 鼠标离开触发 |
onfocus | 获得鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmousedowm | 鼠标按下触发 |
4. 操作元素
4.1 改变元素内容
- 从起始到终止位置,但它去除html标签,同时空格和换行也去掉
element.innerText
- 从起始到终止位置,包括html标签,同时保留空格和换行
element.innerHTML
4.2 改变元素属性
- innerText、innerHTML 改变元素内容
- src、href
- id、alt、title
4.3 表单元素的属性操作
- type、value、checked、selected、disabled
4.4 样式属性操作
4.4.1 element.style
element.style // 行内样式操作
4.4.2 element.className
element.className // 类名样式操作