Day18 Javascript HTML DOM節點

2022 iThome 鐵人賽

DAY 18

Modern Web

Javascripts惡補小教室系列第 18 篇

14th鐵人賽

karta1366796

團隊imac_柬埔寨7日遊

2022-10-03 14:57:05

935 瀏覽

分享至

DOM元素(節點)

透過DOM節點去新增和刪除新的元素，必須先了解到節點的概念，若是今天需要在一個頁面中添加新的HTML元素，我們首先要創建這個元素(節點)，把元素新增到已經在頁面的元素中，創建新HTML元素(節點)。

新增HTML元素(節點)

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">段落一。</p>
<p id="p2">段落二。</p>
</div>

<script>
var para = document.createElement("p");         //創造了一個P標籤元素
var node = document.createTextNode("新段落。");  //新增文字節點
para.appendChild(node);                         //文字節點新增到P段落
var element = document.getElementById("div1");  //已存在的元素('div1')
element.appendChild(para);                      //p段落新增進去
</script>

</body>
</html>

首先我們創造了一個P標籤元素，而要在P段落裡面新增文字的話，我們要新增一個文字節點，創建完以後將文字節點新增到P段落裡，最後再透過找向已存在的元素('div1')，把p段落新增進去。

若是今天碰到想要將元素新增到第一個元素中呢?前一個透過appendChild()方法將新元素新增到父層('div1')的最後一個，而要是想要不同的位置時可以使用insertBefore() 方法。

新增insertBefore() 方法

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">段落一。</p>
<p id="p2">段落二。</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("新段落。");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script>

</body>
</html>

透過一樣的方法新增節點，使用insertBefore()方法，設定參數後，新增在('div1')與('p1')段落中間。

刪除HTML元素
有了新增，當然少不了刪除HTML元素，我們有很多時候想要將不要的區塊給隱藏，或是移除，這時候就可以使用remove()方法。

remover()方法

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript HTML DOM</h1>

<p>删除 HTML 元素：</p>

<div>
<p id="p1">段落一。</p>
<p id="p2">段落二。</p>
</div>

<button onclick="myFunction()">删除元素</button>

<script>
function myFunction() {
document.getElementById("p1").remove();
}
</script>

</body>
</html>

按下按鈕時，我們一樣透過DOM節點抓取('p1')，找到需要刪除的元素，執行函數myFunction()，函數裡面把抓取到的元素實施remove()方法，把段落一給移除。

取代HTML元素
除了新增和刪除以外，還有取代replaceChild() 方法，把現有的HTML元素取代為新的元素，就不必先新增再刪除，兩個步驟執行，多繞一大圈。

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">段落一。</p>
<p id="p2">段落二。</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
var para = document.createElement("p");
var node = document.createTextNode("新段落。");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

</body>
</html>

我們抓取('div1')的節點元素，使用replaceChild() 方法，帶入參數，把p1整個段落取代為新的p元素(para)。

那今天DOM節點的介紹就到這邊了!讓我們明天再一起繼續努力吧。