js学习笔记33----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操作的更多相关文章

jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
jQuery学习笔记（DOM操作）
DOM操作的分类一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...
js学习笔记2---HTML属性操作
1.HTML属性操作:读.写属性名属性值 2.属性读操作:获取.找到 a) 语法:元素.属性名如:document.getElementById(“btn”).value; b) 字符串的连 ...
js学习笔记9----时间操作
1.时间操作函数如下: new Date(); //获取系统时间 getFullYear(); //年 getMonth()+1; //月,初始值为0 getDate(); //日 getDay( ...
js学习笔记21----表格操作
1.获取表格元素: tHead : 表格头 tBody : 表格主体内容 tFoot : 表格尾 rows : 表格行 cells : 表格列如获取表格第一行第一列的数据: <script ...
js学习笔记11----表单操作
1.复选框选中 var aInput = document.getElementsByTagname('input'); aInput[0].checked=true;
js学习笔记--dom部分(一)
js 学习整理之Dom部分前面我总结了我最近学习js基础部分,当时提到过js分了三大部分,第一部分ECMA基础也就是第一次写的基础部分, 第二部分也就是DOM部分,也就是这里要写的内容的,然后第三部 ...
JS学习笔记5_DOM
1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...
基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
【转】Backbone.js学习笔记（二）细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

随机推荐

Hadoop docs
原文地址:http://hadoop.apache.org/docs/ Index of /docs Name Last modified Size Description Parent Direct ...
【jQuery】页面顶部显示的进度条效果
<!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta htt ...
api 和 C# 里的接口的区别？
从狭义上讲,接口指的是借由 interface 定义的结构,接口中只对方法做定义,不做实现.具体实现由最终实现接口的类提供. interface 作为一种类型,可以用于定义方法,我们只关心类实现了接口 ...
pythonl练习笔记——threading创建进程锁Lock()
1 基本概述采用threading.Lock()对象创建锁lock,即 lock = threading.Lock() 其相关方法主要有 lock.acquire() # lock the lock ...
R.string获取的是数字或者R.integer数字不对的问题
String msg = R.string.menu_title; 获取menu_title的String值,但发现这样写报错,原因R.string.menu_title是int类型的,可是通过以下方 ...
摘：分配和释放BSTR的内存
当您创建 BSTR的并将它们使用以避免内存泄漏的它们在COM对象之间时,必须注意在将内存的. 当 BSTR 在接口中保持,必须释放其内存,当处理它. 但是,那么,当 BSTR ...
OGG_GoldenGate目标端库级别数据初始化（案例）
2014-03-07 Created By BaoXinjian
Linux中断 - 驱动申请中断API
一.前言本文主要的议题是作为一个普通的驱动工程师,在撰写自己负责的驱动的时候,如何向Linux Kernel中的中断子系统注册中断处理函数?为了理解注册中断的接口,必须了解一些中断线程化(threa ...
ZOJ 1654 Place the Robots建图思维（分块思想）+二分匹配
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=654 AC一百道水题,不如AC一道难题来的舒服. 题意:一个n*m地图 ...
Java中的static关键字的用法
1.静态方法 static:通常在一个类中定义一个方法为static,那就是说,无需本类的对象即可调用此方法声明为static的方法有以下几条限制: (1)它们仅能调用其他的static方法. (2 ...

js学习笔记33----DOM操作

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

随机推荐

热门专题