JS 基礎篇 (9) DOM Node 的建立、刪除與修改

發表於 更新於 分類於
介紹 DOM Node 的操作方法

新增節點

createElement

1
document.createElement('element');

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

createDocumentFragment

1
document.createDocumentFragment()

createDocumentFragment() 是一種沒有父層節點的「最小化文件物件」。 可以把它看作是一個輕量化的 Document，用如同標準文件一般的方式來保存「片段的文件結構」。

插入節點

接下來要介紹的幾個方法，說明要如何將剛剛建立好的 DOM 節點，置入到我們所指定的位置。

appendChild

1
NODE.appendChild(childNode)

透過 appendChild 方法，可以將指定的 childNode 節點，加入到 Node 父容器節點的末端：

append

1
NODE.append(childNode || String)

和appendChild 一樣將節點加入父層末段，但除了節點以外，也能加入字串。

刪除節點

1
2
const div = document.querySelector('div');
div.remove()  // 刪除節點
1
2
3
const div = document.querySelector('div');
const child = document.querySelector('.child');
div.removeChild(child) // 刪除子元素

操作元素的屬性

取得屬性內容

1
<div id="hi"></div> 
1
2
3
const div = document.querySelector('div');
div.getAttribute('id') //hi
div.id // hi

設定屬性內容

1
<div></div> 
1
2
const div = document.querySelector('div');
div.setAttribute('id', 'hi'); // 將id屬性設為 hi

移除屬性

1
<div title="aa" id="bob"></div> 
1
2
const div = document.querySelector('div');
div.removeAttribute('title'); // 將titile屬性移除

data屬性操作

1
<div data-test="this is a test" data-num="123"></div>
1
2
div.dataset.test // this is a test
div.dataset.num // 123

操作元素的class

1
<div></div>
1
2
3
4
const div = document.querySelector('div');
div.classList.add('new-class'); // 新增class
div.classList.remove('new-class'); // 移除class
div.classList.toggle('new-class'); // 有class則移除class，沒有則加入該class

直接操作元素的css

1
<div></div>
1
2
3
const div = document.querySelector('div');
div.style.color = 'red';
div.style.backgroundColor = 'black';

節點(node)與元素(element)的區分

基本上 html 裡的節點包含所有的html標籤、換行、文字，而元素只包含的html標籤。
當我們在js裡用不同的選取dom方法時，依照方法不同會回傳 HTML Collection 或 Nodelist。

  • HTML Collection: 當元素增減時，會自動更新。
  • Nodelist: 依照選取方法不同，有的會自動更新，有的不會。

這邊推薦使用會回傳 Nodelist 的選取方法，如 querySelectorAll。因為元素如果會自動更新，出錯時很難維護。

影片教學

新增文字

新增文字有兩種方法 textContent 、 innerText

1
2
div.innerText = 'Hello World';
div.textContent = 'Hello World';

兩個方法都能加入文字，但innerText只顯示會出現螢幕上的文字，textContent則顯示全部文字。

1
2
3
4
<div>
  <span>Hello<span>
  <span style="display:none">Tim<span>
</div>
1
2
console.log(div.textContent); // Hello Tim
console.log(div.innerText); // Hello

新增 html

innerHTML 可以在元素內加入 html 結構，並清除元素原有內容。

1
div.innerHTML = '<span>Hello<span>'