父级.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&#160;DOM到底是个什么鬼？
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
-
jQuery学习之路（2）-DOM操作
▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...
随机推荐
-
2016-1-1最新版本的linphone-android在mac上编译通过，同时建立了IDEA工程
虽然参考了这个文章<MAC OS编译Android版Linphone SDK和APP>,https://www.lidaren.com/archives/1592 ,但是在实际的编译过程中 ...
-
PSP记录表
学生 崔乐乐 日期 2015/3/15 教师 王建民 课程 软件工程 周活动总结表 任务 日期 听课 写程序 ...
-
bzoj 3632: 外太空旅行 最大团
3632: 外太空旅行 Time Limit: 5 Sec Memory Limit: 128 MBSubmit: 389 Solved: 129[Submit][Status] Descript ...
-
从此走上一条iOS程序猿不归路。。。
新的城市,新的生活!前不久刚刚结束了苦逼的面试找工作之旅,期间也小有收货,如今正处年底工作闲暇之余,将前一阵子陆陆续续的总结整理了一下,本人菜鸟程序猿一只,水平有限,本文总结的知识不算深入,比较浅显, ...
-
[Android]Volley源代码分析(店)应用
通过前面的谈话,我相信你有Volley有了一定的了解了原理.本章将给出一些我们的应用程序都可以在样品中直接使用,第一样品是 NetworkImageView类,事实上NetworkImageView顾 ...
-
Scala内部类
注意:Java内部类从属于外部类,而Scala内部类从属于对象(外部类的实例本身).
-
SignalR实现消息推送，包括私聊、群聊、在线所有人接收消息（源码）
一.关于SignalR 1.简介:Signal 是微软支持的一个运行在 Dot NET 平台上的 html websocket 框架.它出现的主要目的是实现服务器主动推送(Push)消息到客户端页面, ...
-
[HNOI2011]XOR和路径
题面在这里 题意:给定一个无向图,从1号节点出发,每次等概率选择连接该节点的一条边走到另一个节点,到达n号节点时,将走过的路径上的所有边权异或起来,求这个异或和的期望 sol 一道期望大火题(表示看了 ...
-
Mycat 分片规则详解--应用指定分片
实现方式:根据字符串的子串(必须是数字)计算分区号(由调用方传递参数,显示指定分区号),例如,id=05-12232323,其中 id 是从 startIndex = 0,size=2,即截取的子串是 ...
- MySQL数据查询子查询语句