节点的操作

获取节点

获取节点的方法

getElementById
getElementByClassName
getElementByTagName
querySelector

---

getElementById

这个方法只能由document这个对象触发

var elm = document.getElementById(IDString);

注意：在操作的时候不要大规模添加ID,可以在一个模块的顶部等添加。

---

getElementsByClassName

var collection = [elm | document].getElementsByClassName(classes);

HTMLCollection—–拥有数组属性，却并不全等于数组的对象
live html collection—-不需要再一次获取原来的节点，有新增的会自动添加到HTMLCollection中

---

根据在文档树中出现的先后顺序进行解析获取
如果想单独获取其中某一个span元素则可以新增class以区别，如下图

---

getElementsByTagName

var collection = [elm | document].getElementsByTagName(Tag)

通常这个方法选用elm下去选择tag,而不用document对象调用

用法如下图

其中用*号将选择该元数据下的所有元素

---

querySelector

其中[All] 是可选的参数，代表当前元素对象或文档对象下的所有符合selector选择器的都返回，返回值是HTMLCollection，而querySelector则找到一个符合的就将返回指定的节点
上图中
var liLiveList = dom.getElementsByTagName(‘li’);
var liNotLiveList = dom.querySelectorAll(‘li’);
都将获得dom元素及对象下的li元素节点，但是一个是实时更新的，当节点树改变时会添加，一个却不是。

---

应用–兼容IE6

注意：getElementsByClassName()方法并不存在。

获取元素总结

getElementById
适合获取一个模块上的父节点或者一块区域的父节点
通常用getElementById获取一片区域的父节点，然后配合getElementsByClassName
获取拥有指定样式的元素

getElementsByClassName
getElementsByTagName
这两者有相似点，但是由于HTML文档的可变性比较大，比如通常我们都会使用div span等通用的元素写入新的HTML文档,会导致元素节点顺序变化。
所以建议使用getElementsClassName

querySelector
使用这个方法的时候建议不要使用太长的选择器来选择节点。

---

创建节点

通常在和后台交互以后会获取很多的JSON数据，这些数据需要反映到页面上，所以需要用createElement 和innerHTML反映到页面

createElement
innerHTML
两种方式

createElement

createElement是document对象上所唯一拥有的。
这个创造出来的节点元素并没有放入文档树，是存储在内存中，是还悬空的元素

---

innerHTML

element.innerHTML = HTMLString

应用总结

节点个数
createElement方式时需要要一个节点一个节点的创建
而innerHTML则能一个字符串就能完成创建

事件处理
用createElement方式添加的节点能马上为节点添加事件
而innerHTML不能立即为节点添加事件，只能通过在HTML里添加

两者的结合使用

插入节点

appendChild
insertBefore
insertAdjacentElement
insertAdjacentHTML

appendChild

添加元素到父元素的闭合标签前面。

---

例如下图

insertBefore

需要三个元素 父节点 待插入节点 待插入节点的兄弟节点

使用方法如下图

insertAdjacentElement

可以选择相应参照的节点的任意一个至四个位置插入

---

insertAdjacentHTML

这个和insertAdjacentElement 使用相似，不过是用字符串形式插入。
不太建议用这种方式插入节点

应用

实现兼容

修改节点

--innerHTML
--textContent(innerText)
textContent是W3C标准

innerHTML

万能的innerHTML

elm.innerHTML = '<img src="a.png"/>';
elm.innerHTML = '';
elm.innerHTML = '<ul><li></li><li></li><li></li></ul>';
elm.innerHTML += '<a href="http:www.163.com">网易</a>';

textContent

FF兼容

---

删除节点

--removeChild
--replaceChild
--innerHTML

removeChild

---

replaceChild

实际应用

replaceChild == removeChilde & appendChilde
删除一个节点的同时添加一个节点

注意：remove event :移除将要被删除节点的事件,避免内参的不断增加
elm.innerHTML = ‘’；