从0开始学前端 第二十九课：选择元素

第二十九课：选择元素

学习目标

在本课中，我们将专注于以下目标：

1. 学习如何使用document.getElementById选择具有特定ID的DOM元素。
2. 掌握使用document.getElementsByTagName选择具有特定标签的一组元素。
3. 了解如何使用document.getElementsByClassName选择具有特定类的一组元素。
4. 学习现代选择器document.querySelector和document.querySelectorAll的使用，以更灵活地选择元素。
5. 学会获取和修改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>

课后练习

1. 创建一个HTML页面，添加几个具有不同ID、类名和标签名的元素。
2. 使用本节学到的每个选择器方法，尝试选择页面上的元素，并通过console.log输出它们的textContent。
3. 修改一个元素的样式属性，比如颜色，然后在页面上查看效果。
4. 尝试更改一个元素的属性，例如添加一个title属性，并验证它是否按预期工作。

练习解析:

1. 使用getElementById找到特定ID的元素，检查是否正确选择了元素。
2. 使用getElementsByTagName和getElementsByClassName检查是否选择了一组正确的元素，并理解它们之间的差异。
3. 通过querySelector和querySelectorAll了解如何使用CSS选择器来选择元素。
4. 通过更改样式和属性，理解DOM操作对页面的实际影响。

这些练习的目的是让你熟悉DOM选择和操作，理解它们如何影响页面的内容和外观。通过实践，你将更好地理解选择器的使用场景和潜在陷阱。

---

章节目录
第三十课：元素的样式与属性