DOM的增删改查

操作DOM的核心就是增删改查

我们可以通过一些API来对HTML进行增删改查

一、创建节点的API

1.createElement

createElement:通过传入指定的一个标签名来创建一个元素，如果传入的标签名是一个未知的，则会创建一个自定义的标签，注意：IE8以下浏览器不支持自定义标签
例：

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

注意： 通过createElement创建的元素并不属于html文档，它只是创建出来，并未添加到html文档
中，要调用appendChild方法将其添加到DOM树中;

2. createTextNode

var text = document.createTextNode("Hello World");

注意： createTextNode接收一个参数，这个参数就是文本节点中的文本，和createElement一样，创建后的文本节点也只是独立的一个节点，同样需要appendChild将其添加到DOM树中

创建节点的AP其实还有很多，这里就只例举两个

二、修改的API（增 删 改）

1.appendChild（添加子元素）（增）

var uls = document.creaeteElement('ul')
var lis  = document.createElement('li');
ul.appendChild(li);//将li添加到ul中

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

2.insertBefore（添加子元素）

用来添加一个节点到一个参照节点之前

parentNode.insertBefore(newNode,Node);

注意： 和appendChild一样，如果插入的节点是页面上的节点，则会移动该节点到指定位置，并且保留其绑定的事件。

3. removeChild（移除子节点）（删）

var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);

注意： removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 null。如果删除的节点还被引用，则还会占用内存，可以以后被操作，只是暂时被从DOM树中移除。如果不被引用则不会占用内存

4.replaceChild(改)

把一个给定父元素里面的一个子节点替换为另一个子节点：

nodeObject.replaceChild(new_node,old_node)

替换的节点，可以是新的节点，也可以是页面上的节点，如果是页面上的节点，则其将被转移到新的位置

三 查询的节点的API(查)

1.document.getElementById

根据元素id返回元素，返回值是Element类型，如果不存在该元素，则返回null

2.document.getElementsByTagName

据元素标签名获取元素返回的是一个数组对象

3 document.getElementsByName

通过指定的name属性来获取元素，它返回一个即时的NodeList（节点列表）对象。一般用于获取表单元素的·name·属性

4.document.getElementsByClassName

根据元素的class返回文档中所有指定类名的元素集合，作为 NodeList 对象。

5. document.querySelector和document.querySelectorAll

通过css选择器来查找元素，注意选择器要符合CSS选择器的规则
querySelector方法返回匹配指定的CSS选择器的元素节点，但无法选中CSS伪元素。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
ocument.querySelectorAll的不同之处在于它返回的是所有匹配的元素，querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素