JavaScript DOM Node（新增、修改、刪除）


除了在之前提過的 DOM Node 的類型、以及節點之間的查找與關係。我們在這一篇文章會介紹其他新增、修改和刪除 DOM 節點的方法。

document.createElement(tagName)

用來建立一個新的元素。

在建立新的 p 元素 newP 後，這時候我們在瀏覽器上還看不到它，直到透過 appendChild()、insertBefore() 或 replaceChild() 等方法將新元素加入至指定的位置之後才會顯示。

1
2
3
// 建立一個新的 <p>

var newP = document.createElement('p');

新建立的 newP 我們也可以同時對它指定屬性：

1
2
3
newP.id = "myNewP";

newP.className = "demo";

document.createTextNode()

用來建立文字節點，在 TextNode 被加入至某個節點後，才會顯示。

1
2
3
4
5
6
7
8
9
var newSpan = document.createElement('span');


// 建立 textNode 文字節點
var textNode = document.createTextNode("Hello world!");

// 透過 newSpan.appendChild 將 textNode 加入至 newSpan

newSpan.appendChild(textNode);

document.createDocumentFragment()

它是一種沒有父層節點的「片段文件結構」，透過操作 DocumentFragment 與直接操作 DOM 最關鍵的區別在於 DocumentFragment 不是真實的 DOM 結構，所以 DocumentFragment 的變動並不會影響目前的網頁文件。

我們把可以先建立一個DocumentFragment，把所有的新節點先放到文檔碎片裡面，然後再一次性地添加至 document中，這樣就減少了頁面渲染 DOM 元素的次數。當需要進行大量的 DOM 操作時，使用 DocumentFragment 會比直接操作 DOM 的效能要好。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<body>

<p>Click the button to make changes to a list item, using the createDocumentFragment method, then appending the list item as the last child of the list.</p>

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

<script>
// 取得外層容器 myList
var ul = document.getElementById("myList");

// 建立一個 DocumentFragment，可以把它看作一個「虛擬的容器」
var fragment = document.createDocumentFragment();

for (var i = 0; i < 3; i++){
  // 生成新的 li，加入文字後置入 fragment 中。
  let li = document.createElement("li");
  li.appendChild(document.createTextNode("Item " + (i+1)));
  fragment.appendChild(li);

}

// 最後將組合完成的 fragment 放進 ul 容器
ul.appendChild(fragment);
</script>

</body>
</html>

ParentNode.appendChild(childNode)

用來新增一個子節點到指定元素節點的最後面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<body>

<div id="name"><span>hello</span></div>

<script>
    // 建立一個新 <div>
    var newDiv = document.createElement('div');

    // 建立一個新的文字節點
    var newContent = document.createTextNode('I am Cheng-Yi-Ting.');

    // 將文字節點加到剛建立的 <div> 元素中
    newDiv.appendChild(newContent);

    // 取得目前頁面上的 name 元素
    var currentDiv = document.getElementById('name');

    // 將剛建立的 <div> 元素加入 name 元素中
    currentDiv.appendChild(newDiv);

    // 顯示 <span>hello</span><div>I am Cheng-Yi-Ting.</div>
    alert(currentDiv.innerHTML);
</script>

</body>
</html>

ParentNode.insertBefore(newNode, referenceNode)

用來將一個新的元素加到某個元素的前面。將新節點 newNode 插入至指定的 referenceNode 節點的前面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<body>

<div id="demo">
    <span id="s1">安安</span>
    <span id="s2">你好</span>
</div>

<script>
    // 建立一個新的 <span>
    var newSpan = document.createElement('span');
    // 增添一些內容
    newSpan.innerHTML = 'Hi';

    // 取得目前頁面上的 demo 元素
    var demo = document.getElementById('demo');

    // 取得目前頁面上的 s2 元素
    var s2 = document.getElementById('s2');

    // 將新的 span 元素放到 demo 元素中的 s2 子元素前面
    demo.insertBefore(newSpan, s2);

    // 顯示 <span id="s1">安安</span><span>Hi</span><span id="s2">你好</span>
    alert(demo.innerHTML);
</script>

</body>
</html>

ParentNode.removeChild(childNode)

將指定元素的某個指定的子節點移除：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<body>

<!-- Note that the <li> elements inside <ul> are not indented (whitespaces). 
If they were, the first child node of <ul> would be a text node 
-->
<ul id="myList">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<p>Click the button to remove the first item from the list.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var list = document.getElementById("myList");
  list.removeChild(list.childNodes[0]);
}
</script>

</body>
</html>

ParentNode.replaceChild(newChild, oldChild)

用新節點來取代某個子節點，這個新節點可以是某個已存在的節點或是新節點。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<body>


<div>
    <span id="childSpan">foo bar</span>
</div>

<script>


// Create an empty element node
// without an ID, any attributes, or any content
var sp1 = document.createElement("span");

// Give it an id attribute called 'newSpan'
sp1.id = "newSpan";

// Create some content for the new element.
var sp1_content = document.createTextNode("new replacement span element.");

// Apply that content to the new element
sp1.appendChild(sp1_content);

// Build a reference to the existing node to be replaced
var sp2 = document.getElementById("childSpan");
//<span id="childSpan">foo bar</span>

var parentDiv = sp2.parentNode;


// Replace existing node sp2 with the new span element sp1
parentDiv.replaceChild(sp1, sp2);

// Result:
// <div>
//   <span id="newSpan">new replacement span element.</span>
// </div> 
</script>

</body>
</html>

document.write(html)

document 物件要將某內容寫入網頁可以用 write() 方法，當瀏覽器讀取頁面，解析到 document.write() 的時候就會停下來，並且將 HTML 內容輸出。

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
  <title>document.write example</title>
</head>
<body>
  <p>first paragraph</p>
  <script>
    document.write('<p>second paragraph</p>');
  </script>
</body>
</html>

如果你在頁面載入後，才執行 document.write 則會將裡面的內容完全覆蓋目前的畫面，現在實務上也比較少在使用 document.write。

1
2
3
window.onload = function(){
  document.write("Hello world!");
};

參考文獻

  1. https://ithelp.ithome.com.tw/articles/10191867

  2. https://www.fooish.com/javascript/dom/manipulating.html