DOM编程-节点操作(二)

一段范例用代码

<div id="users">
    <h2>学习</h2>
    <ul>
        <li class="user">
            <img src="1.jpg" >
            <a href="/user/1">小明</a>
        </li>
        <li class="user">
            <img src="2.jpg" >
            <a href="/user/2">青草</a>
        </li>
        <li class="user last">
            <img src="3.jpg" >
            <a href="/user/3">XXX</a>
        </li>
    </ul>
</div>

一个需求

我们要在上面的users列表中插入一个新的用户我们要进行以下操作
+ 创建li节点，设置li节点的class属性，插入li节点
+ 创建img节点，设置节点的src属性，插入img节点
+ 创建a节点，设置a节点的href属性，设置a节点的内容，插入a节点

创建节点

element = document.createElement(tagName)
比如document.createElement("div");这样我们就得到了空的div
针对上面的需求，可以写下如下代码

var li = document.createElement("li");
var img = document.createElement("li");
var a = document.createElement("a");

修改节点

针对于上面的填充a的内容，我们使用修改节点操作
* textContent
* innerText(不符合W3C规范)

element.textContent

节点及其后代节点的文本内容，比如在上面的示例代码中当我们使用users.textContent;我们得到的就是其中所有的文本”学习 小明 青草 XXX”
比如当我们用user-last选中最后一个user后我们可以直接用user-last.textElemrnt = YYY来修改最后一个user的文本内容

element.innerText

这个方法是更被广泛使用的，因为element.textContent不兼容IE9以下浏览器。innerText的使用方法和textContent相同。
问题：ff不支持（火狐浏览器）
解决方案：

if(!('innerText' in document.body)){
    HTMLElement.prototype._defineGetter_("innerText",function(){
        return this.textContent;
    });
    HTNLElement.prototype._defingSetter_("innerText",function(s){
        return this.textContent = s;
    });
}

有了这样的兼容性代码，innerText就可以兼容所有的平台
针对上面的需求，可以写下如下代码

var li = document.createElement("li");
var img = document.createElement("li");
var a = document.createElement("a");
a.innerText = "YYY";

插入节点

插入节点有两个方法：
* appendChild
* insertBefore

appendChild

var achild = element.appendChild(achild);
在节点的最后追加子节点，所以是在用这个的方法的时候要注意是否的顺序有要求。
针对上面的需求，可以写下如下代码

var ul = users.getElementByTagName("ul")[0];
var li = document.createElement("li");
ul.appendChild("li");
var img = document.createElement("li");
li.appendChild("img");
var a = document.createElement("a");
a.innerText = "YYY";
li.appendChild("a");

insertBefore

如果我们想把新的li插入到ul的第一位，我们可以用这个方法
var achild = element.insertBefore(achild,referenceChild);在指定的referenceChild节点前面插入节点。
针对上面的需求，可以写下如下代码

var ul = users.getElementByTagName("ul")[0];
var li = document.createElement("li");
ul.insertBefoe(li,ul.firstChild);         //实现在最前插入
var img = document.createElement("li");
li.appendChild("img");
var a = document.createElement("a");
a.innerText = "YYY";
li.appendChild("a");

删除节点

child = element.removeChild(child);这样就删除了指定的子元素；

var user3 = users.getElementsByClassName('user')[1]; //用户XXX
users.removeChild(user2);                            //删除了用户XXX

innerHTML

这个方法得到的是节点的html内容，同时我们可以直接对HTML代码进行编辑来达到创建插入删除等功能。

var li = dovument.createElement("li");
li.className = 'user';
ul.appendChild(li);
li.innerHTML = "<img src = '4.jpg'>\
                <a href = '/user/4/'>ZZZ</a>";

这样就直接完成饿了创建插入。

既然innerHTML功能呢这么强大，那么他有什么问题呢?
* 内存泄露，在低版本中可能不能回收内存
* 安全问题，innerHTML不会检查代码，直接运行，会有风险

所以innerHTML方法建议仅用于新的节点，比如创建插入，内容最好是可控的，而不是用户填写的内容。