前面有讲过一些DOM的基本概念。

今天来说一下DOM 的一些基本操作，主要有创建节点，追加节点，删除节点。

1.创建DOM元素：

createElement(标签名) —— 创建一个节点

appendChild(节点) —— 追加一个节点

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>DOM 操作</title>

        <script type="text/javascript">

            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');

                    oLi.innerHTML = oTxt.value;

                    oUl.appendChild(oLi);

                }

            }

        </script>

    </head>

    <body>

        <input type="text" id="txt1" />

        <input type="button" name="btn1" id="btn1" value="创建li" />

        <ul id="ul1"></ul>

    </body>

</html>

2.插入元素：

insertBefore(节点, 原有节点) —— 在已有元素前插入

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>DOM 操作</title>

        <script type="text/javascript">

            window.onload = function(){

                var oBtn = document.getElementById("btn1");

                var oUl = document.getElementById("ul1");

                var oTxt = document.getElementById("txt1");

                var aLi = document.getElementsByTagName("li");

                oBtn.onclick = function(){

                    var oLi = document.createElement('li');

                    oLi.innerHTML = oTxt.value;

                    if(aLi.length > 0){

                        oUl.insertBefore(oLi, aLi[0]);

                    }else{

                        oUl.appendChild(oLi);

                    }

                }

            }

        </script>

    </head>

    <body>

        <input type="text" id="txt1" />

        <input type="button" name="btn1" id="btn1" value="创建li" />

        <ul id="ul1"></ul>

    </body>

</html>

3.删除节点：

removeChild(节点)  —— 删除一个节点

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>DOM 操作</title>

        <script type="text/javascript">

            window.onload = function(){

                //删除节点

                var oUl = document.getElementById("ul1");

                var aA = document.getElementsByTagName("a");

                for(var i=0;i<aA.length;i++){

                    aA[i].onclick = function(){

                        oUl.removeChild(this.parentNode);

                    }

                }

            }

        </script>

    </head>

    <body>

        <ul id="ul1">

            <li>第一条 <a href="javascript:;">删除</a></li>

            <li>第二条 <a href="javascript:;">删除</a></li>

            <li>第三条 <a href="javascript:;">删除</a></li>

        </ul>

    </body>

</html>

4.文档碎片（只能提升低级浏览器的性能，稍作了解即可）：

createDocumentFragment

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>文档碎片</title>

        <script type="text/javascript">

            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>

    </body>

</html>

js学习笔记33----DOM操作的更多相关文章

  1. jQuery学习笔记之DOM操作、事件绑定（2）

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  2. jQuery学习笔记（DOM操作）

    DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...

  3. js学习笔记2---HTML属性操作

    1.HTML属性操作:读.写 属性名 属性值   2.属性读操作:获取.找到 a) 语法:元素.属性名 如:document.getElementById(“btn”).value; b) 字符串的连 ...

  4. js学习笔记9----时间操作

    1.时间操作函数如下: new Date();   //获取系统时间 getFullYear(); //年 getMonth()+1; //月,初始值为0 getDate(); //日 getDay( ...

  5. js学习笔记21----表格操作

    1.获取表格元素: tHead : 表格头 tBody : 表格主体内容 tFoot : 表格尾 rows  : 表格行 cells  : 表格列 如获取表格第一行第一列的数据: <script ...

  6. js学习笔记11----表单操作

    1.复选框选中 var aInput = document.getElementsByTagname('input'); aInput[0].checked=true;

  7. js学习笔记--dom部分(一)

    js 学习整理之Dom部分 前面我总结了我最近学习js基础部分,当时提到过js分了三大部分,第一部分ECMA基础也就是第一次写的基础部分, 第二部分也就是DOM部分,也就是这里要写的内容的,然后第三部 ...

  8. JS学习笔记5_DOM

    1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...

  9. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  10. 【转】Backbone.js学习笔记（二）细说MVC

    文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

随机推荐

  1. ZOJ 1654 Place the Robots建图思维（分块思想）+二分匹配

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=654 AC一百道水题,不如AC一道难题来的舒服. 题意:一个n*m地图 ...

  2. Spark Core Runtime分析: DAGScheduler, TaskScheduler, SchedulerBackend

    Spark Runtime里的主要层次分析,梳理Runtime组件和运行流程, DAGScheduler Job=多个stage,Stage=多个同种task, Task分为ShuffleMapTas ...

  3. DNS与NS、NS记录

    DNS:人们习惯记忆域名,但机器间互相只认IP地址,域名与IP地址之间是一一对应的,它们之间的转换工作称为域名解析,域名解析需要由专门的域名解析服务器来完成,整个过程是自动进行的. 当你的网站制作完成 ...

  4. PHP通过__call实现简单的AOP(主事务后的其他操作)比如前置通知,后置通知

    /** * person class */ class Person { /** * person class -> function say */ public static function ...

  5. unity update与fixedUpdate

    update与渲染同步.fixedUpdate与物理同步. 在update中,speed要乘以Time.deltaTime.在fixedUpdate中,speed要乘以Time.fixedDeltaT ...

  6. string.format的用途联想

    还有IFormattable,感觉这辈子都用不到.. 设想了一个物品简介界面 分别是Title,分割线,内容. "{0:Red} \n {1:S1} \n 简介 \n {2:Green}&q ...

  7. .NET执行SQL插入时间的问题

    错误描述: 一个项目,源码是BOSS给的,部署到网上了,运行没有问题,可是在本地运行,就会有问题,问题在于往一些表插入记录的时候,本地不管怎么样都插入不了,而网上就可以插入,都是相同的一份代码 解决: ...

  8. 关于DDR3非常棒的文章

    xilinx平台DDR3设计教程之仿真篇   http://wenku.baidu.com/view/c452d9a5524de518964b7dca.html?pn=50

  9. 用node-inspector调试NodeJS

    任何一门完备的语言技术栈都少不了健壮的调试工具,对于NodeJS平台同样如此,笔者研究了几种调试NodeJS代码的方式,通过对比,还是觉得node-inspector的调试方式比较方便,而且和前端Ja ...

  10. Django 自带密码加密，自定密码加密方式 及自定义验证方式

    在django1.6中,默认的加密方式是pbkdf_sha256,具体算法不表,一直以来用django的自带用户验证都十分顺手,今天有需求,需要修改默认加密方式为md5,具体方法为: 在setting ...