<\div>
var div = document.getElementById(‘only’);
//这时就选中了id名为only的
2 document.getElementsByTagName()
//通过标签名进行选择 将结果组成类数组 任何浏览器都可以使用 所以这个方法比较常用
如
var div = document.getElementsByTagName(‘div’);
//选中div标签
var tag = document.getElementsByTagName(‘‘);
//选中所有标签
3 document.getElementsByName();
//通过name进行选择
//IE浏览器不支持这个方法
//需注意 只有部分标签name可生效（表单，表单元素，img，iframe）
4 document.getElementsByClassName()
//通过class进行选择 可以多个class一起
//ie8和ie8以下的IE版本中没有这个方法
5 document.querySelector()
//css选择器 选中的是一个
//在IE7和IE7以下的版本中没有
//而且不是实时的 相当于选中后变为副本
//当我们去操作页面上的标签时 被 querySelector() 选中的这些标签不受影响
//所以这个方法不常用
6 document.querySelectorAll()
// css选择器 选中的是一组
//在IE7和IE7以下的版本中没有
//而且不是实时的 相当于选中后变为副本
//当我们去操作页面上的标签时 被 querySelectorAll() 选中的这些标签不受影响
//所以这个方法不常用
遍历节点树
1 parentNode -> 父节点 (最顶端的parentNode为#document)
2 childNodes -> 子节点们
如

//var div = document.getElementsByTagName(‘div’); div[0].childNodes
//共7个子节点
3 firstChild -> 第一个子节点
如

hahaha

//var div = document.getElementsByTagName(‘div’); div[0].firstChild
//为文本节点 即div与p之间的那部分文本
4 lastChild -> 最后一个子节点
5 nextSibling->后一个兄弟节点
如

//var p = document.getElementsByTagName(‘p’); p.nextSibling
//为文本节点 即p与span之间的那部分文本
6 previousSibling->前一个兄弟节点
基于**元素**节点树的遍历
1 parentElement -> 返回当前元素的父元素节点 (IE不兼容)
html即为最顶层的元素节点
2 children -> 只返回当前元素的元素子节点
3 node.childElementCount === node.children.length当前元素节点的子元素节点个数(IE不兼容)
4 firstElementChild -> 返回的是第一个元素节点(IE不兼容)
5 lastElementChild -> 返回的是最后一个元素节点(IE不兼容)
6 nextElementSibling / previousElementSibling ->返回后一个/前一个兄弟元素节点（IE不兼容)
节点的四个属性
1 nodeName
返回元素的标签名 以大写字符串形式表示 只读 不可修改
如 document.nodeName
//即为”#document”
var div = document.getElementsByTagName(‘div’);
div[0].nodeName
//即为”DIV”
2 nodeValue
返回Text文本节点或Comment注释节点的文本内容 可读写
3 nodeType
返回该节点的类型所对应的数 只读
详情见上
如

//var div = document.getElementsByTagName(‘div’); div[0].firstChild.nodeType
//为文本节点 返回3
4 attributes
元素节点的属性集合
如

//这个div有两个属性 class=”demo” id=”test”
//var div = document.getElementsByTagName(‘div’); div[0].attributes
//返回一个类数组 里面装着属性
*节点的一个方法
Node.hasChildNodes();
判断节点里面是否有子节点 返回布尔值

增加一个节点

*1 document.createElement();
创建一个元素节点
如
var div = document.createElement(‘div’);
//此时就在JS中创建了一个div标签 但是这个div是在JS中的 还没有将其放到HTML页面中
//若想将其放入页面中 document.body.appendChild(div); 这时div就放入到页面中了
2 document.createTextNode();
创建一个文本节点
3 document.createComment();
创建一个注释节点
4 document.createDocumentFragment();
创建一个文档碎片节点

插——剪切操作（即会把页面上已有的被选中的部分剪切放到另一部分里）

*1 appendChild();
任何一个元素节点都可用appendChild函数（类似与push函数）
如
var div = document.createElement(‘div’);
var span = document.createElement(‘span’);
var text = document.createTextNode(‘哈哈’);
div.appendChild(text); //即把文本节点添加到div中
div.appendChild(span); //即把span添加到div中 且在text后
span.appendChild(text); //本来text文本应该在div中 但是此时span把其剪切后放到自己这

*2 insertBefore(a, b);
这个函数一定需要父级调用 往父级里插入元素
即 insert a元素 before b元素 在b元素前插入a元素
注意一次只能插入一个
如

var div = document.getElementsByTagName(‘div’)[0];
var span = document.getElementsByTagName(‘span’)[0];
var i = document.createElement(‘i’);
div.insertBefore(i,span);
//因为选中的是第一个span元素
//插入后即为

删除节点

*1 parent.removeChild();
父节点删除子节点 会把删除的节点返回 相当于他杀
2 child.remove();
子节点删除自身 没有返回值 相当于自杀 es5.0新增的方法

替换

parent.replaceChild(new, origin);
用新的元素节点替换父节点中指定的子元素节点 并将被替换的元素节点返回
注意这里一次只能替换一个
如

var div = document.getElementsByTagName(‘div’)[0];
var span = document.getElementsByTagName(‘span’)[0];
var i = document.createElement(‘i’);
div.replaceChild(i,span);
//因为选中的是第一个span元素
//替换后即为