javascript中常規(guī)操作節(jié)點的方法合集

更新時間：2025年05月16日 10:22:07 作者：盛夏綻放

JavaScript常用操作DOM節(jié)點的方法包括獲取節(jié)點,創(chuàng)建節(jié)點,添加節(jié)點,刪除節(jié)點,替換節(jié)點等,下面小編就來和大家詳細(xì)講講具體的操作方法吧

1.獲取節(jié)點

(1)通過ID獲取

使用 document.getElementById(“元素ID”) 方法，通過元素的ID獲取單個元素。這是最常用的方法之一，因為ID在頁面中是唯一的，可以直接定位到具體元素。

<div id="box"></div>
<script>
    //通過元素的ID獲取元素
    let box = document.getElementById("box")
</script>

(2)通過標(biāo)簽名獲取

<p></p>
<p></p>
<script>
    //通過元素的標(biāo)簽名獲取元素
    let label = document.getElementsByTagName("p")
</script>

(3)通過類名獲取

<div class="box"></div>
<script>
    //通過元素的類名獲取元素
    let box = document.getElementsByClassName("box")
</script>

(4)通過name屬性獲取

<input type="text" name="example"/>
<script>
    //通過name屬性獲取元素
    let example = document.getElementsByName("example")
</script>

(5)獲取特殊元素

獲取body元素

document.body直接獲取body元素

// 使用document.body獲取body元素
var bodyElement = document.body;
// 輸出獲取到的元素
console.log(bodyElement); // 輸出：<body>...</body>

獲取html元素

document.documentElement獲取html元素

// 使用document.documentElement獲取documentElement元素
var htmlElement = document.documentElement;
// 輸出獲取到的元素
console.log(htmlElement ); // 輸出：html

(6)通過CSS選擇器獲取

獲取的元素只有一個的時候:

使用 document.querySelector(“CSS選擇器”)方法

<div class="box"></div>
<script>
    //通過CSS選擇器獲取元素
    let box = document.querySelector("box")
</script>

獲取的元素有很多個的時候:

使用 document.querySelectorAll(“CSS選擇器”)方法

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
    //通過CSS選擇器獲取元素
    let boxs = document.querySelectorAll("box")
</script>

2.創(chuàng)建節(jié)點

(1)創(chuàng)建元素節(jié)點：

document.createElement(tagName)，用于動態(tài)生成新的HTML元素節(jié)點。

var newElement = document.createElement("div"); // 創(chuàng)建一個<div>元素節(jié)點

(2)創(chuàng)建文本節(jié)點：

document.createTextNode(text)，用于生成新的文本節(jié)點，常用于為新生成的元素節(jié)點添加文本內(nèi)容。

var newText = document.createTextNode("Hello World!"); // 創(chuàng)建一個包含文本內(nèi)容的文本節(jié)點

(3)創(chuàng)建屬性節(jié)點：

document.createAttribute(attrName)，用于生成新的屬性節(jié)點，可添加到元素節(jié)點上。

var newAttribute = document.createAttribute("class"); // 創(chuàng)建一個名為"class"的屬性節(jié)點
newAttribute.value = "example"; // 設(shè)置屬性值為"example"

(4)創(chuàng)建注釋節(jié)點：

document.createComment(commentText)，用于生成新的注釋節(jié)點，可用于添加注釋信息。

var newComment = document.createComment("This is a comment"); // 創(chuàng)建一個包含注釋內(nèi)容的注釋節(jié)點

3.添加節(jié)點

(1)向父節(jié)點末尾添加子節(jié)點：

element.appendChild(newNode)，將新節(jié)點添加為父節(jié)點的最后一個子節(jié)點。

// 獲取父節(jié)點
var parentElement = document.getElementById("parent");

// 創(chuàng)建新的子節(jié)點
var newChild = document.createElement("div");
newChild.textContent = "This is a new child element";

// 將新子節(jié)點添加到父節(jié)點的末尾
parentElement.appendChild(newChild);

(2)向指定位置插入子節(jié)點：

element.insertBefore(newNode, referenceNode)，在父節(jié)點的子節(jié)點referenceNode前插入新節(jié)點。

// 獲取父節(jié)點
var parentElement = document.getElementById("parent");

// 創(chuàng)建新的子節(jié)點
var newChild = document.createElement("div");
newChild.textContent = "This is a new child element";

// 獲取參考節(jié)點，即要在其前面 插入新子節(jié)點的節(jié)點
var referenceNode = document.getElementById("reference");

// 在參考節(jié)點之前插入新子節(jié)點
parentElement.insertBefore(newChild, referenceNode);

4.刪除節(jié)點

(1)從父節(jié)點中刪除子節(jié)點：

element.removeChild(node)，刪除父節(jié)點下的指定子節(jié)點。

// 獲取要刪除的子節(jié)點
var childElement = document.getElementById("child");
// 獲取該子節(jié)點的父節(jié)點
var parentElement = childElement.parentNode;
// 從父節(jié)點中刪除子節(jié)點
parentElement.removeChild(childElement);

在這個示例中，我們首先通過document.getElementById()方法獲取了ID為"child"的子節(jié)點。然后，我們使用parentNode屬性獲取了該子節(jié)點的父節(jié)點。最后，我們使用removeChild()方法將子節(jié)點從父節(jié)點中刪除。

(2)直接從DOM樹中移除節(jié)點：

node.remove()，直接移除節(jié)點及其子節(jié)點。

// 獲取要刪除的節(jié)點
var elementToRemove = document.getElementById("element");
// 直接從DOM樹中移除節(jié)點
elementToRemove.remove();

注釋：在這個示例中，我們首先通過document.getElementById()方法獲取了ID為"element"的節(jié)點。然后，我們使用remove()方法直接從DOM樹中移除該節(jié)點。

注意：這種方法會將節(jié)點及其所有子節(jié)點一起移除，而不僅僅是從父節(jié)點中移除。

5.替換節(jié)點

(1)替換子節(jié)點：

element.replaceChild(newNode, oldNode)，用新節(jié)點替換掉父節(jié)點下的舊節(jié)點。

<!DOCTYPE html>
<html>
<body>
    <div id="myDiv">
          <p id="oldNode">這是舊節(jié)點</p>
    </div>
</body>
    <script>
        // 獲取要替換的舊節(jié)點和新節(jié)點
        var oldNode = document.getElementById("oldNode");
        var newNode = document.createElement("p");
        newNode.innerHTML = "這是新節(jié)點";
        // 使用replaceChild()方法替換子節(jié)點
        document.getElementById("myDiv").replaceChild(newNode, oldNode);
    </script>
</html>

6.復(fù)制節(jié)點

(1)克隆節(jié)點：

node.cloneNode([deep])，創(chuàng)建一個節(jié)點的副本，可選參數(shù)deep決定是否深度克隆（包括子節(jié)點）。

<ul id="myList1"></ul>
<ul id="myList2">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Water</li>
  <li>Milk</li>
</ul>

var node = document.getElementById("myList2").lastChild;
var clone = node.cloneNode(true);
document.getElementById("myList1").appendChild(clone);

注釋：

在這個例子中，我們首先獲取ID為"myList2"的ul元素的最后一個子節(jié)點（即 li Milk /li ），然后使用cloneNode(true)對其進(jìn)行深度克隆，最后將克隆出來的節(jié)點添加到ID為"myList1"的 /ul元素中。

7.獲取節(jié)點信息

(1)獲取當(dāng)前元素的父節(jié)點：

element.parentNode，返回當(dāng)前元素的父節(jié)點對象。

<!DOCTYPE html>
<html>
<body>
<div id="parent">
  <div id="child">這是子節(jié)點</div>
</div>
<script>
// 獲取子節(jié)點
var childElement = document.getElementById("child");
// 獲取子節(jié)點的父節(jié)點
var parentElement = childElement.parentNode;
// 輸出父節(jié)點的id
console.log(parentElement.id); // 輸出 "parent"
</script>
</body>
</html>

(2)獲取當(dāng)前元素的子節(jié)點：

element.childNodes，返回當(dāng)前元素所有子節(jié)點的集合。

<!DOCTYPE html>
<html>
<body>
<div id="parent">
  <p>這是第一個子節(jié)點</p>
  <p>這是第二個子節(jié)點</p>
  <p>這是第三個子節(jié)點</p>
</div>
<script>
// 獲取父節(jié)點
var parentElement = document.getElementById("parent");
// 獲取父節(jié)點的所有子節(jié)點
var childNodes = parentElement.childNodes;
// 遍歷并輸出每個子節(jié)點的內(nèi)容
for (var i = 0; i < childNodes.length; i++) {
  if (childNodes[i].nodeType === Node.ELEMENT_NODE) { // 確保只處理元素節(jié)點
    console.log(childNodes[i].textContent);
  }
}
</script>
</body>
</html>

(3)獲取當(dāng)前元素的第一個和最后一個子節(jié)點：

element.firstChild 和 element.lastChild。

<!DOCTYPE html>
<html>
<body>
<div id="parent">
  <p>這是第一個子節(jié)點</p>
  <p>這是第二個子節(jié)點</p>
  <p>這是第三個子節(jié)點</p>
</div>
<script>
// 獲取父節(jié)點
var parentElement = document.getElementById("parent");
// 獲取父節(jié)點的第一個子節(jié)點
var firstChild = parentElement.firstChild;
console.log(firstChild.textContent); // 輸出 "這是第一個子節(jié)點"
// 獲取父節(jié)點的最后一個子節(jié)點
var lastChild = parentElement.lastChild;
console.log(lastChild.textContent); // 輸出 "這是第三個子節(jié)點"
</script>
</body>
</html>

(4)獲取當(dāng)前元素的同級前后兄弟節(jié)點：

element.nextSibling 和 element.previousSibling。

<!DOCTYPE html>
<html>
<body>
<div id="sibling1">這是第一個兄弟節(jié)點</div>
<div id="target">這是目標(biāo)節(jié)點</div>
<div id="sibling2">這是第二個兄弟節(jié)點</div>
<script>
// 獲取目標(biāo)節(jié)點
var targetElement = document.getElementById("target");
// 獲取目標(biāo)節(jié)點的前一個兄弟節(jié)點
var previousSibling = targetElement.previousSibling;
console.log(previousSibling.textContent); // 輸出 "這是第一個兄弟節(jié)點"
// 獲取目標(biāo)節(jié)點的后一個兄弟節(jié)點
var nextSibling = targetElement.nextSibling;
console.log(nextSibling.textContent); // 輸出 "這是第二個兄弟節(jié)點"
</script>
</body>
</html>

8.修改節(jié)點內(nèi)容與樣式

(1)設(shè)置或獲取元素的內(nèi)容：

element.innerHTML 和 element.innerText，前者可以包含HTML標(biāo)簽，后者只顯示文本內(nèi)容。

<!DOCTYPE html>
<html>
<body>
<div id="myDiv">這是初始內(nèi)容</div>
<script>
// 獲取元素
var myElement = document.getElementById("myDiv");
// 獲取元素的內(nèi)容
console.log(myElement.innerHTML); // 輸出 "這是初始內(nèi)容"
// 設(shè)置元素的內(nèi)容
myElement.innerHTML = "這是新的內(nèi)容";
// 再次獲取元素的內(nèi)容以確認(rèn)更改已生效
console.log(myElement.innerHTML); // 輸出 "這是新的內(nèi)容"
</script>
</body>
</html>

(2)設(shè)置或獲取元素的樣式：

element.style.property=value，用來改變元素的特定樣式屬性。

<!DOCTYPE html>
<html>
<body>
<div id="myDiv">這是一個帶有樣式的元素</div>
<script>
// 獲取元素
var myElement = document.getElementById("myDiv");
// 獲取元素的樣式
console.log(myElement.style.color); // 輸出 "rgb(0, 0, 0)"，默認(rèn)顏色為黑色
// 設(shè)置元素的樣式
myElement.style.color = "red";
myElement.style.fontSize = "24px";
// 再次獲取元素的樣式以確認(rèn)更改已生效
console.log(myElement.style.color); // 輸出 "red"
console.log(myElement.style.fontSize); // 輸出 "24px"
</script>
</body>
</html>

9.獲取和設(shè)置元素的屬性

(1)獲取元素的屬性值：

element.getAttribute(attributeName)，返回指定屬性的屬性值。

<!DOCTYPE html>
<html>
<body>
<div id="myDiv" class="example">這是一個帶有屬性的元素</div>
<script>
// 獲取元素
var myElement = document.getElementById("myDiv");
// 獲取元素的id屬性值
console.log(myElement.getAttribute("id")); // 輸出 "myDiv"
// 獲取元素的class屬性值
console.log(myElement.getAttribute("class")); // 輸出 "example"
</script>
</body>
</html>

(2)設(shè)置元素的屬性值：

element.setAttribute(attributeName, value)，為元素設(shè)置指定屬性的值。

<!DOCTYPE html>
<html>
<body>
<div id="myDiv">這是一個帶有屬性的元素</div>
<script>
// 獲取元素
var myElement = document.getElementById("myDiv");
// 設(shè)置元素的id屬性值
myElement.setAttribute("id", "newId");
console.log(myElement.getAttribute("id")); // 輸出 "newId"
// 設(shè)置元素的class屬性值
myElement.setAttribute("class", "newClass");
console.log(myElement.getAttribute("class")); // 輸出 "newClass"
</script>
</body>
</html>

(3)刪除元素的屬性：

element.removeAttribute(attributeName)，刪除元素的指定屬性。

<!DOCTYPE html>
<html>
<body>
<div id="myDiv" class="example">這是一個帶有屬性的元素</div>
<script>
// 獲取元素
var myElement = document.getElementById("myDiv");
// 刪除元素的id屬性
myElement.removeAttribute("id");
console.log(myElement.getAttribute("id")); // 輸出 null
// 刪除元素的class屬性
myElement.removeAttribute("class");
console.log(myElement.getAttribute("class")); // 輸出 null
</script>
</body>
</html>

到此這篇關(guān)于javascript中常規(guī)操作節(jié)點的方法合集的文章就介紹到這了,更多相關(guān)javascript節(jié)點操作內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: