首頁 > 文章 > web前端 > javascript怎麼替換節點

javascript怎麼替換節點

WBOY原創: 2022-01-04 15:23:504229瀏覽

在JavaScript中，可以利用replaceChild()方法取代節點，該方法的作用就是可將某個子節點替換為另一個，新節點可以是已存在的，或者是新創建的，語法為「node.replaceChild(newnode,oldnode)」。

javascript怎麼替換節點

本教學操作環境：windows10系統、javascript1.8.5版、Dell G3電腦。

javascript怎麼取代節點

JavaScript replaceChild() 方法可以將某個子節點替換為另一個。用法如下：

nodeObject.replaceChild(new_node, old_node)

其中參數 new_node 為指定新的節點，old_node 為被取代的節點。如果替換成功，則傳回被替換的節點；如果替換失敗，則傳回 null。

範例1

以上範例為基礎重寫腳本，新建一個二級標題元素並取代紅色盒子中的一級標題元素。

var ok = document.getElementById("ok");  //获取按钮元素的引用
ok.onclick = function () {  //为按钮注册一个鼠标单击事件处理函数
    var red = document.getElementById("red");  //获取红色盒子的引用
    var h1 = document.getElementsByTagName("h1")[0];  //获取一级标题的引用
    var h2 = documeng.createElement("h2");  //创建二级标题元素并引用
    red.replaceChild(h2, h1);  //把一级标题替换为二级标题
}

示範發現，當使用新建立的二級標題取代一級標題之後，原來的一級標題所包含的標題文字已經不存在了。這說明替換節點的操作不是替換元素名稱，而是替換其包含的所有子節點以及其包含的所有內容。

同樣的道理，如果替換節點也包含子節點，則子節點將一同插入到被替換的節點中。可以藉助 replaceChild() 方法在文件中使用現有的節點來取代另一個存在的節點。

範例如下：

<html>
<head>
<meta charset="utf-8">
<title>123</title>
</head>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<p id="demo">单击按钮替换列表中的第一项。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var textnode=document.createTextNode("Water");
var item=document.getElementById("myList").childNodes[0];
item.replaceChild(textnode,item.childNodes[0]);
}
</script>
<p>首先创建一个文本节点。<br>然后替换第一个列表中的第一个子节点。</p>
<p><strong>注意:</strong>这个例子只将文本节点的文本节点“Coffee”替换为“Water”,而不是整个LI元素,这也是替换节点的一种备选。</p>
</body>
</html>

輸出結果：

javascript怎麼替換節點

#點擊按鈕後：

javascript怎麼替換節點

【相關推薦：javascript學習教學】

以上是javascript怎麼替換節點的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript NULL

陳述：

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

上一篇：vue怎麼控制元素的隱藏與顯示下一篇：vue怎麼控制元素的隱藏與顯示

看更多