获取 HTML 元素的五种方法（包含案例、代码与效果）

获取 HTML 元素的方法有多种，每种方法各有其适用场景和特点。以下是五种常用的获取 HTML 元素的方法，配合案例和代码示例：

1. `getElementById`

概述：通过元素的唯一 id 属性获取单个元素。

代码示例：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>getElementById Example</title>  
</head>  
<body>  
    <div id="myElement">Hello, World!</div>  
    <script>  
        var element = document.getElementById("myElement");  
        console.log(element.innerText);  // 输出: Hello, World!  
    </script>  
</body>  
</html>

效果：这一方法用于获取具有特定 id 的单一 DOM 元素，操作简单且执行速度快。

2. `getElementsByClassName`

概述：根据元素的 class 名称获取所有匹配的元素。

代码示例：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>getElementsByClassName Example</title>  
</head>  
<body>  
    <div class="myClass">First Element</div>  
    <div class="myClass">Second Element</div>  
    <script>  
        var elements = document.getElementsByClassName("myClass");  
        console.log(elements.length);  // 输出: 2  
        console.log(elements[0].innerText);  // 输出: First Element  
    </script>  
</body>  
</html>

效果：返回一个类数组对象，包含所有具有指定类名的元素。

3. `getElementsByTagName`

概述：获取文档中所有特定标签名的元素。

代码示例：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>getElementsByTagName Example</title>  
</head>  
<body>  
    <p>First Paragraph</p>  
    <p>Second Paragraph</p>  
    <script>  
        var paragraphs = document.getElementsByTagName("p");  
        console.log(paragraphs.length);  // 输出: 2  
        console.log(paragraphs[1].innerText);  // 输出: Second Paragraph  
    </script>  
</body>  
</html>

效果：返回一个类数组对象，包含所有具有指定标签名的元素，例如所有 <p> 标签。

4. `querySelector`

概述：根据 CSS 选择器获取文档中的第一个匹配元素。

代码示例：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>querySelector Example</title>  
</head>  
<body>  
    <div class="container">  
        <p class="highlight">Highlighted Text</p>  
    </div>  
    <script>  
        var element = document.querySelector(".container .highlight");  
        console.log(element.innerText);  // 输出: Highlighted Text  
    </script>  
</body>  
</html>

效果：返回文档中第一个与指定选择器匹配的元素，灵活性高。

5. `querySelectorAll`

概述：根据 CSS 选择器获取文档中的所有匹配元素。

代码示例：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>querySelectorAll Example</title>  
</head>  
<body>  
    <ul>  
        <li class="item">Item 1</li>  
        <li class="item">Item 2</li>  
        <li class="item">Item 3</li>  
    </ul>  
    <script>  
        var items = document.querySelectorAll(".item");  
        console.log(items.length);  // 输出: 3  
        items.forEach(item => console.log(item.innerText));  
        // 输出: Item 1  
        // 输出: Item 2  
        // 输出: Item 3  
    </script>  
</body>  
</html>

效果：返回一个 NodeList 对象，包含所有与指定选择器匹配的元素，允许使用诸如 forEach 的迭代器进行遍历。

每种方法都有其独特的好处和适用场景，可以根据需要的精确度和可选性选择合适的操作方法。

遇到难题？ "AI大模型GPT4.0、GPT" 是你的私人解答专家！点击按钮去提问......