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 ...
随机推荐
- Python之路【第十二篇续】jQuery案例详解
jQuery 1.jQuery和JS和HTML的关系 首先了HTML是实际展示在用户面前的用户可以直接体验到的,JS是操作HTML的他能改变HTML实际展示给用户的效果! 首先了解JS是一门语言,他是 ...
- Mysql表分区几种方式
自5.1开始对分区(Partition)有支持,一张表最多1024个分区 查询分区数据: SELECT * from table PARTITION(p0) = 水平分区(根据列属性按行分)= 举个简 ...
- LVS简介
LVS 编辑 LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.本项目在1998年5月由章文嵩博士成立,是中国国内最早出现的自由软件项目之一 ...
- mongodb 基本用法大全
1>给数据库添加用户名密码 db.addUser("xxx","yyy") 2>
- sql server 得到数据库字典
SELECT 表名=case when a.colorder=1 then d.name else '' end, 表说明=case when a. ...
- hdu4920 Matrix multiplication 模3矩阵乘法
hdu4920 Matrix multiplication Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131072/131072 ...
- 优化 PHP 代码建议
1.如果能将类的方法定义成static,就尽量定义成static,它的速度会提升将近4倍.2.$row[’id’] 的速度是$row[id]的7倍.3.echo 比 print 快,并且使用echo的 ...
- ThinkPHP3.2对接开发支付宝即时到帐接口
ThinkPHP3.2对接开发支付宝即时到帐接口 在做一些商城.自动发卡网站.会员积分充值.金币充值等等这类网站都时候,我们极大可能需要使用到第三方都支付接口.不管是财付通.支付宝.银联.贝宝.易宝这 ...
- Sublime Text3
Sublime Text3 激活码: ----- BEGIN LICENSE ----- Andrew Weber Single User License EA7E- 813A03DD 5E4AD9E ...
- C#中的抽象方法和虚方法有什么区别？
抽象方法是只有定义.没有实际方法体的函数,它只能在抽象函数中出现,并且在子类中必须重写:虚方法则有自己的函数体,已经提供了函数实现,但是允许在子类中重写或覆盖.重写的子类虚函数就是被覆盖了.