javascript

1.创建节点(Es6支持以下）
createElement通过传入指定的一个标签名来创建一个元素，如果传入的标签名是一个未知的，则会创建一个自定义的标签，注意：IE8以下浏览器不支持自定义标签。
var div = document.createElement(“div”);

createTextNode用来创建一个文本节点，
var textNode = document.createTextNode(“一个TextNode”);

cloneNode是用来返回调用方法的节点的一个副本，它接收一个bool参数，用来表示是否复制子元素，
var parent = document.getElementById(“parentElement”);
var parent2 = parent.cloneNode(true);// 传入true
parent2.id = “parent2”

2.页面修改
前面我们提到创建型api，它们只是创建节点，并没有真正修改到页面内容，而是要调用appendChild来将其添加到文档树中。我在这里将这类会修改到页面内容归为一类。
修改页面内容的api主要包括：appendChild，insertBefore，removeChild，replaceChild。

appendChild我们在前面已经用到多次，就是将指定的节点添加到调用该方法的节点的子元素的末尾。
parent.appendChild(child);

child节点将会作为parent节点的最后一个子节点。
appendChild这个方法很简单，但是还有有一点需要注意：如果被添加的节点是一个页面中存在的节点，则执行后这个节点将会添加到指定位置，其原本所在的位置将移除该节点，也就是说不会同时存在两个该节点在页面上，相当于把这个节点移动到另一个地方。

insertBefore用来添加一个节点到一个参照节点之前
parentNode.insertBefore(newNode,refNode);

removeChild顾名思义，就是删除指定的子节点并返回，
var deletedChild = parent.removeChild(node);

deletedChild指向被删除节点的引用，它等于node，被删除的节点仍然存在于内存中，可以对其进行下一步操作。
注意：如果被删除的节点不是其子节点，则程序将会报错。我们可以通过下面的方式来确保可以删除：

if(node.parentNode){
node.parentNode.removeChild(node);
}
通过节点自己获取节点的父节点，然后将自身删除。

3.查询
节点查询型API
节点查询型API也是非常常用的api，下面我们分别说明一下每一个api的使用。
document.getElementById

这个接口很简单，根据元素id返回元素，返回值是Element类型，如果不存在该元素，则返回null。
使用这个接口有几点要注意：
（1）元素的Id是大小写敏感的，一定要写对元素的id
（2）HTML文档中可能存在多个id相同的元素，则返回第一个元素
（3）只从文档中进行搜索元素，如果创建了一个元素并指定id，但并没有添加到文档中，则这个元素是不会被查找到的