前面有讲过一些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. PowerDesigner删除外键关系,而不删除外键列[转]

    PowerDesigner中配置外键关系时,如果要删除配置的外键关系,默认设置会一同删除外键列. 要更改此设置,需在菜单栏tools中打开Model Options,在Model Settings中点 ...

  2. 非IE内核浏览器如何支持activex插件

    原文地址:https://blog.csdn.net/johnson2008t/article/details/46126605 之前在一个B/S项目中遇到一个需求,就是客户需要在页面上对报表的布局以 ...

  3. 【jQuery】页面顶部显示的进度条效果

    <!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta htt ...

  4. OpenXml读取word内容注意事项

    OpenXml读取word内容注意事项 1.使用OpenXml读取word内容,word后缀必须是".docx":如果word后缀是".doc"需要转成&quo ...

  5. Python练习笔记——利用递归求年龄，第五个比第四个大2岁...

    现在有五个人, 第五个人比第四个人大两岁,18 第四个人比第三个人大两岁,16 第三个人比第二个人大两岁,14 第二个人比第一个人大两岁,12 第一个人现10岁,                 10 ...

  6. 控件不响应OnMouseMove

    原文链接: http://bbs.csdn.net/topics/370017205 问:我继承CStatic写了个CStaticEx,设为Rectangle类型,用来画图.把这个控件添加到了一个Vi ...

  7. 64位win8.1系统安装intelhaxm

    加快安卓模拟器的启动速度,需要装intelhaxm,以前win8时直接双击网上下载的exe文件就安装得了,但是win8.1的时候双击了总提示说是vt-x没有启用的,但是我看任务管理器→性能标签页那里的 ...

  8. Linux下C++连MySQL数据库

    1.查看本地有没有安装mysql,命令就是mysql,如果有这个命令就表示安装了mysql数据库软件.如果没有就自行安装. MySQL-server-4.0.16-0.i386.rpm MySQL-c ...

  9. CCProgressTo和CCProgressTimer

    在cocos2d中同样提供了很多表现图片和精灵的方式,上一篇当中提到的切换场景的方式之一是顺或逆时针切入的方法,在图片上也可以使用,test里有一个例子介绍CCProgressTimer可以实现一些图 ...

  10. 关于Parse字符串为时间一次被坑经历

    在Java代码中发现一个bug,就是本来更新为时间的内容更新为一些奇怪的内容,比如20819这种形式,本来更新的时间都是近期不会超过一年, 为什么会出现这种情况,非常奇怪,遂调试下代码,跟踪发现要匹配 ...