父级.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>
childNodes  nodeType
获取子节点
children  parentNode
例子：点击链接，隐藏整个li
offsetParent
例子：获取元素在页面上的实际位置
 
firstChild、firstElementChild、lastChild 、lastElementChild的使用
 <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应用的更多相关文章

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  4. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  5. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

  6. HTML DOM 对象

    本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...

  7. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  8. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. jQuery学习之路（2）-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

随机推荐

  1. 通过HTML条件注释判断IE版本的HTML语句详解<!--[if IE]> <![endif]-->

    我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请看下文: <!--[if ! ...

  2. 2016年度 JavaScript 展望（上）

    [编者按]本文作者为资深 Web 开发者 TJ VanToll, TJ 专注于移动端 Web 应用及其性能,是<jQuery UI 实践> 一书的作者. 本文系 OneAPM 工程师编译呈 ...

  3. login shell 和 non-login shell 的区别

    介绍之前先思考一个问题:有时我们通过su命令切换用户后,却发现并没有进入该用户的shell环境.这是为什么? login shell:取得bash时需要完整的登录流程.就是说通过输入账号和密码登录系统 ...

  4. Codeforces Round #336 (Div. 2)C. Chain Reaction DP

    C. Chain Reaction   There are n beacons located at distinct positions on a number line. The i-th bea ...

  5. odata

    http://www.odata.org/ Open Data Protocol (开放数据协议,OData)是用来查询和更新数据的一种Web协议,其提供了把存在于应用程序中的数据暴露出来的方式.OD ...

  6. web.xml文件中加载顺序的优先级

    在项目中总会遇到一些关于加载的优先级问题,近期也同样遇到过类似的,所以自己查找资料总结了下,下面有些是转载其他人的,毕竟人家写的不错,自己也就不重复造轮子了,只是略加点了自己的修饰. 首先可以肯定的是 ...

  7. mq_send

    NAME mq_send - 将消息发送到消息队列 (REALTIME) SYNOPSIS #include <mqueue.h>int mq_send(mqd_t mqdes, cons ...

  8. 《jQuery风暴》第2章 必须知道的JavaScript知识

    第2章 必须知道的JavaScript知识 JavaScript是jQuery应用的基础,掌握JavaScript这门语言是使用jQuery的基础条件.本章不会全面细致的讲解JavaScript的全部 ...

  9. QTreeWidget的一个例子，C++语法和item迭代循环都比较巧妙

    学习一下,据说QTreeWidget简单好用,不需要单独设置Model和View,更没有delegate.Signal和Slot应该可以正常使用(未验证,以后补充). #include <QtG ...

  10. [iOS]iPhone推送原理

    推送原理,先上图 说一下原理吧, 由App向iOS设备发送一个注册通知 iOS向APNs远程推送服务器发送App的Bundle Id和设备的UDID APNs根据设备的UDID和App的Bundle ...