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 ...

随机推荐

oc Delegate
把内部的状态通知给外界,我们可以制定一个变量,然后这个变量从外界来指定,之后我们可以通过变量去通知给外界有什么发生了. 按照上文讲的到新建一个protocol,名字为IPeople #import & ...
RHCE7 管理II-5管理进程的优先级
进程的优先级值称为进程的nice值,共有40种不同的取值(用数字-20到19表示) nice值越大,表示进程的优先级越低. 进程的nice值,只允许root用户来设置负的nice:其他用户只允许设置正 ...
RAC安装重新运行root.sh
rac1执行root.sh成功,rac2执行失败. 在重新执行root.sh前,在rac2上把crs等配置信息删除: # /u01/app//grid/crs/install/rootcrs.pl - ...
Android 自定义属性动画&Camera动画
摘要: Android 自定义属性动画&Camera动画 1.相关知识点对于Androi的帧动画,可以制作gif图片,有时为了能够动态的生成帧动画,就得需要使用代码构建了 Animati ...
iOS开发打包
ios11个论坛地址邓白氏编码邓白氏申请 http://blog.fir.im/faq/ AdHoc,InHouse,App Store Account Type: InHouse ( ...
cocos2dx 3.1从零学习（五）——动画
动画是游戏中最重要的表现部分,本篇仅仅是初步学习大部分动画的用法.没有什么原理性的东西,可是样例有非常多,假设有不熟的地方要练一下. 特别是Spawn和Sequence的组合使用,什么时候使用Spaw ...
Oracle学习笔记之四，SQL语言入门
1. SQL语言概述 1.1 SQL语言特点集合性,SQL可以的高层的数据结构上进行工作,工作时不是单条地处理记录,而对数据进行成组的处理. 统一性,操作任务主要包括:查询数据:插入.修改和删除数据 ...
Silverlight从客户端上传文件到服务器
这里介绍的是一种利用WebClient手动发送Stream到服务器页面的上传文件方法. 一.服务器接收文件这里使用一个ASHX页面来接收和保存Silverlight传来的Stream,页面代码如下: ...
chkconfig命令具体介绍
命令介绍: chkconfig命令用来更新.查询.改动不同执行级上的系统服务.比方安装了httpd服务,而且把启动的脚本放在了/etc/rc.d/init.d文件夹下,有时候须要开机自己主动启动它,而 ...
如何在 block 中修改外部变量
转自:http://www.cnblogs.com/easonoutlook/archive/2012/08/22/2650070.html block 的目的是为了支持并行编程,对于普通的 loca ...

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

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

随机推荐

热门专题