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 ...
随机推荐
- C++ 以费波纳茨数列为权重的加权均值计算方法 wMA
#pragma once #include <iostream> using namespace std; template <typename T> double *wMA( ...
- Comet、SSE、技术
1.概念: 利用长时间保留的HTTP请求(‘挂起的GET’)来让服务器向浏览器推送数据的技术,经常被称为Comet. SSE让服务器可以向客户端流式发送文本消息,比如服务器上生成的实时通知或更新.
- canvas入门（画圆）
1.想在H5上画一个canvas,必须在页面上你需要的地方添加canvas标签, <canvas id="myCanvas"></canvas> 接着需 ...
- json 是个什么东西？
JSONP原理 JSONP(JSON with Padding),就是异步请求跨域的服务器端时,不是直接返回数据,而是返回一个js方法,把数据作为参数传过来.如果只是跨域传递数据那么这种方式是比较好的 ...
- js 字符串分割成字符串数组 遍历数组插入指定DOM里 原生JS效果
使用的TP3.2 JS字符串分割成字符串数组 var images='{$content.pictureurl} ' ;结构是这样 attachment/picture/uploadify/20141 ...
- C# Emit动态代理生成一个实体对象
/// <summary> /// 使用Emit动态代理收集实体信息 /// </summary> /// <typeparam name="T"&g ...
- c# 多线程 --Mutex（互斥锁）
互斥锁(Mutex) 互斥锁是一个互斥的同步对象,意味着同一时间有且仅有一个线程可以获取它. 互斥锁可适用于一个共享资源每次只能被一个线程访问的情况 函数: //创建一个处于未获取状态的互斥锁 Pub ...
- 如何配置virtualBox端口转发
1,第一步登陆虚拟主机,安装openssh-server(这一步非常重要,如果不安装,你在宿主机上怎么链接都是连不上的,我当时就犯了这个错误) apt-get install openssh-serv ...
- django学习<二>：连接数据库
发现假如没有很迫切的实际需求或者外界的压力的话,我这种人就很容易偷懒,之前看了一篇比较权威的谈django的文章,里面列举支持的数据库只有四种, 可是我熟悉的数据库只有sqlserver,然后就又怠工 ...
- 给Storyboard设置初始页面（Initial Controller）
原文:https://developer.apple.com/library/ios/recipes/xcode_help-IB_storyboard/Chapters/SetInitialContr ...