資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 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 的不同屬性和方法來修改網頁。
950 次瀏覽
