Dom终
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>创建li</title>
<script>
window.onload=function()
{
//获取按钮
var oBtn=document.getElementById('btn1');
//获取文本
var oTxt=document.getElementById('txt1');
//获取ul
var oUl=document.getElementById('ul1');
oBtn.onclick=function()
{
//在do里创建li
var oLi=document.createElement('li');
//文本框的值赋予oli
oLi.innerHTML=oTxt.value;
//父类添加子节点
oUl.appendChild(oLi);
//清空txt里的值
oTxt.value='';
}
}
</script>
</head> <body> <input id="txt1" type="text" />
<input id="btn1" type="button" value="创建Li"/>
<ul id="ul1">
<li>aaa</li>
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>父.insertBefore(子节点，谁之前)</title>
<script>
window.onload=function()
{
var oBtn=document.getElementById('btn1');
var oTxt=document.getElementById('txt1');
var oUl=document.getElementById('ul1'); oBtn.onclick=function()
{ //创建个li
var oLi=document.createElement('li');
//获取ul里的li
var aLi=oUl.getElementsByTagName('li');
//把otxt的值赋予oli
oLi.innerHTML=oTxt.value;
//插入到oul里ali[0]坐标之前；
oUl.insertBefore(oLi, aLi[0]);
oTxt.value='';
}
}
</script>
</head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>删除节点</title>
<script>
window.onload=function()
{
var aA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul1');
var i=0;
for(i=0; i<aA.length; i++)
{
//点击a标签执行函数
aA[i].onclick=function()
{
//删除oul的父级；
oUl.removeChild(this.parentNode);
}
}
}
</script>
</head> <body>
<ul id="ul1">
<li>sdfsdf <a href="javascript:;">删除</a></li>
<li>3432 <a href="javascript:;">删除</a></li>
<li>tttt <a href="javascript:;">删除</a></li>
<li>ww <a href="javascript:;">删除</a></li>
</ul>
document.createDocumentFragment
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试文档碎片</title>
<script>
window.onload=function()
{
var oBtn1=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oBtn2=document.getElementById('btn2');
oBtn1.onclick=function(){
//获取时间
var iStart=new Date().getTime();
var i=0;
for(i=0; i<10000; i++)
{ //创建个li
var oLi=document.createElement('li');
// 添加li到ul
oUl.appendChild(oLi);
}
//减去刚才使用时间
alert(new Date().getTime()-iStart);
}
oBtn2.onclick=function()
{
var iStart=new Date().getTime();
//创建文本对象片段
var oFrag=document.createDocumentFragment(); var i=0; for(i=0; i<10000; i++)
{
//利用文本碎片创建li
var oLi=document.createElement('li');
//添加到文本
oFrag.appendChild(oLi);
}
//获取当前时间减去程序开始时间
alert(new Date().getTime()-iStart);
}
}
</script>
</head> <body>
<input id="btn1" type="button" value="普通"/>
<input id="btn2" type="button" value="碎片">
<ul id="ul1">
</ul>
</body>
</html>
Dom终的更多相关文章
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- 在没有DOM操作的日子里，我是怎么熬过来的（终结篇）
前言 在我写终结篇的日子里,Vue版本稳定在2.9.1.当我摸清Vue的脉络之后,以一个爬坑无数的亲历者的身份,谈谈我在MVVM时代里遇到的那些事儿. 接下来,正文从这开始~ 好多童鞋学习Vue都有灯 ...
- jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
- jacascript DOM节点——节点关系与操作
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 节点关系 DOM可以将任何HTML描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...
- 纯CSS菜单样式，及其Shadow DOM，Json接口 实现
先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...
- BugPhobia终章篇章：学霸在线系统Beta阶段展示
0x00 :序言 1 universe, 9 planets, 204 countries,809 islands, 7 seas, and i had the privilege to meet y ...
- JavaScript高级程序设计学习笔记第十章--DOM
1.DOM:文档对象模型,是针对 HTML 和 XML 文档的一个 API(应用程序编程接口). 2.DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构. 3.文档节点是每个 ...
- HTML DOM 学习
HTML DOM 学习 By: Mirror王宇阳 E-mail:2821319009@qq.com 博客主页:https://www.cnblogs.com/wangyuyang1016/ DOM ...
- javascript之DOM(四其他类型)
一.Text类型 文本节点由Text类型表示,指的是可以以字面意思解释的纯文本内容,其中包含HTML代码. nodeType=3 nodeName=#text nodeValue=文本内容 paren ...
随机推荐
- CPU host-passthrough技术与应用
为了保证虚拟机在不同宿主机之间迁移的时候的兼容性,Libvirt对CPU提炼出标准的几种类型,在/usr/share/libvirt/cpu_map.xml中可以查到.cpu_map.xml不仅是CP ...
- css 常用代码解析
.cBan_1 .e2-pro li a{ display: block; -webkit-transition: all 0.3s linear;transition: all 0.3s linea ...
- git高级命令
git reflog 显示所有branch的commit,包括commit和reset,以及已删除的commit.而git log只显示当前branch的commit,不包括已删除的commit gi ...
- Python开发【第十八篇】：MySQL（二）
视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT * FROM ( SEL ...
- Yii 框架里数据库操作详解-[增加、查询、更新、删除的方法 'AR模式']
public function getMinLimit () { $sql = "..."; $result = yii::app()->db-& ...
- echarts X轴数据显示不全问题
很奇怪,X轴只显示了部分节点.没有显示全. 在xAxis上加上下面的配置就能解决: xAxis: [ { type: 'category', axisLabel :{ interval:0 }, // ...
- java在继承中父类的成员变量是否会被子类所覆盖
假如 父类 int num =7:子类 int num =9:父类是否会被子类所覆盖? 给你看两个例子: 第一个例子: 第二个例子: 这两个例子的区别只有一句话 由此证明了子类从父类继承的时候 ...
- oracle 中的trunc()函数及加一个月，一天，一小时，一分钟，一秒钟方法
返回处理后的数据,不同于round()(对数值进行四舍五入处理),该函数不对指定小数前或后的数值部分进行舍入处理. 语法:trunc(number[,decimals]) 其中,number为待做处理 ...
- 日常使用的shell脚本
1.shell实现无密码登陆 host=$ expect << EOF spawn ssh-copy-id $host expect "passw ...
- iOS开发关于Block代码错误
本文永久地址为http://www.cnblogs.com/ChenYilong/p/4052362.html ,转载请注明出处. iOS开发关于Block代码错误 Incompatible bloc ...