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 相关文章推荐
jQuery对表单元素的取值和赋值操作代码
May 19 Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 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
使用 php4 加速 web 传输
2006/10/09 PHP
PHP 开源AJAX框架14种
2009/08/24 PHP
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
对python中UDP,socket的使用详解
2019/08/22 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
设计部经理的岗位职责
2013/11/16 职场文书
2014年党支部承诺书
2014/05/30 职场文书
质量整改报告范文
2014/11/08 职场文书
质量保证书格式模板
2015/02/27 职场文书
安全教育的主题班会
2015/08/13 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏