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 ...
随机推荐
- JS获取字符串实际长度(包含汉字)
方法一: var jmz = {}; jmz.GetLength = function(str) { ///<summary>获得字符串实际长度,中文2,英文1</summary&g ...
- Windows溢出提权小结
1. 查看系统打补丁情况:systeminfo 2. 查看KB-EXP表: KB2360937 MS10-084 KB2478960 MS11-014 KB2507938 MS11-056 KB2 ...
- jsp的标签
一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...
- CSS学习点滴
1.CSS :link 选择器 a:link { background-color:yellow;text-decoration:none } 参考:http://www.w3school.com.c ...
- Java并发编程核心方法与框架-CompletionService的使用
接口CompletionService的功能是以异步的方式一边生产新的任务,一边处理已完成任务的结果,这样可以将执行任务与处理任务分离.使用submit()执行任务,使用take取得已完成的任务,并按 ...
- MySQL索引之前缀索引和索引选择性
有时需要索引很长的字符列,它会使索引变大而且变慢.一个策略就是模拟哈希索引.但是有时这也不够好,那? 通常可以索引开始的几个字符,而不是全部值,以节约空间并得到好的性能.这使索引需要的空间变小,但是也 ...
- [CentOs]ip操作
摘要 在虚机里面安装好centos之后,需要知道centos的ip,方便以后连接时使用. 查看ip命令 命令 ifconfig 能查看到信息,说明已经配置过了,如果没配置过,可以通过下面的方式进行配置 ...
- [c#]RabbitMQ的简单使用
摘要 Message Queue消息队列,简称MQ,是一种应用程序对应用程序的通信方法,应用程序通过读写出入队列的消息来通信,而无需专用连接来链接它们.消息传递指的是程序之间通过在消息中发送数据进行通 ...
- ManualResetEvent详解
原文来自:http://www.cnblogs.com/tianzhiliang/archive/2011/03/04/1970726.html 1. 源码下载: 下载地址:http://files. ...
- linux下使用yum安装mysql
1. 安装mysql 服务器端: yum install mysql-server yum install mysql-devel 2. 安装mysql客户 ...