前面有讲过一些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. 利用腾讯云免费证书打造全https站

    什么是https? 超文本传输安全协议(Hypertext Transfer Protocol Secure,缩写为HTTPS)是一种网络安全传输协议http是HTTP协议运行在TCP之上,所有传输的 ...

  2. Linux内核中锁机制之完成量、互斥量

    在上一篇博文中笔者分析了关于信号量.读写信号量的使用及源码实现,接下来本篇博文将讨论有关完成量和互斥量的使用和一些经典问题. 八.完成量 下面讨论完成量的内容,首先需明确完成量表示为一个执行单元需要等 ...

  3. Spring boot处理OPTIONS请求

    一.现象从fetch说起,用fetch构造一个POST请求. fetch('http://127.0.0.1:8000/api/login', { method: "POST", ...

  4. ps换衣服

    1.抠衣服->给衣服新建图层(ctrl+j)->给图层去色,让衣服边黑白色.2.剪贴蒙版(上图:大花布,下形:衣服).作用:大花布替换成衣服3.大花布图层->叠加图层样式或其它图层样 ...

  5. 关于XILINX芯片IO管脚的上拉电阻的疑问

    XILINX的每个IO脚都有一个可选的可配上拉电阻功能,现在我在配置文件的UCF里使用了这个上拉电阻:语法如下:NET"I_key_data"        LOC = " ...

  6. 在 Chrome 开发者工具中调试 node.js

    命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node ...

  7. coreos 创建使用密钥登陆的ubuntu 基础镜像

    下载官方镜像 core@localhost ~ $ docker pull ubuntu:14.04 #假设官方下载较慢,可到www.dockerpool.com下载标准镜像 core@localho ...

  8. android购物车遇到的问题

    近期 做购物车的时候 ,遇到几个问题.如今 总结例如以下: 1:不让listview复用组件(购物车.或者有特殊操作的时候): 自己保存全部的view对象 public View getView(fi ...

  9. db papers

    http://www.redbook.io/ http://db.cs.berkeley.edu/papers/ https://github.com/rxin/db-readings http:// ...

  10. Storm API,Tutorial,Trident,Windowing BOOKS

    http://storm.apache.org/releases/1.0.0/Trident-API-Overview.html https://stackoverflow.com/questions ...