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 相关文章推荐
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
Vue动态实现评分效果
May 24 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
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
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
JS关键字变色实现思路及代码
2013/02/21 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
angularjs基础教程
2014/12/25 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
JavaScript File分段上传
2016/03/10 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
Python中Collection的使用小技巧
2014/08/18 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
python实现中文转换url编码的方法
2016/06/14 Python
python监控键盘输入实例代码
2018/02/09 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
Python常见数据类型转换操作示例
2019/05/08 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
python3中for循环踩过的坑记录
2020/12/14 Python
社区安全检查制度
2014/02/03 职场文书
情人节寄语大全
2014/04/11 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
大班幼儿评语大全
2014/04/30 职场文书
工商行政处罚决定书
2015/06/24 职场文书
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏
python解析json数据
2022/04/29 Python
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS