第二十九课:选择元素
学习目标
在本课中,我们将专注于以下目标:
- 学习如何使用
document.getElementById
选择具有特定ID的DOM元素。 - 掌握使用
document.getElementsByTagName
选择具有特定标签的一组元素。 - 了解如何使用
document.getElementsByClassName
选择具有特定类的一组元素。 - 学习现代选择器
document.querySelector
和document.querySelectorAll
的使用,以更灵活地选择元素。 - 学会获取和修改DOM元素的样式和属性。
学习内容
1. 使用document.getElementById
这个方法可以通过ID选择一个特定的元素。每个ID在页面上应该是唯一的。
代码示例:
<div id="uniqueElement">Hello, World!</div>
<script>
var elementById = document.getElementById('uniqueElement');
console.log(elementById.textContent); // 预计输出:"Hello, World!"
</script>
2. 使用document.getElementsByTagName
这个方法返回一个HTMLCollection,包含文档中所有具有指定标签名的元素。
代码示例:
<p>第一个段落。</p>
<p>第二个段落。</p>
<script>
var elementsByTagName = document.getElementsByTagName('p');
console.log(elementsByTagName.length); // 预计输出:2
</script>
3. 使用document.getElementsByClassName
这个方法返回一个HTMLCollection,包含文档中所有具有指定类名的元素。
代码示例:
<div class="myClass">类选择器一</div>
<div class="myClass">类选择器二</div>
<script>
var elementsByClassName = document.getElementsByClassName('myClass');
console.log(elementsByClassName.length); // 预计输出:2
</script>
4. 使用document.querySelector
和document.querySelectorAll
querySelector
返回文档中匹配指定CSS选择器的第一个元素。而querySelectorAll
返回所有匹配的元素的一个NodeList。
代码示例:
<div class="myClass">类选择器一</div>
<div class="myClass">类选择器二</div>
<script>
var elementQuerySelector = document.querySelector('.myClass');
console.log(elementQuerySelector.textContent); // 预计输出:"类选择器一"
var elementsQuerySelectorAll = document.querySelectorAll('.myClass');
console.log(elementsQuerySelectorAll.length); // 预计输出:2
</script>
课后练习
- 创建一个HTML页面,添加几个具有不同ID、类名和标签名的元素。
- 使用本节学到的每个选择器方法,尝试选择页面上的元素,并通过
console.log
输出它们的textContent
。 - 修改一个元素的样式属性,比如颜色,然后在页面上查看效果。
- 尝试更改一个元素的属性,例如添加一个
title
属性,并验证它是否按预期工作。
练习解析:
- 使用
getElementById
找到特定ID的元素,检查是否正确选择了元素。 - 使用
getElementsByTagName
和getElementsByClassName
检查是否选择了一组正确的元素,并理解它们之间的差异。 - 通过
querySelector
和querySelectorAll
了解如何使用CSS选择器来选择元素。 - 通过更改样式和属性,理解DOM操作对页面的实际影响。
这些练习的目的是让你熟悉DOM选择和操作,理解它们如何影响页面的内容和外观。通过实践,你将更好地理解选择器的使用场景和潜在陷阱。