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 函数的副作用分析
Aug 23 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 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
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
python列表去重的二种方法
2014/02/14 Python
Python 序列的方法总结
2016/10/18 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
Python多线程thread及模块使用实例
2020/04/28 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
自我评价如何写好?
2014/01/05 职场文书
工作检讨书500字
2014/10/19 职场文书
骨干教师事迹材料
2014/12/17 职场文书
入党介绍人考察意见
2015/06/01 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书