【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');

同时也可针对我们新建立的<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>

让我们看看如何将 <li id="lastHero">5 中神通</li> 加入列表的最末端：

//取得父容器节点
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架构的方法，新增一个元素节点或文字节点，将其新增、替换原本就有的节点，或是清除本来就有的节点。