增：

1、元素：3步

1、创建标签

var elem=document.createElement("标签名");

2、设置属性或方法

elem.属性名="属性值"
elem.on事件名=function(){}

3、渲染到页面上

父元素.appendChild(elem);
父元素.insertBefore(elem,已有子元素);
父元素.replaceChild(elem,已有子元素);

2、内容：

elem.innerHTML/innerText/value+="新内容"
value 是指用 <input value="xx">或者<textarea>xx</textarea>输入的值（
innerHTML 指在HTML元素内的内容,可识别标签。
innerText 指在HTML元素内的文字内容，不能识别标签。

3、属性：

elem.setAttribute("属性名","属性值1 属性值2");

4、样式：

elem.style.css属性名="css属性值";//没有这个属性叫添加，有了叫替换

删：

1、元素：

elem.remove();

2、内容：

elem.innerHTML/innerText/value=""

3、属性：

elem.removeAttribute("属性名");

4、样式：

elem.style.css属性名="";//没有这个属性叫添加，有了叫替换

改：

1、元素：

父.replaceChild(elem,已有子元素);

2、内容：

elem.innerHTML/innerText/value="新值"

3、属性：

elem.setAttribute("属性名","新值");

4、样式：

elem.style.css属性名="css属性值";//没有这个属性叫添加，有了叫替换

查：

1、元素：

1、直接找：

document.getXXX
document.querySelectorXXX

2、通过关系查找(前提要先找到一个元素)

1、父：elem.parentNode;
2、子：elem.children; - 集合：只能找到儿子级
3、第一个儿子：elem.firstElementChild;
4、最后一个儿子：elem.lastElementChild;
5、前一个兄弟：elem.previousElementSibling;
6、后一个兄弟：elem.nextElementSibling;

3、层级不明确：

1、递归（元素、数据）

实现递归：2步
1、创建函数，传入实参树根，形参接住，直接做第一层要做的操作
	function f1(root){
		直接做第一层要做的操作
                //判断自己有没有下一级，如果有再次调用此方法，但传入的实参已经变成了你的下一级
	}
2、调用函数
	f1(实际的根元素)

算法：深度优先！优先遍历当前节点的子节点，子节点遍历完，才会跳到兄弟节点
递归：优点：直观，易用
缺点：效率较低，同时开启的函数很多，占用内存空间，不是任何时候都要使用

2、遍历API

实现遍历API2步：
1、创建treewalker对象
	var tw=document.createTreeWalker(root,NodeFilter.SHOW_ALL/SHOW_ELEMENT);
2、反复调用nextNode方法：
	while((node=tw.nextNode())!=null){
		node;//当前节点做什么操作
	}

深度优先算法
注意：此方法必须跳过起点

3、纯循环(难度大)

总结：以后不用遍历API（只能遍历页面元素），也不用纯循环（难度大），遇到层级不明确的时候，使用递归（不仅遍历元素，还能遍历数据）

2、内容：

elem.innerHTML/innerText/value;

3、属性：

elem.getAttribute("属性名");

4、样式：

elem.style.css属性名;//只能获取内联样式