怎麼用JavaScript修改DOM節點-前端問答-PHP中文網

首頁

web前端

前端問答

怎麼用JavaScript修改DOM節點

PHPz

Apr 19, 2023 pm 02:14 PM

隨著網路應用程式的發展，JavaScript已成為不可或缺的一部分。 JavaScript可以用來修改網頁內容並實現動態效果。其中，修改DOM是非常重要的一部分，因為它是與網頁互動的關鍵。

什麼是DOM？
DOM是文檔物件模型，它是HTML文檔的樹狀結構表示。在該文件中，每個HTML元素都是節點，例如：，

，

等等。這些節點可以有子節點和屬性，如節點

可以包含子節點，它也可以擁有屬性，如 class，id 等等。 JavaScript透過操作這些節點來改變網頁的內容。

如何選擇節點？
要操作DOM，我們需要選擇節點。這可以透過多種方式來實現，主要有以下幾種方法：

透過id選擇節點

#使用document.getElementById() 方法可以根據指定的id選擇一個節點。如下所示：

var myNode = document.getElementById("myNode");

上述程式碼將選擇一個帶有id="myNode"的HTML元素。

透過class選擇節點

選擇一個或多個class屬性相同的節點，可以使用getElementsByClassName() 方法。如下所示：

var myNodes = document.getElementsByClassName("classNode");

上述程式碼將選擇所有 class 屬性等於"classNode"的HTML元素。

透過標籤名稱選擇節點

選擇所有指定標籤名稱的節點可以使用getElementsByTagName() 方法。如下所示：

var myNodes = document.getElementsByTagName("p");

上述程式碼將選擇文件中的所有

標籤。

DOM節點屬性的操作
DOM節點具有許多屬性，如：id、class、title 等等。我們可以透過JavaScript來修改或取得這些屬性的值。以下是一些常用的DOM節點屬性操作方法：

取得或設定innerHTML屬性

可以使用 getInnerHTML() 方法取得節點的innerHTML屬性。也可以使用 setInnerHTML() 方法來設定節點的innerHTML屬性。如下所示：

var myNode = document.getElementById("myNode");

// 获取节点的innerHTML属性
var myNodeInnerHTML = myNode.innerHTML;

// 设置节点的innerHTML属性
myNode.innerHTML = "新的HTML内容";

取得或設定innerText屬性

#取得innerText屬性可以用 getInnerText() 方法，設定innerText屬性可以使用 setInnerText() 方法。如下圖所示：

var myNode = document.getElementById("myNode");

// 获取节点的innerText属性
var myNodeInnerText = myNode.innerText;

// 设置节点的innerText属性
myNode.innerText = "新的文本内容";

取得或設定nodeType屬性

nodeType 屬性傳回目前節點的類型，可以使用 getNodeType() 方法取得節點的nodeType屬性。也可以使用 setNodeType() 方法來設定節點的nodeType屬性。如下圖所示：

var myNode = document.getElementById("myNode");

// 获取节点的nodeType属性
var myNodeType = myNode.nodeType;

// 设置节点的nodeType属性
myNode.nodeType = 1;

取得或設定nodeName屬性

nodeName 屬性傳回節點的名稱，可以使用getnodeName() 方法取得節點的nodeName屬性。也可以使用 setnodeName() 方法來設定節點的nodeName屬性。如下圖所示：

var myNode = document.getElementById("myNode");

// 获取节点的nodeName属性
var myNodeName = myNode.nodeName;

// 设置节点的nodeName属性
myNode.nodeName = "span";

取得或設定nodeValue屬性

#nodeValue 屬性傳回或設定節點的值。可以使用 getNodeValue() 方法來取得nodeValue屬性。要設定屬性值可以使用 setNodeValue() 方法。如下圖所示：

var myNode = document.getElementById("myNode");

// 获取节点的nodeValue属性
var myNodeValue = myNode.nodeValue;

// 设置节点的nodeValue属性
myNode.nodeValue = "新的节点内容";

取得或設定className屬性

className 屬性傳回或設定節點的類別名稱。可以使用getclassName() 方法來取得className屬性。要設定屬性值可以使用setclassName() 方法。如下圖所示：

var myNode = document.getElementById("myNode");

// 获取节点的className属性
var myClassName = myNode.className;

// 设置节点的className属性
myNode.className = "newClass";

取得或設定id屬性

id 屬性傳回或設定節點的id。可以使用getId() 方法來取得id屬性。要設定屬性值可以使用setId() 方法。如下所示：

var myNode = document.getElementById("myNode");

// 获取节点的id属性
var myId = myNode.id;

// 设置节点的id属性
myNode.id = "newNode";

DOM節點的建立和插入
除了修改DOM節點屬性外，還可以建立DOM節點並將其插入現有DOM結構中。

建立DOM節點
要建立一個DOM節點，可以使用createElement() 方法。如下所示：

// 创建一个新的 <p> 元素
var newNode = document.createElement("p");

// 设置元素的内容
newNode.innerHTML = "新的 HTML 内容";

// 将新元素添加到文档中
document.body.appendChild(newNode);</p>

插入DOM節點
有以下幾點可以插入DOM節點：

使用appendChild() 方法可以將元素新增到父節點的末尾。如下所示：

var parent = document.getElementById("parent");

// 创建新的

元素 var newNode = document.createElement("li"); // 设置元素的内容 newNode.innerHTML = "新的列表项"; // 将新元素添加到父节点的末尾 parent.appendChild(newNode);

使用insertBefore() 方法可以將一個新的節點插入到另一個節點之前。如下圖所示：

var newNode = document.createElement("li");

// 设置元素的内容
newNode.innerHTML = "新的列表项";

// 将新元素添加到 "node" 元素之前
parent.insertBefore(newNode, node);

使用 replaceChild() 方法可以取代一個節點。如下所示：

var newNode = document.createElement("li");

// 设置元素的内容
newNode.innerHTML = "新的列表项";

// 替换父节点下的第二个子节点
parent.replaceChild(newNode, parent.childNodes[1]);

DOM節點的移除

DOM節點可以透過多種方式移除。以下是一些常用的方法：

使用 removeChild() 方法可以移除一個子節點。如下所示：

var parent = document.getElementById("parent");

// 移除 "node" 元素
parent.removeChild(node);

使用 remove() 方法可以移除節點本身。如下所示：

var node = document.getElementById("node");

// 移除节点本身
node.remove();

總結

透過使用JavaScript操作DOM，可以輕鬆修改網頁內容，包括HTML標記和文字內容。我們可以選擇節點、更改節點屬性、建立和插入新元素以及刪除現有節點。這些操作使得網站可以動態地更新和回應使用者行為。

以上是怎麼用JavaScript修改DOM節點的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

React的前端開發：優勢和技術Apr 17, 2025 am 12:25 AM

React的優勢在於其靈活性和高效性，具體表現在：1)組件化設計提高了代碼重用性；2)虛擬DOM技術優化了性能，特別是在處理大量數據更新時；3)豐富的生態系統提供了大量第三方庫和工具。通過理解React的工作原理和使用示例，可以掌握其核心概念和最佳實踐，從而構建高效、可維護的用戶界面。

反應與其他框架：比較和對比選項Apr 17, 2025 am 12:23 AM

React是一個用於構建用戶界面的JavaScript庫，適用於大型和復雜的應用。 1.React的核心是組件化和虛擬DOM，提高了UI渲染性能。 2.與Vue相比，React更靈活但學習曲線較陡，適合大型項目。 3.與Angular相比，React更輕量，依賴社區生態，適用於需要靈活性的項目。

在HTML中脫神秘的React：這一切如何工作Apr 17, 2025 am 12:21 AM

React通過虛擬DOM在HTML中運作。 1)React使用JSX語法編寫類似HTML的結構。 2)虛擬DOM管理UI更新，通過Diffing算法高效渲染。 3)使用ReactDOM.render()將組件渲染到真實DOM。 4)優化和最佳實踐包括使用React.memo和組件拆分，提升性能和可維護性。

反應行動：現實應用程序的示例Apr 17, 2025 am 12:20 AM

React在電商、社交媒體和數據可視化等領域有廣泛應用。 1)電商平台使用React構建購物車組件，利用useState管理狀態，onClick處理事件，map函數渲染列表。 2)社交媒體應用通過useEffect與API交互，展示動態內容。 3)數據可視化使用react-chartjs-2庫渲染圖表，組件化設計便於嵌入應用。

帶有React的前端體系結構：最佳實踐Apr 17, 2025 am 12:10 AM

React前端架構的最佳實踐包括：1.組件設計與復用：設計單一職責、易於理解和測試的組件，實現高度復用。 2.狀態管理：使用useState、useReducer、ContextAPI或Redux/MobX管理狀態，避免過度複雜。 3.性能優化：通過React.memo、useCallback、useMemo等方法優化性能，找到平衡點。 4.代碼組織與模塊化：按功能模塊組織代碼，提高可管理性和可維護性。 5.測試與質量保證：使用Jest和ReactTestingLibrary進行測試，確保代碼質量和可靠