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操作 看 ...
随机推荐
- SOA之（2）——SOA架构基础概念与设计框架
SOA的设计框架 设计框架与架构相关的概念紧密相连,原则.模式和架构始终是与设计共舞的. SOA服务设计的原则中记录了一个基础的设计框架: 设计特性(Design Characteristic)——由 ...
- MariaDB集群Galera Cluster的研究与测试
MariaDB集群Galera Cluster的研究与测试 Galera Cluster是MariaDB的一个双活多主集群,其可以使得MariDB的所有节点保持同步,Galera为MariaDB提供了 ...
- Jmeter测试Mysql
一.在测试计划下,找到Add directory or jar to classpath下填入jdbc驱动路径. 二.新建线程组. 三.在线程组下,添加配置元件—JDBC Connection Con ...
- MySQL 数据库存储引擎
简单介绍 存储引擎就是指表的类型.数据库的存储引擎决定了表在计算机中的存储方式.存储引擎的概念是MySQl的特点,而且是一个插入式的存储引擎概念.这就决定了MySQl数据库中的表可以使用不同的存储方式 ...
- 浅说Java中的反射机制(二)
写过一篇Java中的反射机制,不算是写,应该是抄了,因为那是别人写的,这一篇也是别人写的,摘抄如下: 引自于Java基础--反射机制的知识点梳理,作者醉眼识朦胧.(()为我手记) 什么是反射? 正常编 ...
- Java：内部类
1.内部类的定义: 一个内部类可以定义在另一个类里,可以定义在函数里,甚至可以作为一个表达式的一部分. 2.内部类的分类: Java中的内部类共分为四种: 成员内部类member inner clas ...
- 【PSR规范专题(2)】PSR-1 基本代码规范
转载自: https://github.com/PizzaLiu/PHP-FIG/blob/master/PSR-1-basic-coding-standard-cn.md 基本代码规范 本篇规范制定 ...
- Java学习笔记之：Java 定时任务
一.介绍 在应用里经常都有用到在后台跑定时任务的需求.比如网络运营商会在每个月的一号对数据进行一次统计.在java中我们可以继承timertask类来实现定时任务. 二.笔记 /** * 定时任务 * ...
- iOS NSPredicate和正则表达式
简述:Cocoa 提供了NSPredicate 用于指定过滤条件,谓词是指在计算机中表示计算真假值的函数,它使用起来有点儿像SQL 的查询条件,主要用于从集合中分拣出符合条件的对象,也可以用于字符串的 ...
- [iOS]为什么不要在init初始化方法里调用self.view
首先.如果你调用self.view的时候,就会调用view的getter方法, 这个时候,view是空的,那么系统就会自动给你创建一个view,然后就会触发ViewDidLoad方法.那么这个时候,如 ...