DOM编程-节点操作(二)
来源:互联网 发布:软件项目管理方法 编辑:程序博客网 时间:2024/06/10 03:09
一段范例用代码
<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]; //用户XXXusers.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方法建议仅用于新的节点,比如创建插入,内容最好是可控的,而不是用户填写的内容。
- DOM编程-节点操作(二)
- DOM编程-节点操作(一)
- JavaScript DOM总结(二、节点操作)
- Jquery中的DOM操作 (二.插入节点)
- JS的DOM(二)节点操作
- JS-DOM(二)_操作节点
- DOM编程艺术(节点操作)
- 轻松学习JavaScript二十二:DOM编程学习之节点操作
- DOM(二)DOM节点关系与操作
- jQuery基础教程之DOM操作-节点操作函数(二)
- dom 二 节点信息
- Ajax操作Dom的基础--节点的添加(二)
- DOM基础——节点操作(二)
- JS——DOM小结(二)操作节点
- DOM节点操作
- js操作dom节点
- dom节点操作1
- Jquery操作DOM节点
- 堆的使用,自己确定数组的大小和值,然后求和
- DOM编程-节点操作(一)
- Javascript中获取数组最大值和最小值以及最大值和最小值的下标 没学对象前的最简单最基本的方法
- 归档、压缩
- VMware ESXi 体系结构探索
- DOM编程-节点操作(二)
- STL中map用法详解
- Linux中硬链接和软连接的介绍
- css
- H.265的帧间预测
- mysql二进制包安装
- java线程池深入二
- CentOS之SSH的安装与连接-yellowcong
- 建造第一个Tensorflow在Android上的用例