js DOM节点操作：增删改查复制
DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
DOM 是 Document Object Model（文档对象模型）的缩写。
节点：根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
1、整个文档时一个文档节点。
2、每个HTML元素是元素节点。
3、HTML元素内的文本是文本节点。
4、每个HTML属性是属性节点。
5、每个注释是注释节点。
1.增加
document.createElement 创建一个元素节点
obj.appendChild 追加子节点
createTextNode（节点文本内容）创建一个文本节点
//创建ul
var a=document.createElement('ul')
//创建li
var li1=getLi('首页');
var li2=getLi('新闻');
var li3=getLi('活动');
var li4=getLi('关于');
//将li添加到ul中
a.appendChild(li1);
a.appendChild(li2);
a.appendChild(li3);
a.appendChild(li4);
//将ul添加到body中
document.body.appendChild(a);
//创建文本节点
var a=document.createTextNode('哈哈哈');
document.body.appendChild(a);
2.删除
删除节点：
obj.removeChild 需要从父节点下删除
var removeChild = document.body.removeChild(div1);//移除document对象的方法div1
3.修改
replaceChild(插入的节点，被替换的节点) ，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要被替换的节点。返回的是被替换的节点。
<body>
<div id="box">222</div>
<div id="box1">333</div>
<script type="text/javascript">
var c=document.getElementById('box1');
var j=document.createElement('p');
j.innerHTML='888';
document.body.replaceChild(j,c);//替换节点
</script>
</body>
4.插入
appendChild（节点）也是一种插入节点的方式，还可以添加已经存在的元素，会将其元素从原来的位置移到新的位置。
insertBefore（a,b）是参照节点，意思是a节点会插入b节点的前面。
<body>
<div id="box">222</div>
<div id="box1">333</div>
<script type="text/javascript">
var o=document.getElementById('box');
var oDiv=document.createElement('div');
oDiv.innerHTML='新来的';
o.appendChild(oDiv);//追加到原来的div中
var p=document.createElement('p');
p.innerHTML='大家好';
o.appendChild(p);//追加到后面
o.insertBefore(p,oDiv);//内部指定位置插入节点
</script>
</body>
5.复制
复制节点：
cloneNode(flag)
flag 布尔类型 true 复制包含子节点 false 不包含子节点 默认为false
<body>
<div id="box">
<div>盒子</div>
<p>段落</p>
</div>
<div>外部</div>
<script type="text/javascript">
var a=document.getElementById('box');
var a1=a.cloneNode(true);//复制节点
document.body.appendChild(a1);//追加
</script>
</body>
6.查找
节点对象的属性：
childNodes 获取所有的子节点(元素节点、文本节点) NodeList 索引 0 length 节点个数
firstChild
lastChild
parentNode 父节点
previousSibling 上一个兄弟节点
nextSibling 下一个兄弟节点
<body>
<div id="box">内容
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</div>
<ul id="banner"><li>AAA</li><li>AAA</li><li>AAA</li></ul>
</body>
<script type="text/javascript">
var o=document.getElementById('box');
var s=o.childNodes;
s[1].innerHTML='AAA';//修改内容
console.log(s.length);
console.log(o.firstChild);//第一个孩子
o.firstChild.nextSibling.innerHTML='sss';
console.log(o.lastChild);//最后一个孩子
var u=document.getElementById('banner');
var u1=u.childNodes;
u1[0].innerHTML='aaa';
u.firstChild.innerHTML='ddd';
u.lastChild.innerHTML='vvv';
</script>