JavaScript 访问和修改内容的不同类型的DOM

文档对象模型 （DOM）使开发人员能够使用脚本语言（如JavaScript）访问和控制网页元素，它是Web开发的关键部分。有多种DOM类型可以通过JavaScript访问和修改。本文将介绍JavaScript提供的各种DOM类型、它们的功能以及它们在Web开发中的应用。DOM以树形结构显示HTML或XML文档，每个节点表示一个文档的元素、属性或文本内容。文档节点位于节点的层次结构组织的根部，其他节点充当其子节点。此外，DOM提供了用于获取和更改节点属性和内容的应用程序编程接口（API）。

要使用DOM访问和修改网页内容，可以使用以下一个或多个方法：

getElementById： 此方法用于通过其唯一ID属性访问文档中的元素。
getElementsByTagName： 此方法用于通过其标记名称访问文档中的一组元素。
getElementsByClassName： 此方法用于通过其类名访问文档中的一组元素。

方法1：使用 getElementById： 在此方法中，我们使用getElementById方法通过其唯一ID属性访问标题元素，并将其innerHTML属性从 “Hello Geek”更改为“Welcome to GFG”。

示例：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>getElementById Example</title> 
</head> 
  
<body> 
    <h1 id="header">Hello Geek</h1> 
    <p> 
        Click the button to change 
        the text of the header: 
    </p> 
    <button onclick="changeText()"> 
        Change Text 
    </button> 
</body> 
  
<script> 
    function changeText() { 
        document.getElementById("header") 
            .innerHTML = "Welcome to GFG"; 
    } 
</script> 
  
</html>

输出：

JavaScript 访问和修改内容的不同类型的DOM

方法2： 在这个方法中，我们使用了 getElementsByTagName 方法来访问文档中的所有p元素，并将它们的innerHTML属性从“Hello GFG User”更改为“Hello Geek”。

示例：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        getElementsByTagName Example 
    </title> 
</head> 
  
<body> 
    <h1>Hello GFG User</h1> 
  
    <button onclick="changeText()"> 
        Change Text 
    </button> 
</body> 
  
<script> 
    function changeText() { 
        var elements = document.getElementsByTagName("h1"); 
  
        for (var i = 0; i < elements.length; i++) { 
            elements[i].innerHTML = "Hello Geek"; 
        } 
    } 
</script> 
  
</html>

输出：

JavaScript 访问和修改内容的不同类型的DOM

方法3： 在这种方法中，我们将使用 getElementsByClassName 方法来访问文档中所有具有类名“text”的元素，并将它们的innerHTML属性从“Hello Geek”更改为“Hello Learner”。

例子： 使用getElementsByClassName更改元素的文本。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        getElementsByClassName Example 
    </title> 
</head> 
  
<body> 
    <h2 class="header"> 
        Hello World !... 
    </h2> 
    <h1 class="text"> 
        Hello Geek 
    </h1> 
    <button onclick="changeText()"> 
        Change Text 
    </button> 
</body> 
  
<script> 
    function changeText() { 
        var elements = document.getElementsByClassName("text"); 
        for (var i = 0; i < elements.length; i++) { 
            elements[i].innerHTML = "Hello Learner"; 
        } 
    } 
</script> 
  
</html>

输出:

JavaScript 访问和修改内容的不同类型的DOM

总之，文档对象模型（DOM）是JavaScript的一个强大组成部分，使程序员能够动态访问和修改网页内容。可以使用多种方法访问和修改DOM元素，包括getElementById、getElementsByTagName和getElementsByClassName，每种方法都有其独特的优势和用例。通过有效利用DOM方法，我们可以构建动态、交互式的Web应用程序。