在 JavaScript 中，有哪些不同的 DOM 类型可用于访问和修改内容？

在本教程中，我们将学习在 JavaScript 中访问和修改内容的不同 DOM 类型。

文档对象模型 (DOM) 是构成 Web 文档结构和内容的对象的数据表示。它是用于编写 Web 页面的接口。程序可以通过利用 DOM 来更改文档的结构、样式和内容。DOM 将每个元素表示为节点，并且像 JavaScript 这样的编程语言可以轻松地与这些节点交互以修改页面。

在 JavaScript 中，有不同类型的 DOM 可用于访问和修改内容，它们是 -

  • 传统 DOM - 此模型是在早期 JavaScript 版本中引入的。所有浏览器都很好地支持它，但只能访问文档的一些基本部分，例如表单、表单组件和图片。

  • W3C DOM - 万维网联盟 (W3C) 标准化了文档对象模型，允许访问和修改任何文档元素。几乎所有当前的浏览器都支持此模型。

  • IE4 DOM - IE4 在 Microsoft 的 Internet Explorer 浏览器版本 4 中引入了文档对象的概念。IE 5 及更高版本支持大多数基本的 W3C DOM 功能。

DOM 具有许多属性和方法来执行不同的任务，例如更改元素的内容、样式等。我们将了解如何使用 W3C DOM 属性和方法来更新页面。

使用 W3C DOM 属性

示例

在下面的示例中，我们使用了 W3C DOM 属性来更改元素的内容、显示元素的 id 和显示元素的标签名称。document.getElementById() 方法用于访问 DOM 元素。我们将使用三个不同的属性：“innerHTML”、“id”和“tagName”。三个按钮用于带有点击事件以执行每个任务的单独函数，并且在这些函数中，我们使用提到的属性来修改页面。

<html>
<body>
   <h2>
      Using the <i> W3C DOM properties </i> to modify the webpage with JavaScript
   </h2>
   <button onclick="changeContent()"> Change Content </button>
   <button onclick="showID()"> Show ID </button>
   <button onclick="showTagName()"> Show Tag Name </button>
   <div 
      id="root" 
      style="
         padding: 15px;
         margin-top: 5px;
         background-color: rgb(186, 235, 182);
         border: 1px solid gray;
      "
   >
      Welcome to Tutorialspoint!
   </div>
   <script>
      
      // root element
      const root = document.getElementById('root')
      
      // 'Change Content' button click event handler function
      function changeContent() {
         
         // using innerHTML property to change the content of the root element
         root.innerHTML = 'The content is changed!'
      }
      
      // 'Show ID' button click event handler function
      function showID() {
         
         // using id property to get the id of the root element
         const id = root.id
         root.innerHTML = 'The id of the element is: ' + id
      }
      
      // 'Show Tag Name' button click event handler function
      function showTagName() {
         
         // using tagName property to get the tag name of the root element
         const tag_name = root.tagName
         root.innerHTML = 'The tag name of the element is: ' + tag_name
      }
   </script>
</body>
</html>

使用 W3C DOM 方法

示例

在下面的示例中，我们使用了 W3C DOM 方法来更改元素的背景颜色并显示元素的属性；在这种情况下，属性将是元素的类属性。document.getElementById() 方法用于访问 DOM 元素。我们将使用两种不同的方法，它们是“style.setProperty()”和“getAttribute()”。两个按钮用于带有点击事件以执行每个任务的单独函数，并且在这些函数中，我们使用提到的方法来修改页面。

<html>
<body>
   <h2>
      Using the <i> W3C DOM methods </i> to modify the webpage with JavaScript
   </h2>
   <button onclick="changeBgColor()"> Change background-color </button>
   <button onclick="showAttribute()"> Show Class Attributes </button>
   <div 
      id="root" 
      style="
         padding: 15px;
         margin-top: 5px;
         background-color: rgb(186, 235, 182);
         border: 1px solid gray;
      " 
      class="element item abc xyz"
   >
      Welcome to Tutorialspoint!
   </div>
   <script>
      
      // root element
      const root = document.getElementById('root')
      
      // 'Change background-color' button click event handler function
      function changeBgColor() {
         
         // using the style.setProperty method to change the background-color of the root element
         root.style.setProperty('background-color', '#f0f8ff')
      }
      
      // 'Show Class Attributes' button click event handler function
      function showAttribute() {
         
         // using getAttribute method to get the tag name of the root element
         const class_attributes = root.getAttribute('class')
         root.innerHTML =
            'The class attribute of the element: ' + class_attributes
      }
   </script>
</body>
</html>

在本教程中，我们学习了在 JavaScript 中访问和修改内容的不同 DOM 类型。我们学习了三种 DOM。W3C DOM 是几乎所有 Web 浏览器中使用的标准 DOM。此外，我们还使用了 W3C DOM 的不同属性和方法来修改网页。

更新于： 2022-11-15

950 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告