使用 JavaScript 访问 HTML 元素的不同方法

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

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

• 通过 Id 获取 HTML 元素
• 通过 className 获取 HTML 元素
• 按名称获取 HTML 元素
• 通过 tagName 获取 HTML 元素
• 通过 CSS 选择器获取 HTML 元素

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

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

句法：

document.getElementById(element_ID);

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

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

示例：此示例演示 getElementsById 方法的使用。此外，它将返回对象的内部 HTML 打印到浏览器的控制台中。用户可以通过按ctrl + shift + I打开控制台进入 chrome web 浏览器。

HTML

  

    DOM getElementById() Method

  

  
    
    
        GeeksforGeeks
    
      
      
DOM getElementById() Method
  
      
    
  
        // Accessing the element by getElementById method
        var temp = document.getElementById("Geeksforgeeks");
          
        console.log(temp);
        console.log(temp.innerHTML);
    

  

输出：

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

句法：

document.getElementsByClassName(element_classnames);

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

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

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

HTML

  

    DOM getElementsByClassName() Method

  

  
    
    GeeksforGeeks sample 1
    GeeksforGeeks sample 2
    GeeksforGeeks sample 3
  
      
DOM getElementsByclassName() Method
  
      
    
      
        // Accessing the element by getElementsByclassName method
        var temp = document.getElementsByClassName("GeeksforGeeks");
        console.log(temp[0]);
        console.log(temp[1]);
        console.log(temp[2]);
    

  

输出：

示例 2：如果特定元素包含多个类，用户可以通过将空格分隔的类名称作为方法的参数传递来访问它。用户可以通过按ctrl + shift + I打开控制台进入 chrome web 浏览器。

HTML

  

    DOM getElementByClassName() Method

  

  
    
    GeeksforGeeks sample 1
    GeeksforGeeks sample 2
    GeeksforGeeks sample 3
  
      
DOM getElementsByclassName() Method
  
      
    
      
        // Accessing the element by getElementsByclassName
        // method with multiple class
        var temp = document.getElementsByClassName(
                "GeeksforGeeks geeks");
                  
        console.log(temp[0]);
    

  

输出：

按名称获取 HTML 元素：在 javascript 中， getElementsByName() 方法对于使用名称访问 HTML 元素很有用。在这里，名称暗示了 HTML 元素的名称属性。此方法返回包含特定名称的 HTML 元素的集合。用户可以使用内置的长度方法获取集合的长度。

句法：

document.getElementsByName(element_name);

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

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

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

HTML

  

    DOM getElementByName() Method

  

  
    
    GeeksforGeeks sample 1
    GeeksforGeeks sample 2
    GeeksforGeeks sample 3
  
      
DOM getElementsByName() Method
  
      
    
      
        // Accessing the element by getElementsByName method
        var temp = document.getElementsByName("GeeksforGeeks");
        console.log(temp[0]);
        console.log(temp[1]);
        console.log(temp[2]);
    

  

输出：

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

句法：

document.getElementsByTagName(Tag_name);

参数：它需要一个参数，即标签名称。

返回值：它返回包含作为参数传递的标签的元素的集合。

示例：此示例演示 getElementsByTagName 方法的使用。它将带有特定标签的每个元素打印到控制台中。用户可以通过按ctrl + shift + I打开控制台进入 chrome web 浏览器。

HTML

  

    DOM getElementByTagName() Method

  

  
    
    GeeksforGeeks sample 1
    GeeksforGeeks sample 2
    GeeksforGeeks sample 3
  
      
DOM getElementsByTagName() Method
  
      
    
      
        // Accessing the element by 
        // getElementsByTagName method
        var temp = document.getElementsByTagName("h1");
        console.log(temp[0]);
        console.log(temp[1]);
        console.log(temp[2]);
    

  

输出：

通过 CSS 选择器获取 HTML 元素：用户可以使用不同的 CSS 选择器（例如类、id 和标签名称）一次选择 HTML 元素。可以通过两种方式使用 CSS 选择器检索 HTML 元素。查询选择器（） 方法返回匹配特定 CSS 选择器的第一个元素。 querySelectorAll()方法返回与特定 CSS 选择器匹配的所有元素。

要使用 id/class 作为参数，用户必须添加 ' # '/' 。 '在它前面签名。用户可以直接将标签名称传递给上述两种方法。用户在传递多个 CSS 选择器作为参数时，不需要分离 CSS 选择器。

句法：

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

parameter：作为参数，接受class、tag name、id等不同的CSS选择器。

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

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

HTML

  

    DOM querySelector() Method

  

  
    
    GeeksforGeeks sample 1
    GeeksforGeeks sample 2
    GeeksforGeeks sample 3
  
  
    
  
        // Accessing the element by class name 
        // using querySelector
        var 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);
    

  

输出：

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

HTML

  

    DOM querySelectorAll() Method

  

  
    
    GeeksforGeeks sample 1
    GeeksforGeeks sample 2
    GeeksforGeeks sample 3
  
    GeeksforGeeks sample 4
  
  
    
      
        // Accessing the element by class name, id and
        // tag name using querySelectorAll
        var 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]);
    

  

输出：