访问DOM元素
介绍
在Web开发中，访问DOM元素是通过JavaScript操作HTML文档的基础。DOM（文档对象模型）将HTML文档表示为节点树，JavaScript可以通过不同的方法访问这些节点，并对其进行操作。常用的访问方法包括通过ID、类名、标签名和CSS选择器。
访问DOM元素的方法及用法
1、通过ID访问元素
使用document.getElementById('id')方法，通过元素的ID获取对应的元素节点。
var element = document.getElementById('myId');2、通过类名访问元素
使用document.getElementsByClassName('className')方法，通过元素的类名获取所有匹配的元素节点，返回一个HTMLCollection。
var elements = document.getElementsByClassName('myClass');3、通过标签名访问元素
使用document.getElementsByTagName('tagName')方法，通过元素的标签名获取所有匹配的元素节点，返回一个HTMLCollection。
var elements = document.getElementsByTagName('p');4、通过CSS选择器访问元素
使用document.querySelector('selector')方法，通过CSS选择器获取第一个匹配的元素节点。
var element = document.querySelector('.myClass');使用document.querySelectorAll('selector')方法，通过CSS选择器获取所有匹配的元素节点，返回一个NodeList。
var elements = document.querySelectorAll('.myClass');演示案例
以下是一个示例，展示了如何通过不同的方法访问DOM元素。假设我们有一个简单的HTML文档，其中包含几个元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>访问DOM元素示例</title>
</head>
<body>
<h1 id="title">这是标题</h1>
<p class="content">这是第一个段落。</p>
<p class="content">这是第二个段落。</p>
<div>
<span>这是一个<span>嵌套</span>的元素。</span>
</div>
<button id="changeContent">改变内容</button>
<script>
// 通过ID访问元素
var titleElement = document.getElementById('title');
console.log(titleElement.textContent); // 输出：这是标题
// 通过类名访问元素
var contentElements = document.getElementsByClassName('content');
for (var i = 0; i < contentElements.length; i++) {
console.log(contentElements[i].textContent); // 输出：这是第一个段落。 这是第二个段落。
}
// 通过标签名访问元素
var paragraphElements = document.getElementsByTagName('p');
for (var i = 0; i < paragraphElements.length; i++) {
console.log(paragraphElements[i].textContent); // 输出：这是第一个段落。 这是第二个段落。
}
// 通过CSS选择器访问元素
var firstContentElement = document.querySelector('.content');
console.log(firstContentElement.textContent); // 输出：这是第一个段落。
// 通过CSS选择器获取所有匹配元素
var allContentElements = document.querySelectorAll('.content');
allContentElements.forEach(function(element) {
console.log(element.textContent); // 输出：这是第一个段落。 这是第二个段落。
});
// 添加事件监听器来改变内容
var buttonElement = document.getElementById('changeContent');
buttonElement.addEventListener('click', function() {
titleElement.textContent = '标题已改变';
firstContentElement.textContent = '第一个段落内容已改变';
});
</script>
</body>
</html>练习题
请完成以下练习，以巩固对DOM元素访问方法的理解：
创建一个HTML文件，包含以下内容：
一个<h2>元素，内容为“练习标题”。
两个<div>元素，类名为“box”，内容分别为“这是第一个盒子。”和“这是第二个盒子。”。
一个<button>按钮，内容为“点击我”。
使用JavaScript完成以下操作：
通过ID访问<h2>元素，并在控制台打印其内容。
通过类名访问所有<div>元素，并在控制台打印每个<div>的内容。
通过标签名访问按钮，并为其添加点击事件，当按钮被点击时，改变第一个<div>的内容为“第一个盒子内容已改变”。
参考答案：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>访问DOM元素练习</title>
</head>
<body>
<h2 id="exerciseTitle">练习标题</h2>
<div class="box">这是第一个盒子。</div>
<div class="box">这是第二个盒子。</div>
<button id="exerciseButton">点击我</button>
<script>
// 通过ID访问<h2>元素
var exerciseTitleElement = document.getElementById('exerciseTitle');
console.log(exerciseTitleElement.textContent); // 输出：练习标题
// 通过类名访问所有<div>元素
var boxElements = document.getElementsByClassName('box');
for (var i = 0; i < boxElements.length; i++) {
console.log(boxElements[i].textContent); // 输出：这是第一个盒子。 这是第二个盒子。
}
// 通过标签名访问<button>元素，并添加点击事件
var exerciseButtonElement = document.getElementById('exerciseButton');
exerciseButtonElement.addEventListener('click', function() {
boxElements[0].textContent = '第一个盒子内容已改变';
});
</script>
</body>
</html>
需要购买本课才能留言哦~