DOM Node 的创建、删除与修改

在以前的介绍中，咱们已经理解了DOM Node的类型、以及节点之间的查找与关系。那么在今天的介绍里咱们将继续来讲明，如何经过DOM API来创建新的节点、修改以及删除节点。

DOM 节点的新增

document.createElement(tagName)

经过document.createElement()能够创建一个新的元素：

var newDiv = document.createElement('div');
复制代码

在创建新的div元素newDiv后，这时候咱们在浏览器上还看不到它，直到经过appendChild()、insertBefore()或replaceChild()等方法将新元素加入至指定的位置以后才会显示。

新创建的newDiv咱们也能够同时对它指定属性，如：

newDiv.id = "myNewDiv"; 
newDiv.className = "box";
复制代码

document.createTextNode()

以前曾介绍过，除了HTML元素节点外，还有文字节点，那么document.createTextNode()就是用来创建文字节点的方法。

用法很简单，直接在document.createTextNode()加入字符串便可。跟createElement同样的是，新增的TextNode在被加入至某个节点前，咱们是看不到它的。

var newDiv = document.createElement('div');

// 创建 textNode 文字节点
var textNode = document.createTextNode("Hello world!");

// 经过 newDiv.appendChild 将 textNode 加入至 newDiv 
newDiv.appendChild(textNode);
复制代码

document.createDocumentFragment()

在DOM规范的全部节点之中，DocumentFragment算是最特殊的一种，它是一种没有父层节点的最小化文件对象。能够把它看做是一个轻量化的Document，用如同标准文件通常的方式来保存片断的文件结构。

例如，一开始咱们有一个HTML 的容器元素：

<ul id="myList"></ul>
复制代码

接着咱们经过document.createDocumentFragment()来创建DocumentFragment：

// 取得外层容器 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);
复制代码

经过操做DocumentFragment与直接操做DOM最关键的区别在于DocumentFragment不是真实的DOM结构，因此说DocumentFragment的变更并不会影响目前的网页文件，也不会致使回流（reflow）或引发任何影响效果的状况发生。

document.write()

document对象要将某内容写入网页也能够用write()方法，当浏览器读取页面，解析到document.write()的时候就会停下来，而且将内容输出，且不仅是单纯的字符串，也能够是HTML的标签。

咱们只要将对应的HTML 字符串传入：

document.write("<h1>Hello World!</h1>");
复制代码

甚至，若是要新增一个<script>标签，并指定外部js资源也是能够的，但要注意的是：

// 写成这样， </script>会变成目前 script 块的结束，致使错误 
document.write("<script type=\"text\javascript\" src=\"file.js\">" + "</script>");

// 为了不这种问题，要将结尾的标签这种写法 <\/script> 就 ok 了 
document.write("<script type=\"text\javascript\" src=\"file.js\">" + "<\/script>");
复制代码

另外，须要特别注意的是，当网页已经读取完成后才执行document.write()，则里面的内容会彻底覆盖掉目前的网页：

window.onload = function(){   
  document.write("Hello world!"); 
};
复制代码

上面例子的window.onload表示网页已载入完成，此时不管网页本来有什么内容，都会被"Hello world!"所覆盖。

DOM 节点的修改与删除

上面介绍了不少创建DOM节点的方法，除了最后的document.write以外，其余都只是单纯创建节点，并未输出至网页上。

那么，接下来要介绍的几个方法，则说明要如何将刚刚创建好的DOM 节点，置入到咱们所须要指定的位置上。

NODE.appendChild(childNode)

经过appendChild()方法，能够将指定的childNode节点，加入到Node父容器节点的末端：

<ul id="myList">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

<script> // 取得容器 var myList = document.getElementById('myList'); // 创建新的 <li> 元素 var newList = document.createElement('li'); // 创建 textNode 文字节点 var textNode = document.createTextNode("Hello world!"); // 经过 appendChild 将 textNode 加入至 newList newList.appendChild(textNode); // 经过 appendChild 将 newList 加入至 myList myList.appendChild(newList); </script>
复制代码

NODE.insertBefore(newNode, refNode)

insertBefore()方法，则是将新节点newNode插入至指定的refNode节点的前面：

<ul id="myList">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

<script> // 取得容器 var myList = document.getElementById('myList'); // 取得 "<li>Item2</li>" 的元素 var refNode = document.querySelectorAll('li')[1]; // 创建 li 元素节点 var newNode = document.createElement('li'); // 创建 textNode 文字节点 var textNode = document.createTextNode("Hello world!"); newNode.appendChild(textNode); // 将新节点 newNode 插入 refNode 的前方 myList.insertBefore(newNode, refNode); </script>
复制代码

NODE.replaceChild(newChildNode, oldChildNode)

replaceChild()方法，则是将本来的oldNode替换成指定的newNode。

<ul id="myList">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

<script> // 取得容器 var myList = document.getElementById('myList'); // 取得 "<li>Item2</li>" 的元素 var oldNode = document.querySelectorAll('li')[1]; // 创建 li 元素节点 var newNode = document.createElement('li'); // 创建 textNode 文字节点 var textNode = document.createTextNode("Hello world!"); newNode.appendChild(textNode); // 将原有的 oldNode 替换成新节点 newNode myList.replaceChild(newNode, oldNode); <script> 复制代码

NODE.removeChild(childNode)

removeChild()方法，则是将指定的childNode子节点移除。

<ul id="myList">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

<script> // 取得容器 var myList = document.getElementById('myList'); // 取得 "<li>Item2</li>" 的元素 var removeNode = document.querySelectorAll('li')[1]; // 将 myList 下的 removeNode 节点移除 myList.removeChild(removeNode); </script>
复制代码

相信看完今天的分享，已经有能力能够经过DOM 提供的API 来进行节点的新增、修改以及删除了吧。

你们也许会发现，不管要对网页元素作出什么样的操做，咱们都会基于某个节点出发对吧？

恰好呼应阿基米德的一句众所周知的名言：

「给我一个支点，我就能撬动整个地球。」

那么有了DOM API 的帮助后， JavaScript 也能够说：

「给我一个节点，我就能创建整个网页世界。」

若是以为文章对你有些许帮助，欢迎在个人GitHub博客点赞和关注，感激涕零！