学习目标
了解DOM的基本概念,以及实现在JavaScript中的作用
学习内容
- 什么是DOM
- 用DOM获取页面中的元素
- 事件基础
- 操作元素
一、什么是DOM
文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言(HTML 或者XML)的标准编程接口。
W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。
- 文档:一个页面就是一个文档,DOM 中使用 document 表示
- 元素:页面中的所有标签都是元素,DOM 中使用 element 表示
- 节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM 中使用 node 表示
二、用DOM获取页面中的元素
1.根据ID获取 getElementById()
document.getElementById('id')
2.根据标签名获取 getElementsByTagName()
document.getElementsByTagName('标签名')
注意:
① 因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历。
② 得到元素对象是动态的
3.通过HTML5新增的方法获取
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
document.getElementsByClassName(‘类名’);// 根据类名返回元素对象集合
document.querySelectorAll('选择器'); // 根据指定选择器返回
4.获取特殊元素(body、html)
document.body // 返回body元素对象
document.html // 返回html元素对象
三、事件基础
1.事件三要素
事件源、事件类型、事件处理程序
2.常见的鼠标事件
鼠标事件 | 触发条件 |
---|---|
onclick | 鼠标点击左键触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标经离开触发 |
onfocus | 获得鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
omouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |
四、操作元素
1.改变元素内容
element.innerText
从起始位置到终止位置的内容, 但它去除 html 标签, 同时空格和换行也会去掉
element.innerHTML
起始位置到终止位置的全部内容,包括 html 标签,同时保留空格和换行
2.常用元素属性操作
① innerText、innerHTML 改变元素内容
② src、href
③ id、alt、title
3.表单元素的属性操作
利用DOM操作如下表单属性:
type、value、checked、selected、disabled
4.样式属性操作
通过 JS 修改元素的大小、颜色、位置等样式
element.style //行内样式操作
element.className //类名样式操作