JavaScript 访问HTML元素的不同方式

有时候，用户需要在不更改HTML代码的情况下操作HTML元素。在这种情况下，用户可以使用JavaScript来改变HTML元素而不覆盖它们。在我们开始使用JavaScript改变HTML元素之前，用户应该学会从DOM（文档对象模型）中访问它。这里的DOM是网页的结构。

在JavaScript中，用户可以通过五种不同的方式访问DOM中的HTML元素。

通过id获取HTML元素
通过className获取HTML元素
通过Name获取HTML元素
通过tagName获取HTML元素
通过CSS选择器获取HTML元素

下面，用户可以通过示例代码看到上述方法的演示。

通过id获取HTML元素： 通常，大多数开发者在整个HTML文档中使用唯一的id。用户在访问具有id的HTML元素之前，必须为该元素添加id。用户可以使用getElementById()方法 通过id来访问HTML元素。如果通过getElementById方法传递的id不存在任何元素，它将返回null值。

语法：

document.getElementById(element_ID);

参数： 它接收用户想要访问的元素的id。

返回值： 它返回具有特定id的对象。如果找不到具有特定id的元素，则返回NULL值。

示例： 该示例演示了使用getElementsById方法的用法。它还将返回对象的内部HTML打印到浏览器的控制台上。用户可以通过按下ctrl + shift + I在Chrome Web浏览器中打开控制台。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
 
<body>
    <!-- Heading element with GeeksforGeeks id-->
    <h1 id="Geeksforgeeks">
        GeeksforGeeks
    </h1>
    <p>DOM getElementById() Method</p>
    <script>
        // Accessing the element by getElementById method
        let temp = document.getElementById("Geeksforgeeks");
 
        console.log(temp);
        console.log(temp.innerHTML);
    </script>
</body>
</html>

输出：

JavaScript 访问HTML元素的不同方式

通过className获取HTML元素：

在JavaScript中，getElementsByClassName() 方法可以通过className来访问HTML元素。开发人员可以在特定的HTML文档中多次使用单个className。当用户尝试使用className访问元素时，它将返回包含特定类的所有对象的集合。

语法：

document.getElementsByClassName(element_classnames);

参数： 它接受用户想要访问的元素的多个类名。

返回值： 它返回一个具有特定类名的对象集合。用户可以使用从0开始的索引从集合对象中获取每个元素。

示例1： 此示例演示了使用getElementsByClassName()方法的用法。它将返回的集合对象的每个元素打印到控制台中。用户可以通过按下Ctrl + Shift + I在Chrome浏览器中打开控制台。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
 
<body>
    <!-- Multiple html element with GeeksforGeeks class name -->
    <h1 class="GeeksforGeeks">GeeksforGeeks sample 1</h1>
    <h1 class="GeeksforGeeks">GeeksforGeeks sample 2</h1>
    <h1 class="GeeksforGeeks">GeeksforGeeks sample 3</h1>
 
    <p>DOM getElementsByclassName() Method</p>
    <script>
 
        // Accessing the element by getElementsByclassName method
        let temp = document.getElementsByClassName("GeeksforGeeks");
        console.log(temp[0]);
        console.log(temp[1]);
        console.log(temp[2]);
    </script>
</body>
</html>

输出：

JavaScript 访问HTML元素的不同方式

示例2： 如果一个元素包含多个类，用户可以通过将类名以空格分隔的形式作为方法的参数来访问它。用户可以在Chrome网络浏览器中按下 ctrl + shift + I 打开控制台。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
 
<body>
    <!-- Multiple html element with GeeksforGeeks class name -->
    <h1 class="GeeksforGeeks geeks">GeeksforGeeks sample 1</h1>
    <h1 class="GeeksforGeeks">GeeksforGeeks sample 2</h1>
    <h1 class="GeeksforGeeks">GeeksforGeeks sample 3</h1>
 
    <p>DOM getElementsByclassName() Method</p>
    <script>
 
        // Accessing the element by getElementsByclassName
        // method with multiple class
        let temp = document.getElementsByClassName(
            "GeeksforGeeks geeks");
 
        console.log(temp[0]);
    </script>
</body>
</html>

输出：

JavaScript 访问HTML元素的不同方式

根据名称获取HTML元素 ：：在javascript中，getElementsByName() 方法可以通过名称访问HTML元素。这里的名称指的是HTML元素的name属性。该方法返回包含特定名称的HTML元素集合。用户可以使用内置的length方法获取集合的长度。

语法：

document.getElementsByName(element_name);

参数： 它接受用户想要访问的元素的名称。

返回值： 它返回具有特定名称的元素集合。

示例： 此示例演示了使用getElementsByName方法的用法。它将具有特定名称的每个元素打印到控制台中。用户可以通过按下ctrl + shift + I在Chrome浏览器中打开控制台。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
 
<body>
    <!-- Multiple html element with GeeksforGeeks name -->
    <h1 name="GeeksforGeeks">GeeksforGeeks sample 1</h1>
    <h1 name="GeeksforGeeks">GeeksforGeeks sample 2</h1>
    <h1 name="GeeksforGeeks">GeeksforGeeks sample 3</h1>
 
    <p>DOM getElementsByName() Method</p>
    <script>
 
        // Accessing the element by getElementsByName method
        let temp = document.getElementsByName("GeeksforGeeks");
        console.log(temp[0]);
        console.log(temp[1]);
        console.log(temp[2]);
    </script>
</body>
</html>

输出结果：

JavaScript 访问HTML元素的不同方式

按标签名获取HTML元素： 在javascript中，getElementsByTagName() 方法可用于通过标签名访问HTML元素。这个方法与getElementsByName 方法相同。在这里，我们使用标记名称来访问元素，而不是使用元素的名称。

语法：

document.getElementsByTagName(Tag_name);

参数: 它接受一个参数，即标签名。

返回值: 它返回包含所传递标签的元素集合。

示例: 这个示例演示了使用getElementsByTagName方法。它将特定标签的每个元素打印到控制台中。用户可以在Chrome浏览器中按下 ctrl + shift + I 打开控制台。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
 
<body>
    <!-- Multiple html element with h1 tag -->
    <h1>GeeksforGeeks sample 1</h1>
    <h1>GeeksforGeeks sample 2</h1>
    <h1>GeeksforGeeks sample 3</h1>
 
    <p>DOM getElementsByTagName() Method</p>
 
    <script>
        // Accessing the element by 
        // getElementsByTagName method
        let temp = document.getElementsByTagName("h1");
        console.log(temp[0]);
        console.log(temp[1]);
        console.log(temp[2]);
    </script>
</body>
</html>

输出：

JavaScript 访问HTML元素的不同方式

要将id/class用作参数，用户必须在其之前添加“#”或“.”符号。用户可以直接将标签名称传递给上述两种方法。当作为参数传递多个CSS选择器时，用户不需要分隔CSS选择器。

语法：

document.querySelector(selectors);
document.querySelectorAll(selectors);

参数： 作为参数，它接受不同的CSS选择器，如类名、标签名称和ID。

返回值： querySelector()方法返回与CSS选择器匹配的第一个对象，而querySelectorAll()方法返回与CSS选择器匹配的所有对象的集合。

示例1： 这个示例演示了querySelector方法的使用。在下面的代码中，我们使用了不同的CSS选择器来访问DOM中的HTML元素。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
 
<body>
    <!-- html element with classnames and id -->
    <h1 class="gfg1" id="g1">GeeksforGeeks sample 1</h1>
    <h1 class="gfg1" id="g2">GeeksforGeeks sample 2</h1>
    <p class="gfg1">GeeksforGeeks sample 3</p>
 
    <script>
        // Accessing the element by class name 
        // using querySelector
        let temp = document.querySelector(".gfg1");
        console.log(temp);
 
        // Accessing the element by id using querySelector
        temp = document.querySelector("#g2");
        console.log(temp);
 
        // Accessing the element by class name and
        // id using querySelector
        temp = document.querySelector(".gfg1#g2");
        console.log(temp);
 
        // Accessing the element by tag name that
        // includes the particular class
        temp = document.querySelector("p.gfg1");
        console.log(temp);
    </script>
</body>
</html>

输出:

JavaScript 访问HTML元素的不同方式

示例2： 此示例演示了使用querySelectorAll方法。querySelectorAll()方法返回与CSS选择器匹配的所有对象的节点列表。用户可以使用从0开始的索引访问CSS节点列表的所有元素。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
 
<body>
    <!-- html element with classnames and id -->
    <h1 class="gfg1" id="g1">GeeksforGeeks sample 1</h1>
    <h1 class="gfg1" id="g2">GeeksforGeeks sample 2</h1>
    <p class="gfg1">GeeksforGeeks sample 3</p>
 
    <p class="gfg1">GeeksforGeeks sample 4</p>
 
 
    <script>
 
        // Accessing the element by class name, id and
        // tag name using querySelectorAll
        let temp = document.querySelectorAll("h1.gfg1#g2");
        console.log(temp[0]);
 
        // Accessing the element by tag name using 
        // querySelectorAll
        temp = document.querySelectorAll("p");
        console.log(temp[0]);
        console.log(temp[1]);
    </script>
</body>
</html>

输出：

JavaScript 访问HTML元素的不同方式