本文详细介绍了DOM（文档对象模型）的概念及其树状结构，解释了HTML文档如何被解析为内存中的节点树。文中重点讲解了多种获取页面元素的方法，包括通过ID、类名、标签名及CSS选择器来定位和操作元素，帮助开发者更高效地进行网页开发与交互设计。
知识讲解
什么是DOM
DOM（Document Object Model），称为文档对象模型，是W3C组织推荐的处理HTML／XML的标准编程接口。它是一种与平台和语言无关的应用程序接口(API)。
DOM是一种基于树的API文档，提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。，它要求在处理过程中整个文档都表示在存储器中。
DOM的结构
DOM将对应的文档解析成内存中缓存的树结构。
1）树的节点类型包括元素、属性、文本
2）树只有一个唯一的根节点，即HTML元素，所有其他的节点都是根节点的后代
3）元素节点与元素节点之间有层次和相邻关系
3）属性节点和文本节点都依附于元素节点。
元素获取
常用方法
1、通过Id获取元素
根据元素的 id 属性值获取文档中第一个符合条件的元素对象
语法
document.getElementById(元素的ID);
示例
获取id名为li1的元素
<ul>
<li id="li1">列表1</li>
<li id="li2">列表2</li>
</ul>
<script>
let li = document.getElementById('li1');
console.log(li); //<li id="li1">列表1</li>
</script>
2、通过类名获取元素
通过元素的class属性值获取文档或当前元素下的所有符合条件的元素集合
语法
(document | element).getElementsByClassName(类名);
示例
获取网页中所有类名为cla1的元素
<div>
<a href="#" class="cla1">链接</a>
</div>
<ul>
<li class="cla1">列表1</li>
<li>列表2</li>
</ul>
<script>
let eles = document.getElementsByClassName('cla1');
console.log(eles); //<a href="#" class="cla1">链接</a><li class="cla1">列表1</li>
</script>
获取ul下的所有类名为cla1的元素
<div>
<a href="#" class="cla1">链接</a>
</div>
<ul id="ul1">
<li class="cla1">列表1</li>
<li>列表2</li>
</ul>
<script>
let li = document.getElementById('ul1');
let eles = li.getElementsByClassName('cla1');
console.log(eles); //<li class="cla1">列表1</li>
</script>
通过下标可以获取元素集合中的元素，下标从0开始
语法
let 元素 = 元素集合[下标];
示例
获取网页中类名为cla1的第2个元素
<div>
<a href="#" class="cla1">链接</a>
</div>
<ul>
<li class="cla1">列表1</li>
<li>列表2</li>
</ul>
<script>
let eles = document.getElementsByClassName('cla1');
let el = eles[1]; //获取第二个类名cla1的元素
console.log(el); //<li class="cla1">列表1</li>
</script>
3、通过标签名获取元素
通过元素的标签名称获取文档或当前元素下的所有符合条件的元素集合
语法
(document | element).getElementsByTagName(标签名);
示例
获取文档中所有的a标签
<div>
<a href="#">链接1</a>
</div>
<ul>
<li><a href="#">链接2</a></li>
</ul>
<script>
let eles = document.getElementsByTagName('a');
console.log(eles); // <a href="#">链接1</a> <a href="#">链接2</a>
</script>
获取div下的所有a标签
<div>
<a href="#">链接1</a>
</div>
<ul>
<li><a href="#">链接2</a></li>
</ul>
<script>
let divs = document.getElementsByTagName('div');
let div = divs[0]; //获取第一个div元素
let eles = div.getElementsByTagName('a');
console.log(eles); // <a href="#">链接1</a>
</script>
4、根据name属性值获取元素
根据元素的name属性的值获取文档中所有符合条件的元素集合。在HTML中并不是所有元素都有name属性，有name属性的元素主要表单元素，即input、select、form标签
语法
let eles = document.getElementsByName(name属性值);
示例
获取名称为sex的所有元素
<form>
<input type="text" name="userName">
<input type="radio" name="sex" value="男">
<input type="radio" name="sex" value="女">
</form>
<script>
let eles = document.getElementsByName('sex');
console.log(eles); //<input type="radio" name="sex" value="男"> <input type="radio" name="sex" value="女">
</script>
通用方法
1、通过样式选择器获取文档或当前元素下第一个符合条件的元素
(document | element).querySelector( selector );
其中
- document为文档对象，element是祖先元素。
- “selector”为css选择器，此方法通过指定的选择器返回文档或是祖先元素中符合选择器筛选条件的第一个后代元素。
1）通过id选择器获得id为“demo”的a标签元素
HTML标签
<div>
<a href="#" >链接一</a>
<a href="#" id="demo">链接二</a>
<a href="#">链接三</a>
<a href="#" class="link4">链接四</a>
<a href="#">链接五</a>
<div>
<script type="text/javascript">
let tag_a = document.querySelector("#demo");
console.log(tag_a);
</script>
运行后在控制台输出获取到的元素
2）通过类选择器获取类名为“link4”的a标签元素
let tag_a = document.querySelector(".link4");
console.log(tag_a);
运行后在控制台输出获取到的元素
3）通过并集选择器获取第3个a标签元素
let tag_a = document.querySelector("a:nth-child(3)");
console.log(tag_a);
运行后在控制台输出获取到的元素
4）通过标签选择器获取元素，可以发现当选择器的筛选结果为多个元素时，只会返回第一个符合筛选条件的元素
let tag_a = document.querySelector("a");
console.log(tag_a);
运行后在控制台输出获取到的元素
4）通过类样式获取当前元素下的元素
获取div下的第一个a标签
let div = document.querySelector('div');
let a = div.querySelector('a');
console.log(a); //
2、通过样式选择器获取文档或当前元素下所有符合条件的元素
(document | element).querySelectorAll(选择器);
获取div下所有的a标签
let div = document.querySelector('div');
let a_tags = div.querySelectorAll('a');
console.log(a_tags); //
实验实训
- 使用JavaScript获取和操作DOM元素的各种方法。
- 理解如何通过JavaScript修改元素的样式属性和类。
- 掌握CSS类的应用，动态控制网页元素的展示和隐藏效果。 获取元素并实现动态样式调整与交互效果：例如修改字体颜色、修改字体大小、添加下划线、修改链接颜色、隐藏、
原效果源代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM元素获取实例</title>
<style>
.highlight {
background-color: yellow; /* 高亮背景 */
}
.hidden {
display: none; /* 隐藏元素 */
}
</style>
</head>
<body>
<h1 id="main-title">DOM元素获取示例</h1>
<div class="container">
<p class="text">这是一个段落。</p>
<a href="#" class="link" id="link1">链接1</a>
<a href="#" class="link" id="link2">链接2</a>
</div>
<ul id="item-list">
<li class="item">项目1</li>
<li class="item">项目2</li>
<li class="item">项目3</li>
</ul>
<form id="user-form">
<input type="text" name="username" placeholder="用户名">
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
<button type="button" id="btn">提交</button>
</form>
</body>
</html>
通过JS事件实现如下效果
要求如下：点击提交按钮实现如下：
- “DOM元素获取示例”字变成红色显示
- 链接1和链接2变成绿色
- 项目1~项目3整个加层背景颜色
- 用户名获取焦点
- 性别默认显示男
