第六节 DOM操作应用
创建、插入和删除元素
创建DOM元素：
createElement(标签名); //创建一个节点
appendChild(节点); //追加一个节点 例如：document.body.appendChild(oDiv); //把div插入到body中，并且位于末尾
举例：为<ul>插入<li>，如上传文件时，即为创建一个DOM元素
var oBtn1=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt1');
//该点击事件相当于：点击第一次，新建一个标签；再点击，就会在其下面创建，一直点击，一直在最下面创建
oBtn.onclick=function () {
var oLi1=document.createElement('li'); //创建li标签
oLi1.innerHTML=oTxt.value; //输出li标签内的内容
oUl.appendChild(oLi1); //父级.appendChild(子节点); 在父级下创建子节点，每次创建的子节点都会往下排，第一次创建的在第一个位置，第二次创建的在第二个位置，依次类推
};
<input id="txt1" type="text"/>
<button id="btn1">创建li</button>
<ul id="ul1"></ul>
插入元素
insertBefore(节点, 原有节点); //在原有的元素前插入节点，即在原有的标签前插入标签
举例：倒序插入<li>
var oBtn2=document.getElementById('btn2');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt1');
//该点击事件相当于：点击第一次，在最上面新建一个标签，每次点击，都会在最上面创建标签
oBtn2.onclick=function () {
var oLi2=document.createElement('li'); //创建li标签
var aLi=oUl.getElementsByTagName('li');
oLi2.innerHTML=oTxt.value; //输出li标签内的内容
//oUl.insertBefore(oLi2, aLi[0]); //父级.insertBefore(子节点, 在谁之前); 即在第一个位置插入li标签
//注意：上面一句语句在IE浏览器中会报错，因为ul标签内原本什么都没有，所以也就不存在第一个aLi[0]，所以报错，此时的解决办法为
if (aLi.length>0){
oUl.insertBefore(oLi2, aLi[0]);
} else {
oUl.appendChild(oLi2);
}
};
<input id="txt1" type="text"/>
<button id="btn2">插入li</button>
<ul id="ul1"></ul>
删除DOM元素：
removeChild(节点); //删除一个节点
举例：删除<li>，如上传文件时，又不想上传了，此时的删除按钮，即为把原来创建的DOM元素，给删除掉
//删除子节点
var aA=document.getElementsByTagName('a');
var oUl3=document.getElementById('ul3'); for (var i=0; i<aA.length; i++){
aA[i].onclick=function () {
// alert(this.parentNode); //返回[object HTMLLIElement]，表示<a>的父级为<li>
oUl3.removeChild(this.parentNode); //父级.removeChild()
};
} <ul id="ul3">
<li>abcd<a href="javascript:;">删除</a></li>
<li>efg<a href="javascript:;">删除</a></li>
<li>hijk<a href="javascript:;">删除</a></li>
<li>lmn<a href="javascript:;">删除</a></li>
<li>opq<a href="javascript:;">删除</a></li>
<li>rst<a href="javascript:;">删除</a></li>
</ul>
查找DOM节点：getElementById()、getElementByTagName()
替换DOM节点：replaceChild(新标签, 原标签); //用新标签替换掉原有标签
var oSapn = document.createElement('span'); var oBox = document.getElementById('div'); document.body.replaceChild(oSpan, oBox);
新建、插入、删除综合实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.oli{width: 300px; height: 35px; color: #FFFFFF; background-color: #004488; margin-bottom: 1px; padding-left: 20px; line-height: 35px;}
a:link{color: #FFFFFF;}
a:hover{color: #ff0099;}
</style>
<script>
//方法一：这个要用事件代理，比较详细的解法如下： ————网友1
window.onload = function(){
var oul_b1 = document.getElementById('oul_1');
var oBat_a2 = document.getElementById('bat_a2'); oBat_a2.onclick = function(){
var oli_b1 = document.createElement('li');
var text_b2 = document.getElementById('text_a2');
oli_b1.innerHTML = text_b2.value + " <a href='javascript:;'>删除</a>";
oul_b1.appendChild(oli_b1);
//下面的代码是给添加的li加一个class样式
var calss_li = oul_b1.getElementsByTagName('li');
for(var i=0;i<calss_li.length;i++){
//alert(calss_li[1].innerHTML);
calss_li[i].className = 'oli';
}; //下面是删除添加的li，错误示范
// var del_li = document.getElementsByTagName('a');
// alert('dsaf');
// for(var j=0;j<del_li.length;j++){
// // alert(del_li.innerHTML);
// del_li[i].onclick = function(){
// // alert('ada');//测试
// oul_b1.removeChild(this.parentNode); //删除oul_b1的子节点
// };
// }
//错误原因：
//首先，添加完之后可以直接通过querySelector获取刚才添加的a标签
//这里循环是没必要的，而且你的循环会导致之前已经绑定过删除事件的元素又被绑一遍
//虽然没什么其他错，但却是无用功
oli_b1
.querySelector('a')
.addEventListener('click', function(){ //添加一个事件监听器
//然后就是这里的this指的是a标签，他的父节点才是li
//从ul里删除
oul_b1.removeChild(this.parentNode);
}, false);
};
}; //方法二：其实和方法一一样，而且优点是代码简化很多 ————网友2
window.onload=function(){
document.getElementById('bat_a2').onclick = function(){
var val = document.getElementById('text_a2').value;
var text = '<li class="oli">' + val + " <a href='javascript:;'>删除</a></li>";
document.getElementById("oul_1").insertAdjacentHTML('beforeEnd', text);
};
document.getElementById("oul_1").addEventListener("click", function(e) {
if (e.target && e.target.nodeName == "A") {
document.getElementById("oul_1").removeChild(e.target.parentNode);
}
});
};
</script>
</head>
<body>
<input type="text" value="" id="text_a2" />
<input type="button" value="添加LI" id="bat_a2" />
<ul id="oul_1"></ul>
</body>
</html>
getElementById('bat_a2').onclick = function(){ var val = document.getElementById('text_a2').value; var text = '<li class="oli">' + val + " <a href='javascript:;'>删除</a></li>"; document.getElementById("oul_1").insertAdjacentHTML('beforeEnd', text); }; document.getElementById("oul_1").addEventListener("click", function(e) { if (e.target && e.target.nodeName == "A") { document.getElementById("oul_1").removeChild(e.target.parentNode); } }); }; </script> </head> <body> <input type="text" value="" id="text_a2" /> <input type="button" value="添加LI" id="bat_a2" /> <ul id="oul_1"></ul> </body></html>
文档碎片：
文档碎片可以提高DOM操作性能（理论上）
文档碎片的原理
document.createDocumentFragment(); //基本已经不再使用了
需要说明的是：如果是在IE9及以上、FF、Chrome等高级浏览器中运行时，文档碎片其实几乎没有提高什么性能，有时还会拖延性能，但是在IE6-8等低级浏览器中文档碎片确实能相对提高那么一些性能。
window.onload=function(){
var oUl=document.getElementById('ul1');
var oFrag=document.createDocumentFragment();
for (var i=0; i<; i++){ //一次插入10000个标签
var oLi=document.createElement('li');
// oUl.appendChild(oLi); //相当于下面两句oFrag.appendChild(oLi);和oUl.appendChild(oFrag);
oFrag.appendChild(oLi);
}
oUl.appendChild(oFrag);
};
<ul id="ul1"></ul>
第六节 DOM操作应用的更多相关文章
- 迷你MVVM框架 avalonjs 沉思录 第2节 DOM操作的三大问题
jQuery之所以击败Prototype.js,是因为它自一开始就了解这三大问题,并提出完善的解决方案. 第一个问题,DOM什么时候可用.JS不像C那样有一个main函数,里面的逻辑不分主次.但JS是 ...
- 第七节 DOM操作应用-高级
表格应用: 获取:tBodies.tHead.tFoot.rows.cells <!DOCTYPE html> <html lang="en"> <h ...
- 认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法
(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...
- 第一百一十六节，JavaScript，DOM操作样式
JavaScript,DOM操作样式 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
- 第一百二十六节，JavaScript，XPath操作xml节点
第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...
- 第三百七十六节，Django+Xadmin打造上线标准的在线教育平台—创建用户操作app，在models.py文件生成5张表，用户咨询表、课程评论表、用户收藏表、用户消息表、用户学习表
第三百七十六节,Django+Xadmin打造上线标准的在线教育平台—创建用户操作app,在models.py文件生成5张表,用户咨询表.课程评论表.用户收藏表.用户消息表.用户学习表 创建名称为ap ...
- 第二百九十六节，python操作redis缓存-Hash哈希类型，可以理解为字典类型
第二百九十六节,python操作redis缓存-Hash哈希类型,可以理解为字典类型 Hash操作,redis中Hash在内存中的存储格式如下图: hset(name, key, value)name ...
- ASP.NET MVC深入浅出（被替换） 第一节: 结合EF的本地缓存属性来介绍【EF增删改操作】的几种形式 第三节: EF调用普通SQL语句的两类封装（ExecuteSqlCommand和SqlQuery ) 第四节: EF调用存储过程的通用写法和DBFirst模式子类调用的特有写法 第六节: EF高级属性(二) 之延迟加载、立即加载、显示加载(含导航属性) 第十节: EF的三种追踪
ASP.NET MVC深入浅出(被替换) 一. 谈情怀-ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态 ...
- 第一百一十五节，JavaScript，DOM操作表格
JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...
随机推荐
- 2单一职责原则SRP
一.什么是单一职责原则 单一职责原则(Single Responsibility Principle ): 就一个类而言,应该仅有一个引起它变化的 原因. 二.多功能的山寨手机 山寨手机的功能: 拍照 ...
- JS 使用const声明常量的本质（很多人都有误解）
在我们使用const声明常量时,总认为值一旦声明就不可改变,其实是有误解的: 刚在看ES6标准文档时,仔细阅读了const的解析,恍然大悟的感觉,分享给大家. 本质 const实际上保证的,并不是变量 ...
- 删除JS 对象属性（元素）
var a={"id":1,"name":"danlis"}; //添加属性 a.age=18; console.log(a); //结果: ...
- 用lua编写wireshark插件分析自己定义的协议
参见: https://yoursunny.com/study/IS409/ScoreBoard.htm https://wiki.wireshark.org/LuaAPI/TreeItem http ...
- Linux ReviewBoard安装与配置
目录 0. 引言 1. 安装步骤 2. 配置站点 2.1 创建数据库 2.2 开始安装 2.3 修改文件访问权限 2.4 Web服务器配置 2.5 修改django相关配置 正文 回到顶部 0. 引言 ...
- pandas pivot_table或者groupby实现sql 中的count distinct 功能
pandas pivot_table或者groupby实现sql 中的count distinct 功能 import pandas as pd import numpy as np data = p ...
- 配置非安装版tomcat服务
1.设置服务名称,进入tomcat目录/bin文件夹,编辑service.bat中的 set SERVICE_NAME = (修改成你需要的服务名,这个将是你启动服务的句柄): 2.修改 set PR ...
- ubuntu git的安装更新及配置
安装及配置 参考地址:http://blog.csdn.net/qq_26990831/article/details/51857399 1.git 安装 sudo apt-get install g ...
- 【漏洞复现】Tomcat CVE-2017-12615 远程代码执行漏洞
漏洞描述 [漏洞预警]Tomcat CVE-2017-12615远程代码执行漏洞/CVE-2017-12616信息泄漏 https://www.secfree.com/article-395.html ...
- 用TreeSet生成不重复自动排序随机数组
随机数组就是在指定长度的数组中用随机数字为每个元素赋值,常用于不确定数值的环境,如拼图游戏需要随机数组来打乱图片顺序.可是同时也存在问题,就是随机数的重复问题,这个问题常常被忽略. TreeSet类的 ...