JavaScript节点的增删改查深入学习

2024-10-26 20:27:15

节点的增删改查

节点的创建

document.createElement方法用来生成元素节点，并返回该节点。

var newDiv = document.createElement('div');

createElement方法的参数为元素的标签名，即元素节点的tagName属性，对于 HTML 网页大小写不敏感，即参数为div或DIV返回的是同一种节点。如果参数里面包含尖括号（即<和>）会报错。

document.createElement('<div>');
// DOMException: The tag name provided ('<div>') is not a valid name

注意，document.createElement的参数可以是自定义的标签名。

document.createElement('foo');

22.2 "孤儿节点"

新创建出的节点是 “孤儿节点”，这意味着它并没有被挂载到 DOM 树上，我们无法看见它。

必须继续使用 appendChild() 或 insertBefore() 方法将孤儿节点插入到 DOM 树上。

22.2.1 appendChild()

任何已经在 DOM 树上的节点，都可以调用 appendChild() 方法，它可以将孤儿节点挂载到它的内部，成为它的最后一个子节点。

父节点.appendChild(孤儿节点);

【小案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p>我是原本的段落0</p>
        <p>我是原本的段落1</p>
        <p>我是原本的段落2</p>
    </div>
    <script>
        var oBox = document.getElementById('box');
        // 创建孤儿节点
        var oP = document.createElement('p');
        // 设置内部文字
        oP.innerText = '我是新来的';
        // 上树
        oBox.appendChild(oP);
    </script>
</body>
</html>

insertBefore()

任何已经在 DOM 树上的节点，都可以调用 insertBefore() 方法，它可以将孤儿节点挂载到它的内部，成为它的 “标杆子节点” 之前的节点。

父节点.insertBefore(孤儿节点, 标杆节点);

【小案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p>我是原本的段落0</p>
        <p>我是原本的段落1</p>
        <p>我是原本的段落2</p>
    </div>
    <script>
        var oBox = document.getElementById('box');
        var oPs = oBox.getElementsByTagName('p');
        // 创建孤儿节点
        var oP = document.createElement('p');
        // 设置内部文字
        oP.innerText = '我是新来的';
        // 上树
        oBox.insertBefore(oP, oPs[1]);
    </script>
</body>
</html>

节点创建小案例

【动态创建一个20行12列的表格】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td {
            width: 20px;
            height: 20px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <table id="mytable"></table>
    <script>
        // 请动态创建出一个 20 行 12 列的表格
        var mytable = document.getElementById('mytable');
        for (var i = 0; i < 20; i++) {
            // 创建了新的 tr 标签
            var tr = document.createElement('tr');
            for (var j = 0; j < 12; j++) {
                // 创建了新的 td 标签
                var td = document.createElement('td');
                // 让 tr 追加 td 标签
                tr.appendChild(td);
            }
            // 让 mytable 追加 tr 标签
            mytable.appendChild(tr);
        }
    </script>
</body>
</html>

【九九乘法表】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td {
            width: 80px;
            height: 30px;
            padding-left: 10px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <table id="mytable"></table>
    <script>
        // 请创建九九乘法表
        var mytable = document.getElementById('mytable');
        for (var i = 1; i <= 9; i++) {
            // 创建了新的 tr 标签
            var tr = document.createElement('tr');
            for (var j = 1; j <= i; j++) {
                // 创建了新的 td 标签
                var td = document.createElement('td');
                // 设置 td 内部的文字
                td.innerText = i + '×' + j + '=' + (i * j);
                // 让tr追加 td 标签
                tr.appendChild(td);
            }
            // 让 mytable 追加 tr 标签
            mytable.appendChild(tr);
        }
    </script>
</body>
</html>

移动节点

如果将已经挂载到 DOM 树上的节点成为 appendChild() 或者 insertBefore() 的参数，这个节点将会被移动。

新父节点.appendChild(已经有父亲的节点);

新父节点.insertBefore(已经有父亲的节点, 标杆子节点);

这意味着一个节点不能同时位于 DOM 树的两个位置。

【小案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">
        <p id="para">我是段落</p>
    </div>
    <div id="box2">
        <p>我是box2的原有p标签</p>
        <p>我是box2的原有p标签</p>
        <p>我是box2的原有p标签</p>
        <p>我是box2的原有p标签</p>
    </div>
    <script>
        var box2 = document.getElementById('box2');
        var para = document.getElementById('para');
        var ps_inbox2 = box2.getElementsByTagName('p');
        box2.insertBefore(para, ps_inbox2[2]);
    </script>
</body>
</html>

删除节点

删除现有的 DOM 节点，也需要关注两个因素：首先由父节点删除子节点，其次是要删除哪个子节点。

父节点.removeChild(子节点) 删除指定的子节点推荐方式：子节点.parentNode.removeChild(子节点)

在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除如不存在父子关系则删除不成功删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

父节点.removeChild(要删除子节点);

【小案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p>我是p节点0</p>
        <p>我是p节点1</p>
        <p>我是p节点2</p>
    </div>
    <script>
        var box = document.getElementById('box');
        var the_first_p = box.getElementsByTagName('p')[0];
        box.removeChild(the_first_p);
    </script>
</body>
</html>

结论：removeChild 删除节点时一定是由父子关系。

替换节点

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。

语法：

node.replaceChild (newnode,oldnew )

参数：

newnode : 必需，用于替换 oldnew 的对象。 oldnew : 必需，被 newnode 替换的对象。

我们来看看下面的代码:

效果: 将文档中的 Java 改为 JavaScript。

注意:

当 oldnode 被替换时，所有与之相关的属性内容都将被移除。
newnode 必须先被建立。

**replaceWith()**方法使用参数节点，替换当前节点。参数可以是元素节点，也可以是文本节点。

var span = document.createElement('span');
el.replaceWith(span);

上面代码中，el节点将被span节点替换。

22.7 克隆节点

cloneNode() 方法可以克隆节点，克隆出的节点是 “孤儿节点”。

必须继续使用 appendChild() 或 insertBefore() 方法将孤儿节点插入到 DOM 树上。

var 孤儿节点 = 老节点.cloneNode();
var 孤儿节点 = 老节点.cloneNode(true);

参数是一个布尔值，表示是否采用深度克隆：如果为 true，则该节点的所有后代节点也会被克隆，如果为 false，则只克隆该节点本身。

【小案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">
        <ul>
            <li>牛奶</li>
            <li>咖啡</li>
            <li>可乐</li>
        </ul>
    </div>
    <div id="box2"></div>
    <script>
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var theul = box1.getElementsByTagName('ul')[0];
        // 克隆节点
        var new_ul = theul.cloneNode(true);
        box2.appendChild(new_ul);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">
        <ul>
            <li>牛奶</li>
            <li>咖啡</li>
            <li>可乐</li>
        </ul>
    </div>
    <div id="box2"></div>
    <script>
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var theul = box1.getElementsByTagName('ul')[0];
        // 克隆节点
        var new_ul = theul.cloneNode(false);
        box2.appendChild(new_ul);
    </script>
</body>
</html>

总结

结论：

createElement 动态创建任意 DOM 节点

cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点

appendChild 在末尾（结束标签前）插入节点

cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点

insertBefore 在父节点中任意子节点之前插入新节点

removeChild 删除父节点的子节点

replaceChild 用一个孤儿节点替换父元素的子结点

replaceWith 用一个孤儿节点替换当前节点

以上就是JavaScript节点的增删改查深入学习的详细内容，更多关于JavaScript节点增删改查的资料请关注我们其它相关文章！

使用Mockjs模拟接口实现增删改查、分页及多条件查询

目录一.什么是Mock? 二.使用Mock有什么好处三.安装Mock 四.效果图五.使用Mock模拟接口实现增删改查.分页.多条件查询总结一.什么是Mock? mock官网 mock测试就是在测试过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试的测试方法. 二.使用Mock有什么好处生成随机数据,拦截 Ajax 请求 1️⃣前后端分离让前端攻城师独立于后端进行开发. 2️⃣增加单元测试的真实性通过随机数据,模拟各种场景. 3️⃣开发无侵入不需要修改
vue.js踩坑之ref引用细节点讲解

目录 ref引用细节点讲解要点简介:[ 见下文案例 ] 通过ref引用的形式,来操作DOM 步骤如下重要代码如下 ref引用及插槽 ref引用 ref引用DOM元素 ref引用组件实例实现标签的按需切换插槽匿名插槽具名插槽作用域插槽 ref引用细节点讲解 vue.js组件之H5页面,DOM标签或者组件中,通过ref="自定义name名称"引用的细节点要点简介:[ 见下文案例 ] 使用is=" "解决H5出现的标签解析bug . 子组件中使用data
拿捏javascript对象增删改查应用及示例

目录什么是对象? 为什么需要对象? 创建对象的三种方式利用对象字面量创建对象利用new关键字创建对象利用构造函数创建对象 new关键字的执行过程对象属性的增删改查(和py的字典类似) 增删改查遍历对象结语什么是对象? 嘿!这还用问吗?对象不就是“你的女朋友” 嘛!,或许你以为我在胡说,但事实上确实就是.看完下面这个定义,你就知道我说的对不对了… 现实生活中:万物皆对象,对象是一个具体的事物,看得见摸得着的实物.如,一本书.一辆汽车.一个人都可以是"对象”,一个数据库.一张网
使用JavaScript在html文档内添加新的元素节点

目录一.基本语法与解释 1.在某元素附近创建一个新的元素节点 2.删除标签 3.修改标签 4.使用选择器选出某一类标签二.实际应用 1.完整代码 2.运行效果三.注意事项前言: 动态的改变原有html文档结构一.基本语法与解释 1.在某元素附近创建一个新的元素节点 // 将节点插入指定标签之后 // 创建一个p标签对象 var para = document.createElement("p"); // 创建文本对象 var node = document.crea
JavaScript针对网页节点的增删改查用法实例

本文实例讲述了JavaScript针对网页节点的增删改查用法.分享给大家供大家参考.具体分析如下: 一.基本概念这部分也就是所谓的"HTML DOM",所谓HTML DOM也就是Web页面加载规则,是一个规则,也就是网页组成的基本公式. 也就是所有网页都必须按照:<html><body></body></html>--的规则编写,也按照这样的规则加载. 所谓的"网页节点",也叫"DOM节点"的通俗
Nodejs + sequelize 实现增删改查操作

1. 下载资源库 npm install sequelize --save npm install mysql2 --save // npm install mysql 提示不完整 2. 创建数据库配置文件 db.js,配置数据库 var Sequelize = require('sequelize'); module.exports = new Sequelize('blog', 'root', '123456', { host: 'localhost', // 数据库地址 dialect:
Java替换(新增)JSON串里面的某个节点操作

替换JSON串里面的某个节点这里使用的是alibaba的fastjson,使用JSONObject解析替换,这里的key存在就会替换,不存在就新增 JSONObject object = JSONObject.parseObject(jsonString); object.put("name", "张三"); object.put("phone", "13512345678"); newJsonString = object
JavaScript节点的增删改查深入学习

目录节点的增删改查节点的创建 22.2 "孤儿节点" 22.2.1 appendChild() insertBefore() 节点创建小案例移动节点删除节点替换节点 22.7 克隆节点总结节点的增删改查节点的创建 document.createElement方法用来生成元素节点,并返回该节点. var newDiv = document.createElement('div'); createElement方法的参数为元素的标签名,即元素节点的tagName属性,对于
jQuery实现对网页节点的增删改查功能示例

本文实例讲述了jQuery实现对网页节点的增删改查功能.分享给大家供大家参考,具体如下: 前面介绍过<JavaScript针对网页节点的增删改查用法>,其实JavaScript对DOM的操作已经总结了很久的,而对于jQuery对网页节点的操作,虽然一直在用,但一直没有好好总结一下,实在是不应该. 下面举同样的例子来说明这个问题: 如上图,提供3个按钮,1个下拉列表,1个输入框,提供增删改查的操作. 网页中最多10个节点,最少0个节点,多了不让加,少了不让减. 首先是本网页的基本布局: <
javascript实现信息增删改查的方法

本文实例讲述了javascript实现信息增删改查的方法.分享给大家供大家参考.具体实现方法如下: <body> <div align="center"> <h1>显示所有的用户界面</h1> <div style="border: 1px red solid; margin-bottom: 100px; padding: 10px 10%;"> <table border="1px&quo
javascript操作xml(增删改查)例子代码hta版

包括了stu.hta(是HTML应用程序); stu.xml 注意下面的HTML代码必须保存为后缀名为hta否则当对XML文件进行操作(增删改)的时候就会提示没有权限!! 文件stu.hta代码如下: 复制代码代码如下: <html> <head> <title> 数据岛的显示 </title> <style type="text/css"> #findPanel { position:absolute; widt
php数据库的增删改查 php与javascript之间的交互

使用语言操作数据库是重中之重,如果一门语言你不懂得如何操作数据库,那么你还是没有学会这门语言. PHP操作数据库的方法并不难同时php的值还可以与JavaScript脚本之间进行控制一般是php的值传递到javascript中,一般不会反过来操作一.基本目标首先,在mysql中有一张用户信息表user,里面的字段分别是id,username与password,打开网页dbselect.php,首先就用php查出整张user表: 然后,插入数据的一栏,输入数据,就可把数据插入到mysql中
浅谈JavaScript中数组的增删改查

数组的增加 •ary.push() 向数组末尾添加元素,返回的是添加后新数组的长度,原有数组改变 •ary.unshift() 向数组开头添加元素,返回的是添加后新数组的长度,原有数组改变 • var ary=[1,2,3,4]; var res=ary.unshift(6); console.log(res); ---->5 返回的是新数组的长度•ary.splice(n,m,x)从索引n开始删除m个元素,把新增的元素X放在索引n的前面,把删除的元素当成一个新数组返回,原有数组改
javascript Xml增删改查(IE下)操作实现代码

html文件: 复制代码代码如下: <!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> <title>j
java对xml节点属性的增删改查实现方法

学习本文之前请先看我的另一篇文章JAVA对XML节点的操作可以对XML操作有更好的了解. package vastsum; import java.io.File; import java.io.FileWriter; import java.util.Iterator; import org.dom4j.Attribute; import org.dom4j.Document; import org.dom4j.Element; import org.dom4j.io.SAXReader; i
Java描述数据结构学习之链表的增删改查详解

前言链表是一种常见的基础数据结构,它是一种线性表,但在内存中它并不是顺序存储的,它是以链式进行存储的,每一个节点里存放的是下一个节点的"指针".在Java中的数据分为引用数据类型和基础数据类型,在Java中不存在指针的概念,但是对于链表而言的指针,指的就是引用数据类型的地址. 链表和数组都是线性的数据结构,对于数组而言其长度是固定的,由于在内存中其是连续的,因此更适合做查找与遍历,而链表在内存中是并不是顺序存储的,但是由于其是通过"指针"构成的,因此在插入.删除时