JavaScript 学习笔记(十二) dom


Posted in Javascript onJanuary 21, 2010

Dom
createElement()、createTextNode()、appendChild()、removeChild()、replaceChild()、insertBefore()、createDocumentFragment()
//创建新节点
function CreatNode() {
var oP = document.createElement("p");
oP.innerHTML = "<font style='color:red;'>Hello World!</font>";
document.body.appendChild(oP);
}

//删除节点
function RemoveNode() {
var oP = document.getElementsByTagName("p");
var len = oP.length;
if (len != 0) {
oP[len - 1].parentNode.removeChild(oP[len - 1]); //这里最好使用节点的parentNode特性来删除
}
else {
alert("已经全部删除!");
}
}
//替换节点
function ReplaceNode() {
var oNewP = document.createElement("p");
oNewP.innerHTML = "<font style='color:red;'>New --> Hello World!</font>";
//将最后一个新增的节点替换成oNewP
var len = document.getElementsByTagName("p").length;
var oOldLastP = document.getElementsByTagName("p")[len - 1];
oOldLastP.parentNode.replaceChild(oNewP, oOldLastP);
}
//insertBefore()方法
让新消息出现在旧消息之前,接受两个参数:
1.要添加的节点;2.插在哪个节点之前
xxx.parentNode.insertBefore(newChild, oldChild);
//createDocumentFragment()方法
创建文档碎片
可以把一些创建的十个新的节点元素都添加到文档碎片中,然后这个碎片作为参数传递给要添加碎片的appendChild()
xxx.appendChild(oFragment);
这样xxx只调用了一次来代替调用十次,提高性能。

Javascript 相关文章推荐
js的匿名函数使用介绍
Dec 11 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 Javascript
javascript parseInt与Number函数的区别
Jan 21 #Javascript
js parsefloat parseint 转换函数
Jan 21 #Javascript
jquery 防止表单重复提交代码
Jan 21 #Javascript
javascript 哈希表(hashtable)的简单实现
Jan 20 #Javascript
JS 对象介绍
Jan 20 #Javascript
JavaScript 学习笔记(十一)
Jan 19 #Javascript
9个JavaScript评级/投票插件
Jan 18 #Javascript
You might like
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
遭遇php的in_array低性能问题
2013/09/17 PHP
JavaScript 参考教程
2006/12/29 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
代码详解javascript模块加载器
2018/03/04 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python实现文件复制删除
2016/04/19 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
Python机器学习之决策树算法
2017/12/22 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
大学生优秀的自我评价分享
2013/10/22 职场文书
幼儿园庆六一游园活动方案
2014/01/29 职场文书
趣味游戏活动方案
2014/02/07 职场文书
求职自荐信怎么写
2014/03/06 职场文书
暑期培训随笔感言
2014/03/10 职场文书
党员三严三实心得体会
2014/10/13 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript