JavaScript常用DOM API研究01_Document_三种getElemenet_两种querySelector

JavaScript常用DOM API研究01：Document的三种getElement方法与两种querySelector方法

在Web开发中，操作DOM（文档对象模型）是前端开发者的日常工作之一。JavaScript提供了丰富的API来访问和操作DOM元素，其中最常用的就是Document对象的方法。本篇文章将深入研究Document对象中的三种getElement方法和两种querySelector方法，分别是：

• getElementById()
• getElementsByClassName()
• getElementsByTagName()
• querySelector()
• querySelectorAll()

特别是，我们将详细介绍querySelector(selector)方法中参数selector的使用方法，包括各种CSS选择器的用法。

---

一、Document对象简介

1. 什么是Document对象？

Document对象是浏览器中表示整个HTML文档的对象，是DOM树的根节点。通过document关键字，我们可以访问整个网页的DOM结构，获取或修改网页内容。

2. 为什么需要操作Document对象？

操作Document对象可以让我们：

• 获取DOM元素，方便进行操作和修改。
• 动态地添加、删除或修改元素，实现交互效果。
• 绑定事件，响应用户的操作。

---

二、三种getElement方法

Document对象提供了三种以getElement开头的方法，用于获取DOM元素：

1. getElementById(id)
2. getElementsByClassName(className)
3. getElementsByTagName(tagName)

1. getElementById(id)

1.1 定义

getElementById()方法返回对拥有指定id属性的第一个对象的引用。

1.2 语法

const element = document.getElementById(id);

• id：要查找的元素的id属性值。

1.3 返回值

• 返回具有指定id的元素对象，如果不存在则返回null。

1.4 示例

HTML代码：

<div id="content">Hello World!</div>

JavaScript代码：

const contentDiv = document.getElementById('content');
console.log(contentDiv.innerText); // 输出 "Hello World!"

1.5 注意事项

• id在HTML文档中应该是唯一的，getElementById()只返回匹配的第一个元素。
• 如果文档中存在多个相同的id（虽然这是不合法的），getElementById()仍然只返回第一个匹配的元素。

2. getElementsByClassName(className)

2.1 定义

getElementsByClassName()方法返回包含匹配指定类名的所有元素的实时HTMLCollection集合。

2.2 语法

const elements = document.getElementsByClassName(className);

• className：要匹配的类名，可以是单个类名或多个类名（用空格分隔）。

2.3 返回值

• 一个HTMLCollection对象，包含了所有匹配的元素。

2.4 示例

HTML代码：

<div class="item">Item 1</div>
<div class="item highlight">Item 2</div>
<div class="highlight">Item 3</div>

JavaScript代码：

const items = document.getElementsByClassName('item');
console.log(items.length); // 输出 2

const highlights = document.getElementsByClassName('highlight');
console.log(highlights.length); // 输出 2

const combined = document.getElementsByClassName('item highlight');
console.log(combined.length); // 输出 1
console.log(combined[0].innerText); // 输出 "Item 2"

2.5 注意事项

• 返回的HTMLCollection是实时的，DOM的变化会实时反映在集合中。
• 类名匹配是严格的，如果指定多个类名，需要元素同时包含所有指定的类名。
• 类名的顺序不重要，例如，'item highlight'和'highlight item'效果相同。

3. getElementsByTagName(tagName)

3.1 定义

getElementsByTagName()方法返回包含指定标签名的所有元素的实时HTMLCollection集合。

3.2 语法

const elements = document.getElementsByTagName(tagName);

• tagName：要匹配的标签名，区分大小写（在XML文档中），在HTML文档中不区分大小写。

3.3 返回值

• 一个HTMLCollection对象，包含了所有匹配的元素。

3.4 示例

HTML代码：

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

JavaScript代码：

const listItems = document.getElementsByTagName('li');
console.log(listItems.length); // 输出 3

3.5 注意事项

• 返回的HTMLCollection是实时的，DOM的变化会实时反映在集合中。
• 可以使用通配符'*'来匹配所有元素。

---

三、两种querySelector方法

Document对象提供了两种querySelector方法，支持使用CSS选择器来查找元素：

1. querySelector(selector)
2. querySelectorAll(selector)

1. querySelector(selector)

1.1 定义

querySelector()方法返回文档中与指定的CSS选择器匹配的第一个元素。

1.2 语法

const element = document.querySelector(selector);

• selector：一个字符串，包含一个或多个CSS选择器，用于匹配元素。

1.3 返回值

• 匹配的第一个元素对象，如果没有匹配的元素，则返回null。

1.4 示例

HTML代码：

<div class="container">
  <p id="para1">Paragraph 1</p>
  <p class="text">Paragraph 2</p>
  <span>Span Text</span>
</div>

JavaScript代码：

const para = document.querySelector('#para1');
console.log(para.innerText); // 输出 "Paragraph 1"

const textPara = document.querySelector('.text');
console.log(textPara.innerText); // 输出 "Paragraph 2"

const span = document.querySelector('div.container > span');
console.log(span.innerText); // 输出 "Span Text"

1.5 详细说明selector参数

selector参数可以是任何有效的CSS选择器，支持以下类型：

• 类型选择器：div、p、span 等。
• 类选择器：.className。
• ID选择器：#idName。
• 属性选择器：[attribute]、[attribute=value]。
• 伪类选择器：:first-child、:last-of-type 等。
• 组合选择器：组合多个选择器，例如div > p、ul li、a[href^="https"]。

1.5.1 类型选择器

选择所有指定类型的元素。

const paragraphs = document.querySelector('p'); // 获取第一个<p>元素

1.5.2 类选择器

选择所有具有指定类名的元素。

const item = document.querySelector('.item'); // 获取第一个具有类名"item"的元素

1.5.3 ID选择器

选择具有指定ID的元素。

const header = document.querySelector('#header'); // 获取ID为"header"的元素

1.5.4 属性选择器

根据元素的属性进行选择。

• [attribute]：具有指定属性的元素。

  const inputs = document.querySelector('[type]'); // 获取第一个具有"type"属性的元素
  

• [attribute=value]：属性等于指定值的元素。

  const emailInput = document.querySelector('[type="email"]'); // 获取第一个type为"email"的输入元素
  

• [attribute^=value]：属性以指定值开头的元素。

  const httpsLinks = document.querySelector('a[href^="https"]'); // 获取第一个href以"https"开头的链接
  

• [attribute$=value]：属性以指定值结尾的元素。

  const pngImages = document.querySelector('img[src$=".png"]'); // 获取第一个以".png"结尾的图片
  

• [attribute*=value]：属性包含指定值的元素。

  const iconElements = document.querySelector('[class*="icon"]'); // 获取第一个类名包含"icon"的元素
  

1.5.5 伪类选择器

选择特定状态的元素。

• :first-child：选择父元素的第一个子元素。

  const firstItem = document.querySelector('li:first-child'); // 获取第一个<li>元素
  

• :last-child：选择父元素的最后一个子元素。

  const lastItem = document.querySelector('li:last-child'); // 获取最后一个<li>元素
  

• :nth-child(n)：选择父元素的第n个子元素。

  const thirdItem = document.querySelector('li:nth-child(3)'); // 获取第三个<li>元素
  

• :hover、:active 等伪类在querySelector中无效，因为它们是动态状态。

1.5.6 组合选择器

组合多个选择器进行精确匹配。

• 后代选择器（空格）：选择某元素内部的所有匹配元素。

  const listItem = document.querySelector('ul li'); // 获取第一个<ul>中的<li>元素
  

• 子元素选择器（>）：选择某元素的直接子元素。

  const directChild = document.querySelector('div > p'); // 获取第一个<div>的直接子元素<p>
  

• 相邻兄弟选择器（+）：选择某元素之后的第一个兄弟元素。

  const nextElement = document.querySelector('h2 + p'); // 获取紧跟在<h2>之后的第一个<p>
  

• 通用兄弟选择器（~）：选择某元素之后的所有兄弟元素。

  const siblings = document.querySelector('h2 ~ p'); // 获取<h2>之后的所有<p>
  

• 并集选择器（,）：选择所有匹配的元素。

  const elements = document.querySelector('h1, h2, h3'); // 获取第一个<h1>、<h2>或<h3>元素
  

1.5.7 示例综合应用

HTML代码：

<ul class="menu">
  <li class="item">Home</li>
  <li class="item active">About</li>
  <li class="item">Contact</li>
</ul>

JavaScript代码：

// 获取class为"item active"的<li>元素
const activeItem = document.querySelector('ul.menu li.item.active');
console.log(activeItem.innerText); // 输出 "About"

// 获取class为"item"的第二个<li>元素
const secondItem = document.querySelector('ul.menu li.item:nth-child(2)');
console.log(secondItem.innerText); // 输出 "About"

1.6 注意事项

• querySelector()只返回匹配的第一个元素，如果需要获取所有匹配的元素，应该使用querySelectorAll()。
• 如果selector无效，会抛出SyntaxError异常，需要确保选择器的语法正确。

2. querySelectorAll(selector)

2.1 定义

querySelectorAll()方法返回文档中与指定的CSS选择器匹配的所有元素的静态NodeList集合。

2.2 语法

const nodeList = document.querySelectorAll(selector);

• selector：一个字符串，包含一个或多个CSS选择器，用于匹配元素。

2.3 返回值

• 一个NodeList对象，包含所有匹配的元素。

2.4 示例

HTML代码：

<div class="container">
  <p class="text">Paragraph 1</p>
  <p class="text">Paragraph 2</p>
  <span class="text">Span Text</span>
</div>

JavaScript代码：

const texts = document.querySelectorAll('.text');
console.log(texts.length); // 输出 3

texts.forEach((element) => {
  console.log(element.tagName); // 输出 "P", "P", "SPAN"
});

2.5 注意事项

• 返回的NodeList是静态的，DOM的变化不会影响集合的内容。
• NodeList不是数组，但可以使用forEach()方法遍历，也可以使用Array.from()或扩展运算符将其转换为数组。

---

四、比较五种方法

方法	返回类型	是否实时更新	匹配元素数量	选择器类型
getElementById()	元素对象	N/A	第一个匹配的元素	id
getElementsByClassName()	HTMLCollection	是	所有匹配的元素	类名
getElementsByTagName()	HTMLCollection	是	所有匹配的元素	标签名
querySelector()	元素对象	N/A	第一个匹配的元素	CSS选择器
querySelectorAll()	NodeList	否	所有匹配的元素	CSS选择器

1. 选择器支持

• getElementById()：只能按id查找元素。
• getElementsByClassName()：按类名查找元素，可指定多个类名。
• getElementsByTagName()：按标签名查找元素。
• querySelector() / querySelectorAll()：支持所有CSS选择器，功能最强大。

2. 返回结果

• 单个元素：getElementById()、querySelector()返回单个元素对象。
• 集合：getElementsByClassName()、getElementsByTagName()返回实时更新的HTMLCollection；querySelectorAll()返回静态的NodeList。

---

五、实践示例

1. 获取并修改元素内容

// 修改ID为"title"的元素的文本内容
const titleElement = document.getElementById('title');
titleElement.innerText = '新标题';

// 为所有具有"class"为"item"的元素添加样式
const items = document.getElementsByClassName('item');
for (let i = 0; i < items.length; i++) {
  items[i].style.color = 'blue';
}

// 获取所有<p>标签，修改其背景色
const paragraphs = document.getElementsByTagName('p');
for (let paragraph of paragraphs) {
  paragraph.style.backgroundColor = 'lightgray';
}

2. 使用querySelectorAll()遍历元素

// 获取所有data-active="true"的元素
const activeElements = document.querySelectorAll('[data-active="true"]');
activeElements.forEach((element) => {
  element.classList.add('active');
});

3. 动态添加事件监听器

// 为所有按钮添加点击事件
const buttons = document.querySelectorAll('button');
buttons.forEach((button) => {
  button.addEventListener('click', () => {
    alert('按钮被点击');
  });
});

---

参考资料

• MDN Web Docs - Document.getElementById()
• MDN Web Docs - Document.getElementsByClassName()
• MDN Web Docs - Document.getElementsByTagName()
• MDN Web Docs - Document.querySelector()
• MDN Web Docs - Document.querySelectorAll()
• MDN Web Docs - CSS选择器
• JavaScript高级程序设计（第4版）

---