DOM应用
父级.removeChild(子节点);
父级.appendChild(子节点);
父级.insertBefore(子节点, 在谁之前);
创建元素：
<script>
window.onload = function(){
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt1'); oBtn.onclick=function (){
var oli = document.createElement('li');
var ali = document.getElementsByTagName('li'); oli.innerHTML = oTxt.value;
if(ali.length>0){
oUl.insertBefore(oli, ali[0]);
}else{
oUl.appendChild(oli);
}
}
}
</script>
</head> <body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="创建li"/>
<ul id="ul1">
</ul>
</body>
文档碎片的使用：
<script>
window.onload=function ()
{
var oUl=document.getElementById('ul1');
var oFrag=document.createDocumentFragment(); for(var i=0;i<10000;i++)
{
var oLi = document.createElement('li'); oFrag.appendChild(oLi);
} oUl.appendChild(oFrag);
}; </script>
</head> <body>
<ul id="ul1">
</ul>
<script>
window.onload=function ()
{
var oUl=document.getElementById('ul1'); //IE6-8
//oUl.firstChild.style.background='red'; //高级浏览器
//oUl.firstElementChild.style.background='red'; if(oUl.firstElementChild)
{
oUl.firstElementChild.style.background='red';
}
else
{
oUl.firstChild.style.background='red';
}
};
</script>
</head> <body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
DOM应用的更多相关文章
- 关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 页面嵌入dom与被嵌入iframe的攻防
1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...
- 通俗易懂的来讲讲DOM
DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...
- HTML DOM 介绍
本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...
- HTML DOM 对象
本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...
- 重撸js_2_基础dom操作
1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...
- 虚拟dom与diff算法 分析
好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- jQuery学习之路（2）-DOM操作
▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...
随机推荐
- Unity使用外部版本控制SVN
原地址:http://www.cnblogs.com/realtimepixels/p/3652146.html Using External Version Control Systems with ...
- PHP READ PPT FILE
function parsePPT($filename) { // This approach uses detection of the string "chr(0f).Hex_value ...
- 如何说服你的老板必须使用APM？
APM研究院 2015/04/24 16:56 2013年,某权威机构提供一组数据显示:亚马逊每100毫秒延迟会使销售额下降1%:雅虎一秒钟服务器延迟导致收入下降2.8%:谷歌搜索结果页面放缓100毫 ...
- POJ 3243 Clever Y （求解高次同余方程A^x=B(mod C) Baby Step Giant Step算法）
不理解Baby Step Giant Step算法,请戳: http://www.cnblogs.com/chenxiwenruo/p/3554885.html #include <iostre ...
- POJ 3114 Countries in War（强联通分量+Tarjan）
题目链接 题意 : 给你两个城市让你求最短距离,如果两个城市位于同一强连通分量中那距离为0. 思路 :强连通分量缩点之后,求最短路.以前写过,总感觉记忆不深,这次自己敲完再写了一遍. #include ...
- ExtJs之Ext.isEmpty
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...
- 由CAST()函数在.NET1.1和.NET4.0下处理机制不同所引发的BUG
.NET 1.1版本下使用日期强制转换函数,比如:"select cast(ActionDate as char(7)) as ActionDate from ST_BookAction ...
- ArrayList，LinkedList，Vector，Stack之间的区别
一,线程安全性 Vector.Stack:线程安全 ArrayList.LinkedList:非线程安全 二,实现方式 LinkedList:双向链表 ArrayList,Vector,Stack:数 ...
- 李洪强漫谈iOS开发[C语言-004]-开发概述程序设计语言程序编译过程
汇编语言 指令用特定的名字来标记,这就是汇编语言 人比较容易看懂汇编语言 汇编直接和程序一一对应的 有汇编器把程序翻译成机器码 把高级语言编译成计算机识别的语言 程序编译过程 命令行 UNIX 系统中 ...
- 2011 ACM/ICPC 成都赛区（为2013/10/20成都现场赛Fighting）
hdu 4111 Alice and Bob 博弈:http://www.cnblogs.com/XDJjy/p/3350014.html hdu 4112 Break the Chocolate ...