隨著網路應用程式的發展,JavaScript已成為不可或缺的一部分。 JavaScript可以用來修改網頁內容並實現動態效果。其中,修改DOM是非常重要的一部分,因為它是與網頁互動的關鍵。
什麼是DOM?
DOM是文檔物件模型,它是HTML文檔的樹狀結構表示。在該文件中,每個HTML元素都是節點,例如:,,
等等。這些節點可以有子節點和屬性,如節點
可以包含子節點,它也可以擁有屬性,如 class,id 等等。 JavaScript透過操作這些節點來改變網頁的內容。
如何選擇節點?
要操作DOM,我們需要選擇節點。這可以透過多種方式來實現,主要有以下幾種方法:
#使用document.getElementById() 方法可以根據指定的id選擇一個節點。如下所示:
var myNode = document.getElementById("myNode");
上述程式碼將選擇一個帶有id="myNode"的HTML元素。
選擇一個或多個class屬性相同的節點,可以使用getElementsByClassName() 方法。如下所示:
var myNodes = document.getElementsByClassName("classNode");
上述程式碼將選擇所有 class 屬性等於"classNode"的HTML元素。
選擇所有指定標籤名稱的節點可以使用getElementsByTagName() 方法。如下所示:
var myNodes = document.getElementsByTagName("p");
上述程式碼將選擇文件中的所有
標籤。
DOM節點屬性的操作
DOM節點具有許多屬性,如:id、class、title 等等。我們可以透過JavaScript來修改或取得這些屬性的值。以下是一些常用的DOM節點屬性操作方法:
可以使用 getInnerHTML() 方法取得節點的innerHTML屬性。也可以使用 setInnerHTML() 方法來設定節點的innerHTML屬性。如下所示:
var myNode = document.getElementById("myNode"); // 获取节点的innerHTML属性 var myNodeInnerHTML = myNode.innerHTML; // 设置节点的innerHTML属性 myNode.innerHTML = "新的HTML内容";
#取得innerText屬性可以用 getInnerText() 方法,設定innerText屬性可以使用 setInnerText() 方法。如下圖所示:
var myNode = document.getElementById("myNode"); // 获取节点的innerText属性 var myNodeInnerText = myNode.innerText; // 设置节点的innerText属性 myNode.innerText = "新的文本内容";
nodeType 屬性傳回目前節點的類型,可以使用 getNodeType() 方法取得節點的nodeType屬性。也可以使用 setNodeType() 方法來設定節點的nodeType屬性。如下圖所示:
var myNode = document.getElementById("myNode"); // 获取节点的nodeType属性 var myNodeType = myNode.nodeType; // 设置节点的nodeType属性 myNode.nodeType = 1;
nodeName 屬性傳回節點的名稱,可以使用getnodeName() 方法取得節點的nodeName屬性。也可以使用 setnodeName() 方法來設定節點的nodeName屬性。如下圖所示:
var myNode = document.getElementById("myNode"); // 获取节点的nodeName属性 var myNodeName = myNode.nodeName; // 设置节点的nodeName属性 myNode.nodeName = "span";
#nodeValue 屬性傳回或設定節點的值。可以使用 getNodeValue() 方法來取得nodeValue屬性。要設定屬性值可以使用 setNodeValue() 方法。如下圖所示:
var myNode = document.getElementById("myNode"); // 获取节点的nodeValue属性 var myNodeValue = myNode.nodeValue; // 设置节点的nodeValue属性 myNode.nodeValue = "新的节点内容";
className 屬性傳回或設定節點的類別名稱。可以使用getclassName() 方法來取得className屬性。要設定屬性值可以使用setclassName() 方法。如下圖所示:
var myNode = document.getElementById("myNode"); // 获取节点的className属性 var myClassName = myNode.className; // 设置节点的className属性 myNode.className = "newClass";
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() 方法。如下所示:
// 创建一个新的元素 var newNode = document.createElement("p"); // 设置元素的内容 newNode.innerHTML = "新的 HTML 内容"; // 将新元素添加到文档中 document.body.appendChild(newNode);
插入DOM節點
有以下幾點可以插入DOM節點:
var parent = document.getElementById("parent"); // 创建新的
var newNode = document.createElement("li"); // 设置元素的内容 newNode.innerHTML = "新的列表项"; // 将新元素添加到 "node" 元素之前 parent.insertBefore(newNode, node);
var newNode = document.createElement("li"); // 设置元素的内容 newNode.innerHTML = "新的列表项"; // 替换父节点下的第二个子节点 parent.replaceChild(newNode, parent.childNodes[1]);
DOM節點可以透過多種方式移除。以下是一些常用的方法:
var parent = document.getElementById("parent"); // 移除 "node" 元素 parent.removeChild(node);
var node = document.getElementById("node"); // 移除节点本身 node.remove();
透過使用JavaScript操作DOM,可以輕鬆修改網頁內容,包括HTML標記和文字內容。我們可以選擇節點、更改節點屬性、建立和插入新元素以及刪除現有節點。這些操作使得網站可以動態地更新和回應使用者行為。
以上是怎麼用JavaScript修改DOM節點的詳細內容。更多資訊請關注PHP中文網其他相關文章!