《JavaScript学习笔记》：DOM_添加节点、删除节点、文档碎片

最新推荐文章于 2023-02-25 14:36:45 发布
最新推荐文章于 2023-02-25 14:36:45 发布
阅读量1.3k 收藏 2
点赞数 1
分类专栏： javascript 文章标签： 添加节点 删除节点 javascript html 文档碎片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010412719/article/details/51548572
版权

《JavaScript学习笔记》：DOM_添加节点、删除节点、文档碎片

在上篇博文中，主要介绍了关于DOM中获取子节点的相关知识点，除了获取子节点，DOM还有创建一个节点、加入节点、删除节点等知识点，本篇博文进行介绍。

1、加入节点

语法：obj.appendChild(obj1);//就是在对象obj尾部中加入节点obj1.

看下面这个例子：往ul中添加li节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script>
    window.onload=function()
    {
        var oBtn=document.getElementById('btn1');
        var oDiv=document.getElementById('div1');
        var oTxt=document.getElementById('txt1');
        oBtn.onclick=function()
        {
            var oLi=document.createElement('li');//创建一个节点
            oLi.innerHTML=oTxt.value;

            oDiv.appendChild(oLi);//向标签div中追加一个子节点
        };
    };
    </script>
    </head>

    <body>
    <input id="txt1" type="text"/>
    <input id="btn1" type="button" value="插入节点"/>

    <div id="div1">

    </div>
    </body>
    </html>

obj.appendChild(obj1);是在obj的尾部添加节点obj1,我们还可以往obj的某个节点前面添加节点，具体如下：

obj.insertBefore(obj1，原有节点);就是在obj中原有节点前面加入obj1.

下面我们也来看一个例子：每点击一次按钮，就在ul的第一个位置添加li

代码如下：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script>
    window.onload=function()
    {
        var oBtn=document.getElementById('btn1');
        var oDiv=document.getElementById('div1');
        var oTxt=document.getElementById('txt1');
        oBtn.onclick=function()
        {
            var oLi=document.createElement('li');//创建一个节点
            oLi.innerHTML=oTxt.value;
            var aLi=oDiv.getElementsByTagName('li');
            //解决兼容性
            if(aLi.length==0)
            {
                oDiv.appendChild(oLi);  
            }
            else
            {
                oDiv.insertBefore(oLi,aLi[0]);//向标签div中追加一个子节点
            }

        };
    };
    </script>
    </head>

    <body>
    <input id="txt1" type="text"/>
    <input id="btn1" type="button" value="插入节点"/>

    <div id="div1">

    </div>
    </body>
    </html>

2、删除节点

语法：obj.removeChild(obj1);在obj中删除节点obj1

看一个例子：点击一次按钮就删除ul中一个li。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>删除DOM节点</title>
    <script>
    window.onload=function()
    {
        var oBtn1=document.getElementById('btn1');
        var oUl=document.getElementById('ul1');
        oBtn1.onclick=function()
        {
            var aLi = oUl.getElementsByTagName('li');
            if(aLi.length!=0)
            {
                oUl.removeChild(aLi[0]);//删除第一个结点
            }
            else
            {
                alert('这个元素节点下面已经没有节点了');
            }
        };
    };
    </script>
    </head>

    <body>
    <input id="btn1" type="button" value="删除最前面的节点"/>
    <ul id="ul1">
        <li>bbbb</li>
        <li>aaa</li>
        <li>ccc</li>
        <li>ddd</li>
        <li>fff</li>
        <li>ggg</li>
    </ul>
    </body>
    </html>

3、文档碎片

文档碎片，关于这个知识点，其实用的不太多，但是我们还是有必要了解一下。

语法如下：document.createDocumentFragment();

文档碎片主要用处就是作为一个缓存来用，例如：当我们在程序中，我们向将一些信息写入到文件中，其实我们是首先将一些内容先写入缓存，当缓存中有一定量的内容时，然后计算机系统就将缓冲内的东西一次性的写入文件中，这样主要的目的是为了提高性能，避免多次的IO读写操作。同理，文档碎片也是起的这样一个目的：为了提高性能(理论上)。

下面来看一个例子：将10000个li写入到ul元素节点中。

直接插入法和借助于文档碎片进行插入这两种方法将所耗费的时间统计下，用于比较性能，看是否提高了性能。

1、直接插入法

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>无标题文档</title>
        <script>
        window.onload=function()
        {
            var oBtn = document.getElementById('btn1');
            var oUl = document.getElementById('ul1');
            oBtn.onclick=function()
            {
                //创建一个文档碎片，先将所有节点加入到文档碎片中，最后再一起加入到ul1中
                var date=new Date();
                var secondTime=date.getSeconds();
                var startTime=date.getMilliseconds();
                //var odf=document.createDocumentFragment();
                for(var i=0;i<100000;i++)
                {
                    var oLi=document.createElement('li');
                    //odf.appendChild(oLi);
                    ul1.appendChild(oLi);
                }
                //ul1.appendChild(odf);
                var date1=new Date();
                var end=date1.getMilliseconds();
                var secondTime2=date1.getSeconds();
                alert((secondTime2-secondTime)+'秒'+(end-startTime)+'毫秒');
            };

        };
        </script>
        </head>

        <body>
        <input id="btn1" type="button" value="插入10000个元素节点" />
        <ul id="ul1">
        </ul>
        </body>
        </html>

经过测试，上面这种方法直接每次直接往ul中添加li节点所耗费的时间为：591ms.

2、借助于文档碎片进行插入

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script>
    window.onload=function()
    {
        var oBtn = document.getElementById('btn1');
        var oUl = document.getElementById('ul1');
        oBtn.onclick=function()
        {
            //创建一个文档碎片，先将所有节点加入到文档碎片中，最后再一起加入到ul1中
            var odf=document.createDocumentFragment();
            for(var i=0;i<10000;i++)
            {
                var oLi=document.createElement('li');
                odf.appendChild(oLi);
            }
            ul1.appendChild(odf);
        };

    };
    </script>
    </head>

    <body>
    <input id="btn1" type="button" value="插入10000个元素节点" />
    <ul id="ul1">
    </ul>
    </body>
    </html>

经过测试，上面这种方法借助文档碎片所耗费的时间为：164ms.因此，当我们需要大量的插入节点时，可以借助于文档碎片来提高性能。

HelloWorld_EE
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript学习笔记：创建、添加与删除节点
howard2005的专栏
12-05 878
JavaScript学习笔记：创建与添加节点 一、DOM对象节点类型 二、创建节点 1、创建元素节点 createElement(element)用于创建元素节点 比如：var anode = document.createElement('a');创建一个标签名为a的超链接元素节点。 2、创建文本节点 createTextNode(string)用于创建文本节点 比如：var tnode = ...
JavaScript学习笔记：DOM简介
xiaolong446的博客
02-13 343
1、什么是DOM ●文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。 ​●W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 ●DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。 2、DOM树 DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。 ●文档：一个页面
javascript学习笔记：DOM节点概述
weixin_33946020的博客
01-31 61
0x01： DOM是javascript操作网页的接口，全称为文档对象模型(Document Object Model)。它的作用是将网页转为一个javascript对象，从而可以使用javascript对网页进行各种操作(比如增删内容)。浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。DOM的最小组成单位叫做节点(node)，文档的树形结构(DOM树)由1...
Javascript学习笔记：DOM操作
Zijeak的博客
02-11 259
DOM结点操作和数据库基本操作一样包括：增删改查结点。 1.增加结点（创建结点） document.write() document.write()：创建结点，在DOM ready之前写入，不影响原本的结点。 <!DOCTYPE html> <html> <head> <title>练习网页</title> <script ty...
JavaScript学习笔记（6)：DOM更新节点
weixin_43246995的博客
04-28 699
JavaScript学习笔记（6) DOM更新节点 前言 这是
JavaScript学习笔记（DOM 导航、节点、集合、节点列表）
Clover的博客
05-27 598
JavaScript学习笔记（DOM 导航、节点、集合、节点列表）@[TOC](JavaScript学习笔记（DOM 导航、节点、集合、节点列表）)DOM节点节点关系：在节点之间导航子节点和节点值1. 取出h1元素中的文本并复制到P元素中：(第一种)2. 取出h1元素中的文本并复制到P元素中：(第二种)3. 取出h1元素中的文本并复制到P元素中：(第三种)JavaScript HTML DOM 元素（节点）添加和删除节点(HTML元素)创建新的HTML元素-insertBefore()删除已有HTML元素（
【JS学习笔记】DOM节点综述
最新发布
xxhls的博客
02-25 161
【JS学习笔记】DOM节点综述
JavaScript学习笔记（4）：DOM查询节点的操作
weixin_43246995的博客
04-25 155
JavaScript学习笔记（4） DOM查询节点的操作 前言 这一篇我想尽可能详尽的讨论查询节点的操作。 第一类：查询标签节点 getElementById(“idName”) 根据元素的id值来返回节点。返回的只有一个元素，因为一个页面中的元素id不能重名。其他方法一般都是返回一个数组。 getElementByClassName(“className”) 根据元素的class名来返回节点。 ...
JavaScript学习笔记：节点的常用属性和方法
qq_49019244的博客
12-20 443
学习内容：节点的常用属性和方法 1. 方法： 通过具体的元素节点调用getElementsByTagName()方法，获取当前节点的指定标签名孩子节点 appendChild( oChildNode )方法，可以添加一个子节点，oChildNode 2. 属性 childNodes属性，获取当前节点的所有子节点 firstChild属性，获取当前节点的第一个子节点 lastChild属性，获取当前节点的最后一个子节点 parentNode属性，获取当前节点的父节点 nextSibling属性，获取当前节点的
JavaScript学习笔记之DOM基础操作实例小结
12-08
在本文中，我们将深入探讨JavaScript DOM基础操作，主要包括子节点、节点类型、元素节点以及父节点的处理。 一、子节点操作 1. 获取子节点数量 在实例01中，我们通过`childNodes.length`获取了`<ul id="ul1">`元素...
JavaScript学习笔记之DOM操作实例分析
12-12
本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考，具体如下： 一、DOM概念 1. “D”:Docment,指的是文档 2. “O”：Object，指的是对象，在javascript有三种对象：用户定义对象、内建对象...
javascript学习笔记(十九) 节点的操作实现代码
12-07
在本篇JavaScript学习笔记中，我们主要探讨了如何通过JavaScript来创建、添加、移除和操作HTML元素节点。 首先，我们了解了如何创建元素节点。`document.createElement()` 是一个非常重要的方法，它允许我们动态...
【学习笔记】：DOM对象及事件绑定
01-08
【学习笔记】：DOM对象及事件绑定 一、DOM的概念 DOM（Document Object Model）是文档对象模型，它提供了一种结构化的表示HTML或XML文档的接口，允许程序和脚本动态更新、添加、删除和改变元素及属性。DOM通过一...
《JavaScript学习笔记四》：getElementsByTagName的使用以及全选、反选和取消功能实现
wojiushimogui的博客
05-29 2106
《JavaScript学习笔记四》：getElementsByTagName的使用以及全选、反选和取消功能实现我们都知道getElementById是通过id来获取对象，但是，当我们的对象许多且这些对象都是相同的时候，如果还使用getElementById来一个一个的来获取对象就比较坑爹了，是吧，因此，就有了getElementsByTagName来通过标签来获取对象数组。例如：var aBtn=d
《JavaScript学习笔记八》：数字时钟的实现
wojiushimogui的博客
05-30 1779
《JavaScript学习笔记八》：数字时钟的实现在我们的生活中，数字时钟随处可见，在我们的手机上，在我们的电脑上，以及在一些时间软件上，都可以看到数字时钟，与下图类似，这篇博文我们就来模拟下数字时钟的实现。首先我们来实现时间部分，效果图如下：这个功能相对比较简单，就是根据Date对象的一些获取时间的方法来获取时间并拼接为一个字符串，然后根据字符串上每位的数字来显示0~9的图片资源即可。Date对象
《JavaScript学习笔记三》if else及function的使用
wojiushimogui的博客
05-28 1221
《JavaScript学习笔记三》：if elseif else的使用在JavaScript中if else的使用与在其它语言使用的方法一样，例如：我们想实现这样一个功能：有一个按钮，当点击的时候，如果div是显示的，则隐藏，否则显示出来。由于比较简单，代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht
《JavaScript学习笔记》：键盘事件
wojiushimogui的博客
06-06 1108
《JavaScript学习笔记》：键盘事件上篇博文介绍了鼠标事件，本篇博文介绍下键盘事件，键盘事件有：键按下(onkeydown)和键弹起(onkeyup).虽然只有键盘只有两种事件，但是，在用途还是相当广的，例子，在我们的qq聊天界面中，我们写好消息好，我们一般有三种方式来进行发送，如下：1、点击”发送”按钮2、enter3、ctrl+enter后面两种就是键盘事件，前面一种是鼠标点击事件。要说明
《JavaScript学习笔记一》鼠标提示框
wojiushimogui的博客
05-28 904
《JavaScript学习笔记》：鼠标提示框在我们的许多登陆界面都会有鼠标提示框的应用，例如下面的截图就是一个比较好的例子：下面我们就实现这个比较简单的例子这个的实现原理比较简单，如下：1、当鼠标移动到checkbox上面时，提示框出现。2、当鼠标移出checkbox时，提示框就消失。鼠标移入和移出对应的事件为：onmouseover/onmouseout出现和消失在div上面的表现形式为：divN
学习javascript DOM笔记：节点属性和层级结构详解
JavaScript DOM 学习笔记11： 在 JavaScript 中，DOM（文档对象模型）是 HTML 和 XML 文档的编程接口。通过 DOM，开发者可以轻松地访问和操作文档的各个部分，包括元素、属性和内容。 在 DOM 中，每个文档都有一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值