目录
一、DOM简介
1.1 什么是DOM
文档类型对象,是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口
W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变页面内容、结构和样式
1.2 DOM树
- 文档:一个页面就是一个文档,DOM中使用document表示
- 元素:页面中的所有标签都是元素,DOM中使用element表示
- 节点:页面中的所有内容都是节点(标签、属性、文本、注释等),DOM中用node表示
DOM把以上内容都看作是对象
二、获取元素
2.1 如何获取页面元素
DOM在我们实际开发中主要用来操作元素
获取页面中元素可以使用以下方式:
- 根据ID获取
- 根据标签名获取
- 通过HTML5新方法获取
- 特殊元素获取
2.2 根据ID获取
使用getElementById()方法可以获取带有ID的元素对象
语法:
var element = document.getElementById(id);
案例练习
<div id="time">2022-2-14</div>
<!-- 1. 因为文档页面由上到下加载,所以先得有标签 所以script写道标签的下面 -->
<script>
// 2.get:获取;element:元素;
// 3.id区分大小写
// 4.返回的元素是一个对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 5. console.dir 打印我们返回的元素对象,更好的查看里面的属性和方法
console.dir(timer);
</script>
2.3 根据标签名获取
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合
Document.getElementsByTagName() - Web API 接口参考 | MDN (mozilla.org)
语法:
var elements = document.getElementsByTagName(name);
案例练习
<ul>
<li>莫愁前路无知己1</li>
<li>莫愁前路无知己2</li>
<li>莫愁前路无知己3</li>
<li>莫愁前路无知己4</li>
<li>莫愁前路无知己5</li>
</ul>
<script>
// 1. 返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2. 依次打印里面的元素,可采取遍历的方式
for (var i = 0; i < lis.length; i++){
console.log(lis[i]);
}
// 3.如果页面中只有一个li 返回的还是伪数组的形式
// 4.如果页面中没有这个元素返回的是空的伪数组的形式
</script>
注意:
- 因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历
- 得到的元素对象是动态的
可以获取某个元素(父元素)内部所指定签名的子元素
element.getElementsByTagName('标签')
注意:父元素必须是单个对象(必须指明是哪一个元素对象),获取的时候不包括父元素自己
2.4 通过HTML5新增的方法获取
document.getElementsByClassName('类名'); // 1. 根据类名返回元素对象集合
document.querySelector('选择器'); // 2. 根据指定选择器返回第一个元素对象 里面的选择器需要加对应的符号如'.'或'#'
document.querySelectorAll('选择器'); //根据指定选择器返回所有元素对象集合
2.5 获取特数元素(body,html)
document.body // 1. 返回body元素
document.documentElement // 2. 返回html元素
三、事件基础
3.1 事件概述
事件是由三部分组成:事件源、事件类型、事件处理程序
- 事件源:事件被出发的对象,例如 按钮
- 事件类型:如何促发 什么事件,例如 鼠标点击(onclick)
- 事件处理程序:通过一个函数赋值的方式 完成
3.2 执行事件的步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采取函数赋值形式)
案例练习
<div>123</div>
<script>
// 执行步骤
// 点击div 控制台输出 被选中
// 1. 获取事件源
var div = document.querySelector('div');
// 2. 绑定事件 注册事件
// div.onclick
// 3. 添加事件处理程序
div.onclick = function(){
console.log('被选中');
}
</script>
3.3 常见的鼠标事件
鼠标事件 | 触发条件 |
onclick | 鼠标点击左键触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标离开触发 |
onfocus | 获取鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |