JavaScript Day 25. DOM Node 常用方法

文章写到第 25 篇，从这样的过程也稳固了自己不少观念，今天依然搅进脑汁将查找的资料尽量用自己的话写出来，也为今天的自己加油吧。

DOM 节点新增

document.createElement() / 可依指定的标签名称 ( tagName ) 建立一个新的 HTML 元素。
```
var newDiv = document.createElement('div');
```
自己测试的时候会发现，这个时候虽然有写入 createElement()，但是在浏览器上还看不到他，因此要能看见他的运作，我们还需要透过 appendChild()、insertBefore() 或 replaceChild()，才能将新元素加入指定位置，并在浏览器上呈现，不过这里我们可以了解到在范例上他是这麽写的：
```
<ul id="textList">
	<li>text 1</li>
	<li>text 2</li>
	<li>text 3</li>
</ul>

<script>
	var textList = document.getElementById('textList');
	var newTextList = document.createElement('li');
</script>
```
底下这个范例是创建一个按钮，在实例上我们也可以这麽写，
```
var btn = document.createElement("BUTTON");
var t = document.createTextNode("CLICK ME");
btn.appendChild(t);
```
我们也可以针对createElement()新创的元素指定一个属性：
```
textList.id = "seeTheNewList";
textList.className = "isText";
```
document.createTextNode() / 文字也属於一个文字节点，document.createTextNode() 方法为创建一个新的文字节点，使用方法直接在 document.createTextNode() 加入文字即可。
```
var text = document.createTextNode(data);
```
我们使用上面的范例接着看，经过测试会发现 document.createTextNode() 新增的文字仍然没有出现，因此在被加入某个节点之前，他不会在浏览器上呈现：
```
<ul id="textList">
	<li>text 1</li>
	<li>text 2</li>
	<li>text 3</li>
</ul>

<script>
	var textList = document.getElementById('textList');
	var newTextList = document.createElement('li');
	var textNode = document.createTextNode("Hi,I'm here");
</script>
```

再举一个 document.createTextNode() 的例子：

var h = document.createElement("H1")
var t = document.createTextNode("Hello");
h.appendChild(t);

上面这个范例是一个修改标题的动作，在修改标题之前我们需要有一个 h1，所以 document.createElement() 创建了一个 h1，再使用 document.createTextNode() 方法更改了标题。

document.createDocumentFragment() / 这是一个可以大幅增进 web page 效能物件，使用以下大神范例进行实测，假如我们要在 body 里插入数个 element：

// 这是原本的写法
for( var i=0; i<100; i++ ) {
	var item = document.createElement('div');
	$(item).text('Element-'+i);
	$(item).css({
		background: 'gold',
		padding: 5,
		margin: 5,
		float: 'left'
	});
	$('body').append(item);
}

使用 document.createDocumentFragment() 的写法经过实测，速度确实快了很多，这是因为 DocumentFragment 是一个页面上「不存在」的 element 物件，所以不论我们对他做什麽样的操作，都不会影响使用者外观。

// 这是使用 document.createDocumentFragment() 的写法
var fragment = document.createDocumentFragment();
for( var i=0; i<100; i++ ) {
	var item = document.createElement('div');
	$(item).text('Element-'+i);
	$(item).css({
		background: 'gold',
		padding: 5,
		margin: 5,
		float: 'left'
	});
	fragment.appendChild(item);
}
$('body').append(fragment);

第一段写法会要浏览器做100次更新页面的动作，而第二段只会让浏览器更新一次页面，因此速度会快很多。

document.write() / write() 方法可以向文档写入 HTML、表达式或 JavaScript 代码，当解析到 document.write() 的时候就会停下来并将内容输出。
```
document.write("<h1>Hi,I'm here</h1>");
```
另外，也可以新增一个 script 标签：
```
document.write("<script type=\"text\javascript\" src=\"file.js\">" + "<\/script>");
```

DOM 节点修改与删除

NODE.appendChild() / 这个方法可以向节点的子节点列表的末尾，添加新的子节点。这里一样使用上面的范例：

<ul id="textList">
	<li>text 1</li>
	<li>text 2</li>
	<li>text 3</li>
</ul>

<script>
	// 取得容器
	var textList = document.getElementById('textList');

	// 建立新的 li 元素
	var newTextList = document.createElement('li');

	// 建立 textNode 文字节点
	var textNode = document.createTextNode("Hi,I'm here");

	// 透过 appendChild 将 textNode 加入至 newTextList
	newTextList.appendChild(textNode);

	// 透过 appendChild 将 newTextList 加入至 textList
	textList.appendChild(newTextList);
</script>

这个范例最後会在浏览器呈现这个状态：

．text 1
．text 2
．text 3
．Hi,I'm here

另外，我们可以回顾一下上面使用 document.createElement()以及 document.createTextNode() 方法的时候，浏览器都没有呈现画面，因此这里可以验证，我们必须将元素加入正确的节点位置他才会在浏览器上显示。

NODE.insertBefore() / 在已有 ( 指定 ) 的子节点前插入一个新的子节点。

document.getElementById("myList").appendChild(newListItem);

举例来说 NODE.insertBefore()添加前，这是一个一般的 list：

．text 1
．text A
．text 3

假如我们希望指定 text A 前面添加一段文字，则添加了以後：

．text 1
．我们在这里添加了一段文字
．text A
．text 3

一样拿上面的范例来实测：

<ul id="textList">
	<li>text 1</li>
	<li>text 2</li>
	<li>text 3</li>
</ul>

<script>
	// 取得容器
	var textList = document.getElementById('textList');

	// 取得 <li>text 2</li> 的元素
	var newText2 = document.querySelectorAll('li')[1];

	// 建立新的 li 元素
	var newTextList = document.createElement('li');

	// 建立 textNode 文字节点
	var textNode = document.createTextNode("Hi,I'm here");
	newTextList.appendChild(textNode);

	// 将新节点 newTextList 插入 newText2 前方
	textList.insertBefore(newTextList, newText2);
</script>

上面的范例最後呈现这样：

．text 1
．Hi,I'm here
．text 2
．text 3

NODE.replaceChild() / replaceChild()方法可以将某个指定的子节点 ( newnode ) 替换为另一个 ( oldnode )；节点可以是新创建的，也可以是已存在的。

document.getElementById("myList").replaceChild(newnode,oldnode);

再次使用楼上的范例，在这里我发现一篇文章只要能有一个范例，就能不断重复使用，真的好方便^_^

<ul id="textList">
	<li>text 1</li>
	<li>text 2</li>
	<li>text 3</li>
</ul>

<script>
	// 取得容器
	var textList = document.getElementById('textList');

	// 取得 <li>text 2</li> 的元素
	var oldNode = document.querySelectorAll('li')[1];

	// 建立新的 li 元素
	var newTextList = document.createElement('li');

	// 建立 textNode 文字节点
	var textNode = document.createTextNode("Hi,I'm here");
	newTextList.appendChild(textNode);

	// 将新节点 newTextList 插入 newText2 前方
	textList.replaceChild(newTextList, oldNode);
</script>

画面上则会是这个样子：

．text 1
．Hi,I'm here
．text 3

NODE.removeChild() / removeChild()方法，以字面上来看也可以很明显的知道，他的用途就是删除指定的子节点，如果失败会回传 null。

elementNode.removeChild(node)

<ul id="textList">
	<li>text 1</li>
	<li>text 2</li>
	<li>text 3</li>
</ul>

<script>
	// 取得容器
	var textList = document.getElementById('textList');

	// 取得 <li>text 2</li> 的元素
	var remove = document.querySelectorAll('li')[1];

	// 将 textList 下的 remove 节点移除
	textList.removeChild(remove);
</script>

画面：

．text 1
．text 3

参考资料：

重新认识 JavaScript: Day 13 DOM Node 的建立、删除与修改
 runoob

<<: Day 19羊肉空心菜炒面

>>: 【Day 20】实作 - 於 AWS Quicksight 建立 Sankey diagram 以及设定 Action

JavaScript Day 25. DOM Node 常用方法

DOM 节点新增

DOM 节点修改与删除

从 JavaScript 角度学 Python(4) - 型别与变数

[DAY9]制作容器(八)

不是进行渗透测试的最佳时机

@Day15 | C# WixToolset + WPF 帅到不行的安装包 [安装包上的图片]

Day26 MANO开源专案使用之OSM-环境篇

TypeScript 能手养成之旅 Day 5 原始型别

Day20 - 【概念篇】OAuth flows: Device Code(2)

如何使用指令升级专案第三方套件

苹果电脑密技：如何快速清除 Mac 快取/暂存档案？

[Day 05] 当我~们同在一起在17在17 (k-means 理论篇)