iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
自我挑戰組

JavaScript老學徒筆記—馬步篇系列 第 22

【Day21】給我一個節點,我可以把網頁改頭換面

「DOM API定義了JavaScript存取、改變HTML架構、內容、樣式的方法,甚至對節點綁定的事件。」

前一篇的內容,是關於JavaScript如何「存取」HTML節點的方法;這一篇來談談JavaScript用甚麼方法改變HTML架構、內容與樣式。

JavaScript改變HTML的方法有以下步驟:

  • 新增元素節點或文字節點
  • 利用appendChild()、insertBefore或replaceChild()等方法將新增的元素節點與文字節點插入指定的位置。

新增元素節點或文字節點

document.createElement(tagName)

document.createElement(tagName)可以幫我們建立一個新的元素節點,但是你利用appendChild()等方法把它加入指定位置之後才會在網頁上顯示出來。

let newLi = document.createElement('li');

同時也可針對我們新建立的,指定id及class名稱。

newLi.id = "goodNewLi";
newLi.className = "betterNewLi";

document.createTextNode()

我們也可以利用document.createTextNode()建立文字節點,在括號中放入想要新增的字串。跟document.createElement(tagName)一樣,要用appendChild()等方法把新增的文字節點插入指定的位置後面,網頁上才會顯現出來。

let txt = document.createTextNode('string');

document.write

document.write()應該是JavaScript的新手最熟悉的老朋友了!

利用它不用甚麼append方法,馬上可以將括號中的內容輸出到網頁上,而且括號中不只可以放字串,還可以放HTML標籤。

document.write('Hollow World!')

將DOM節點新增到網頁中或是刪改節點

Node.appendChild(childNode)

Node.appendChild(childNode)可以讓我們將新增的元素節點或文字節點新增到父容器節點的最尾端。

<ul id="fiveHero">
  <li id="firstHero">1 東邪</li>
  <li id="secondHero">2 西毒</li>
  <li id="thirdHero">3 南帝</li>
  <li id="fourthHero">4 北丐</li>  
</ul>

讓我們看看如何將5 中神通加入列表的最末端:

//取得父容器節點
let heros = document.getElementById('fiveHero');
//新增<li>節點
let newLi = document.createElement('li');
//指定新增節點的id名稱
newLi.id = "lastHero";
//新增文字節點
let text = document.createTextNode('5 中神通');
//將文字節點加入到新增的<li>節點中
newLi.appendChild(text);
//將新增的<li>節點加入到父容器節點中
heros.appendChild(newLi);

Node.insertBefore(newNode,refNode)

Node.insertBefore(newNode,refNode)方法可以將新的節點(newNode),插入到參考節點(refNode)之前。

<ul id="fiveHero">
  <li>1 東邪</li>
  <li>2 西毒</li>  
  <li>4 北丐</li> 
	<li>5 中神通</li>
</ul>
//取得父容器節點
let heros = document.getElementById('fiveHero');
//建立新節點<li>
let newHero = document.createElement('li');
//建立新的文字節點
let thirdHeroTxt=document.createTextNode('3 南帝');
//將文字節點加入新建立的節點<li>
newHero.appendChild(thirdHeroTxt);
//抓取參考的節點<li id="fourthHero">4 北丐</li>
let refHero = document.querySelectorAll('li')[2];
//將新的節點<li>插到參考節點前面
heros.insertBefore(newHero,refHero);

Node.replaceChild(newChildNode,oldChildNode)

Node.replaceChild(newChildNode,oldChildNode)可以將原本的節點及內容更換為新的節點及內容。

<div id="sword">
  <ul id="fiveHero">
    <li id="firstHero">1 東邪</li>
    <li id="secondHero">2 西毒</li>
    <li ids="thirdHero">3 南帝</li>
    <li id="fifthHero">4 北丐</li>
    <li id="lastHero">5 中神通</li>
  </ul>
</div>
//取得父容器節點
let heros = document.getElementById('fiveHero');
//建立新節點<li>
let newHero = document.createElement('li');
//建立新的文字節點
let newHeroTxt=document.createTextNode('5 中頑童');
//將文字節點加入newHero元素節點
newHero.appendChild(newHeroTxt);
//抓取參考的節點<li id="lastHero">5 中神通</li>
let oldHero = document.getElementById('lastHero');
heros.replaceChild(newHero,oldHero);

Node.removeNode(childNode)

那要如何刪除元素節點呢?利用Node.removeNode(childNode)就可以辦到!但是這個方法只能刪除單一網頁節點。

<ul id="fiveHero">
  <li>1 東邪</li>
  <li>2 西毒</li> 
  <li>3 南帝</li>
  <li>4 北丐</li> 
	<li>5 中神通</li>
</ul>
//取得父容器節點
let heros = document.getElementById('fiveHero');
//取得要移除的元素節點
let removeHero = document.querySelectorAll('li')[1];
//將heros裡的removeHero移除
heros.removeChild(removeHero);

以上就是改變HTML架構的方法,新增一個元素節點或文字節點,將其新增、替換原本就有的節點,或是清除本來就有的節點。


上一篇
【Day20】比較Nodelist與HTML collection的差異
下一篇
【Day22】在網頁中插入HTML標籤的實務做法
系列文
JavaScript老學徒筆記—馬步篇35

尚未有邦友留言

立即登入留言