CH16-DOM元素增删改

最新推荐文章于 2024-08-10 21:46:38 发布
最新推荐文章于 2024-08-10 21:46:38 发布
阅读量1k 收藏 11
点赞数 28
分类专栏： JavaScript 文章标签： 前端 javascript 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37631902/article/details/140401106
版权

CH16-DOM元素增删改

本章目标

  • 掌握如何使用DOM获取节点时使用的属性
  • 熟练使用DOM节点进行创建、添加、删除、替换

一、使用DOM获取节点时使用的属性

1.1 首尾子节点

firstChild：获取当前节点的首个子节点，注意：换行符、空格等也是节点。

lastChild:访问当前节点的最后一个子节点，是 Node 对象。

注：lastChild 返回的是这些子节点：元素节点、文本节点或注释节点。元素之间的空白也是文本节点。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        function test1(){
            //获取首个子节点
            var node=document.querySelector("#ul_1").firstChild;
            alert(node.innerHTML);
        }
        
    	function test2(){
            //获取尾个子节点
            var node=document.querySelector("#ul_1").lastChild;
            alert(node.innerHTML);
        }
    </script>
</head>

<body>
    <ul id="ul_1" class="abc">
        <li>li-1</li>
        <li>li-2</li>
        <li id="li_3">li-3</li>
        <li>li-4</li>
        <li>li-5</li>
    </ul>
    <button onclick="test1()">获取首个子节点</button>
    <button onclick="test2()">获取尾个子节点</button>

   
</body>

</html>

1.2 首尾元素子节点

firstElementChild :访问当前节点的首个元素子节点，是 Element对象。

lastElementChild :访问当前节点的尾个元素子节点，是 Element对象。

 	   function test1(){
		    //获取首个元素子节点
            var node=document.querySelector("#ul_1").firstElementChild;

            alert(node.innerHTML);
        }
        function test2(){
	        //获取尾个元素子节点
            var node=document.querySelector("#ul_1").lastElementChild;

            alert(node.innerHTML);
        }

1.3 兄弟节点

previousSibling:返回同一层级中指定节点的前一个节点,是 Node 对象。

previousSibling 属性是只读的。

如果没有 previousSibling 节点，则返回值是 null。

nextSibiling:返回同一层级中指定节点之后紧跟的节点,是Node对象

nextSibling 属性是只读的。

如果没有 nextSibiling节点，则返回值是 null。

function test3() {
    		var node1=document.querySelector("#li_3").previousSibling;
    		var node2=document.querySelector("#li_3").nextSibiling;
            alert("上一个节点："+node1.innerHTML);
    	    alert("下一个节点："+node2.innerHTML);
}

注：nextSibiling 返回下一个同胞节点：元素节点、文本节点或注释节点 。

previousElementSibling :返回同一层级中指定节点之前的元素节点,是Element对象

nextElementSibling :返回同一层级中指定节点之后的元素节点,是Element对象

function test4() {
    		var node1=document.querySelector("#li_3").previousElementSibling ;
    		var node2=document.querySelector("#li_3").nextElementSibling ;
            alert("上一个元素节点："+node1.innerHTML);
    	    alert("下一个元素节点："+node2.innerHTML);
}

1.4 父、子节点

parentNode：访问当前元素节点的父节点 如果指定的节点没有父节点则返回 null.

childNodes：当前节点的所有子节点 返回所有节点的数组,只返回文本和元素节点，对于属性节点直接无视

function test5(){
    
    		//获取父节点
            var node=document.querySelector("#ul_1").parentNode;
            alert(node.nodeName);
}

function test6(){
            
            //获取子节点
            var nodes=document.querySelector("#ul_1").childNodes;  //调试观察各节点属性

            for(var i=0;i<nodes.length;i++){

                var node=nodes[i];

                if(node.nodeType==3)continue;
                alert(node.innerHTML);
            }  
        }

1.4 节点属性

nodeName：节点的名称

nodeName 是只读的

元素节点的 nodeName 与标签名相同 ，属性节点的 nodeName 与属性名相同， 文本节点的 nodeName 始终是 #text ，文档节点的 nodeName 始终是 #document 。

 function test7(){

             //元素节点的nodeName
            alert(document.querySelector("#ul_1").nodeName);
            
            //属性节点的nodeName
            var node= document.getElementById("ul_1").attributes["class"];
            alert(node.nodeName);

            //文本节点的nodeName
            alert(document.querySelector("#li_3").firstChild.nodeValue);
        }

注：nodeName 所包含的 XML 元素的标签名称永远是大写的

nodeValue:节点的值

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

 function test8(){

            //元素节点的nodeValue
            alert(document.querySelector("#ul_1").nodeValue);
            
            //属性节点的nodeValue
            var node= document.getElementById("ul_1").attributes["class"];
            alert(node.nodeValue);

            //文本节点的nodeValue
            alert(document.querySelector("#li_3").firstChild.nodeValue);
            
        }

注：nodeValue 属性对于文档节点和元素节点是不可用的。

nodeType：节点类型

​ 1：表示当前节点的类型是标签（元素）

​ 2：表示属性节点

​ 3：表示文本节点

nodeType属性返回选定节点的节点类型，可以让我们知道、区分文档中的各个节点。

 function test9(){
            //元素节点的nodeType
            alert(document.querySelector("#ul_1").nodeType);
            
            //属性节点的nodeType
            var node= document.getElementById("ul_1").attributes["class"];
            alert(node.nodeType);

            //文本节点的nodeType
            alert(document.querySelector("#li_3").firstChild.nodeType);
        }

二、操作DOM节点

2.1 创建一个节点

createElement、createTextNode

createElement() 方法通过指定名称创建一个元素

使用createElement创建节点：

例：创建一个p标签追加到body

在这里插入图片描述

<h2>createElement() 方法</h2>
<p>创建带一些文本的 p 元素：</p>
<script>
window.onload=function(){
            // 用createElement创建元素
            var c= document.createElement("p");
            //设置元素的文本
            c.innerText = "这是一个p标签";

            // 追加到 body
            document.body.appendChild(c);
        }
</script>

注：1.createElement()创建了一个新的元素，参数是String类型的创建元素的名称

​ 2.createElement()方法常和appendChild()一起用。createElement()方法创建元素后，一般用appendChild()加入内容。

createTextNode() 方法创建文本节点

使用createTextNode创建节点：

例：创建一个节点追加到body里面

效果图：

在这里插入图片描述

<script>
window.onload=function(){
            //使用createTextNode创建文本节点
            var textNode = document.createTextNode("Hello World");
            //追加到body
            document.body.appendChild(textNode);
        }
</script>

2.2 向页面加入一个节点

appendChild、insertBefore

例：创建一个li元素在里面创建一个文本节点再添加到已有的子元素前面

效果图：

在这里插入图片描述

<ul id="myList">
        <li id="a">hello</li><li id="b">world</li>
</ul>
<script>
window.onload=function(){
            // 创建 "li" 元素：
            var newNode = document.createElement("li");
            // 创建文本节点：
            var textNode = document.createTextNode("JQuery");
            // 向 "li" 元素添加文本节点：
            newNode.appendChild(textNode);

            // 在已有子元素之前插入
            var list = document.getElementById("myList");
            list.insertBefore(newNode, list.children[0]);
        }
</script>

案例中的appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。如果需要将新元素添加到开始位置，可以使用 insertBefore() 方法。

注：1. insertBefore() 方法是在被选元素前插入 HTML 元素。

​ 2.如需在被选元素后插入 HTML 元素，使可用 insertAfter() 方法。

​ 3.如果参数是已存在的元素，它将从它的当前位置被移除，并被插入在被选元素之前。

2.3 删除页面中的某一个节点

removeChild():删除 参数是要删除的对象。返回值是removeChild前的那个父节点

例：点击按钮删除第一个子节点

删除前：

在这里插入图片描述

删除后：

在这里插入图片描述

<button onclick="myFunction()">删除第一个子节点</button>
<ul id="myList">
      <li id="a">hello</li><li id="b">world</li>
</ul>

<script>
        function myFunction() {
		   //获取id
            var list = document.getElementById("myList");
		   //通过id删除第一个节点
            list.removeChild(list.firstElementChild);
        }
</script>

注：1.如需删除 HTML 元素，您必须清楚该元素的父元素。DOM 需要了解您需要删除的元素，以及它的父元素， 所以无法在不引用父元素的情况下删除某个元素。

​ 2.如果不清楚父元素，可以先找到您需要删除的子元素，然后使用parentNode属性来查找其父元素

2.4 修改页面中的某一个节点

replaceChild() 方法: 替换 HTML DOM 中的元素。

例：点击替换获取第一个子元素创建新的文本节点并替换掉第一个子元素的文本

替换前：

在这里插入图片描述

替换后：

在这里插入图片描述

<ul id="myList">
     <li id="a">hello</li><li id="b">world</li>
</ul>
<button onclick="myFunction()">替换</button>

<script>
function myFunction() {
            // 选取第一个子元素：
            var element = document.getElementById("myList").children[0];

            // 创建新的文本节点：
            var newNode = document.createTextNode("JavaScript");

            // 替换文本节点：
            element.replaceChild(newNode, element.childNodes[0]);            
        }
</script>

注：1.replaceChild() 方法可将某个子节点替换为另一个。新节点可以是文本中已存在的，或者是你新创建的。

​ 2.新节点是要插入的节点对象，括号内第一个。之前的节点是要移除的节点对象，括号内的后一个。

​ 3.返回值为替换的新节点。

2.5 复制节点中的某一个节点：

cloneNode() 方法可创建指定的节点的精确拷贝。

cloneNode() 方法 拷贝所有属性和值。

该方法将复制并返回调用它的节点的副本。

cloneNode（true）参数deep是boolean型。true/false

​ true：表示深度复制（将节点及其子节点都进行复制）—- 深拷贝

​ false：表示浅复制（只复制节点而不复制子节点）—- 浅拷贝

例：点击按钮复制最后一个节点追加到对应列表id后面

复制前：

在这里插入图片描述

复制后：

在这里插入图片描述

<button onclick="myFunction()">复制</button>
    <ul id="myList1"><li>JS</li><li id="b">JQ</li></ul>
<ul id="myList2"><li>HTML</li><li>Css</li></ul>

<script>
        function myFunction() {
		   //获取列表id的最后一个节点
            var node = document.getElementById("myList2").lastChild;
		   //将节点复制
            var clone = node.cloneNode(true);
		   //将节点追加到对应的列表id后面
            document.getElementById("myList1").appendChild(clone);            
        }
</script>

2.6 获取元素的非行间样式：

getComputedStyle（非IE使用）、currentStyle（IE使用）

例：获取背景颜色的属性值赋值到对应的文本

效果图：

在这里插入图片描述

<h2 id="test" style="background-color:pink">getComputedStyle() 方法</h2>
<p id="demo"></p>
<script>
window.onload=function(){
            //获取id
            var get = document.getElementById("test");
            //获取id的样式
            var cssObj = window.getComputedStyle(get, null);
            //通过样式找到对应背景颜色的属性值
            var bgColor = cssObj.getPropertyValue("background-color");
            //将属性值赋给对应的文本id 
            document.getElementById("demo").innerHTML = bgColor;
        }
</script>

三、课后作业

  • 预习

  • 完成课堂上机练习

    • 练习1：单击“删除”按钮，使用parentNode访问当前节点的父亲节点等，使用removeChild( )删除当前商品

      效果如下；

      在这里插入图片描述

      素材：在这里插入图片描述

      在这里插入图片描述

    • 练习2： 完成动态生成表格案例，具体要求如下。

      1. 使用数组把学生数据模拟出来。

      2. 动态创建行、单元格。

      3. 为单元格填充数据。

      4. 提供“删除”链接，可删除所在的行。

      案例的实现效果如下图所示。

      在这里插入图片描述

功夫熊猫大侠
关注
  • 28
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
【JavaScript】DOM元素操作节点增删改查
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
03-30 1720
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。通过这些DOM接口可以改变网页的内容、结构和样式。网页中的所有内容都是节点（标签、属性、文本、注释等等），在DOM中，节点使用Node来表示。HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。
17.JAVA-Dom、Sax解析XML详解
抵抗时间扭曲，坚持做一件有意义的事
12-11 162
在JAVA中,解析有三种方式: Dom解析(支持改删,耗内存)、 Sax解析(不支持改删,不耗内存)、 Pull解析(在Android中推荐使用的一种解析XML的方式,在下章18.JAVA-pull解析XML学习) 1.支持Dom与Sax解析的开发包 分为两种. JAXP: 由sun公司推出的解析标准实现(本章只学习该包的解析方法) Dom4j: 一种开源的解析开发包. jaxp是...
XML文件解析之--DOM与SAX
ambbzmz1276的博客
09-27 158
xml文件又称‘可扩展性标记语言’，可以对文档和数据进行结构化处理，从而能够在部门、客户和供应商之间进行交换，实现动态内容生成，企业集成和应用开发。 我们在进行web开发的时候离不开xml文件，xml文件无处不在，这次就烂讨论一下xml常用的解析方法及其CRUD操作，欢迎大家交流指正。 我们先来看看两种解析方式的过程，比较一下他们的优劣之处。 SAX解析方式:它对xml...
XML解析--DOM方式和SAX方式的对比
Before_Morning的专栏
03-15 632
在上一节我们已经介绍了XML的相关基本的知识，对XML的结构模型也有了相对的了解。对于XML的解析思想主要有两种方式：DOM方式解析和SAX解析方式。下面我们就对这两种方式进行对比学习。        一、 DOM解析方式思想            1.DOM解析是构建整个文档驻留内存的树模型。             看到上面的DOM解析XML的思想，也许觉得很抽象。下面我们就通过一个XM
使用dom4j解析、增删改xml文档，xPath技和SAX解析
我是沈君哦！
02-21 955
一、dom4j解析xml 二、删改xml文档 三、xPath技术 一、dom4j解析xml xml 是一种可可扩展标记语言，用于标记电子文件使其具有结构性的标记语言。标记指计算机能理解得信息符号，通过此种标记，计算机之间可以处理包含各种的信息。也可以用来标记数据，定义数据类型，是一种允用户对自己的标记语言进行定义的源语言。xml文件除了给开发者看，更多情况是程序读取xml文件的内容xml解
什么是Vue中的虚拟DOM和Diff算法？
酸狗的博客
11-02 4219
Vue 虚拟DOM Diff算法 思考什么是虚拟DOM为什么使用虚拟DOM真实DOM和虚拟DOM的区别DOM Diff当数据发生变化时，Vue是怎么更新节点的?1. patch2. patchVnode3. updateChildren 总结 思考 使用了Vue，使用了React，大家或多或少都有听过虚拟DOM，那么他和我们经常打交道的真实DOM有什么区别呢，另外，他到底是个啥玩意儿呢？ 什么是虚拟DOM 所谓的Virtual d...
XML两种解析思想：DOM和SAX
wujingjing_crystal的专栏
09-27 3666
一、什么是XML英文全称为Extensible Markup Language，翻译过来为可扩展标记语言。现实生活中存在着大量的数据，在这些数据之间往往存在一定的关系，我们希望能在计算机中保存和处理这些数据的同时能够保存和处理他们之间的关系。XML就是为了解决这样的需求而产生数据存储格式。在XML语言中，它允许用户自定义标签。每一个标签用于描述一段数据； 一个标签可以分为开始标签和结束标签，在开始
心得5--XML编程(CRUD)--dom、sax解析案例分析
ykblog.github.io
10-11 1391
一：DOM解析XMl文档，运用DOM解析方法对XML文档增删改查，该技术要把XMl文档全部读取完存在内存中然后再解析，速度比较慢，而且当改文档内存过大时，会使内存溢出，系统崩溃 packagecom.dom; importjava.io.FileOutputStream; importjava.io.IOException; importjavax.xml.parsers.Document
DOM小结
Little-Gao的博客
07-15 236
目录 01、DOM获取元素的方法（8个） 02、DOM中的节点和关系属性 03、DOM中的节点和关系属性—综合应用 04、DOM增删改 05、DOM增删改—综合应用
略记一次抓取内容后解密及登录的经历
深蓝浅蓝的天
08-09 417
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
【面试经验】滴滴 秋招储备实习 前端面经
litterfinger的博客
08-05 584
时间线：5.15 11点半一面，下午2点半二面。● 不知道盒子宽高情况下水平垂直居中。● scale是怎么放大盒子宽高的。● transform的属性。滴滴秋招储备实习 前端面经。● 文件断点续传+切片上传。● 自我介绍+项目介绍。
小程序支付（前端）
weixin_43993121的博客
08-05 651
【代码】小程序支付（前端）
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 255
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
vue中怎么自定义组件
qinshi501的博客
08-09 572
在开发过程中我们经常需要自定义组件完成特定的功能，比如用户详情页，我增加一个调整余额的按钮，点击以后需要打开一个调整余额对话框，输入调整的金额大小，完成以后关闭弹框同时刷新页面，要怎么实现呢。具体实现是增加一个调整余额弹框的自定义组件组件，包含一个调整按钮，点击按钮就打开这个对话框，里面利用watch监听用户的余额和用户id等信息，同时使用watch回调实时更新余额信息等。这里的refresh后的方法组件刷新的方法，可以在调整完余额后刷新用户最新余额信息。: number // 变动类型：1-用户金额。
基于Martin实现MapboxGL自定义底图
LZUGIS
08-10 587
本文分享基于Martin实现MapboxGL底图的自定义。
c# 使用异步函数实现线程的功能
MaggieWon
08-07 250
c#程序执行时 想要拖动窗口 需要使用线程,但是使用线程 对操作前端窗体很不友好.所以写了一个异步函数,网上搜了一下,貌似异步函数比线程 更加友好,更加现代。做这个功能的原因是 主要是想等程序执行完 走一个提示.用线程很难做到。
Android实时通信：WebSocket与WebRTC的应用与优化
最新发布
陆业聪
08-10 1027
在现代移动应用中，实时通信已经成为一项基础功能。无论是实时聊天、在线游戏，还是实时音视频通信，都需要依赖实时通信技术。本文将介绍两种在Android平台上实现实时通信的主流方法：WebSocket和WebRTC。
Web前端开发具有哪些特点？
weixin_54503231的博客
08-07 264
Web前端开发是基于浏览器的技术，能够在不同的操作系统和设备上运行，实现跨平台的兼容性。前端技术可以通过JavaScript等技术实现丰富的交互效果，如响应用户的点击、表单验证、页面动画等，这些交互特性增强了用户对网页的体验。前端开发可以实现响应式网站，这种网站可以根据不同的终端设备进行内容的布局调整，无需为不同设备开发不同版本的网站，从而降低了开发成本。随着前后端分离的开发模式逐渐成为趋势，前端开发需要更加独立地完成用户界面和交互的开发，但同时也需要与后端开发人员紧密配合，确保数据的正确传输和显示。
Spring配置
cjmyydsds的博客
08-09 250
（2）对于一个类创建多个对象或者第三方的对象，是没有办法加入五大注解的。如果有多个构造函数，需要加入@Autowired指定默认的构造函数。通常一页显示多少事用前端进行控制的，前端通过参数的形式来告诉后端。（2）如果类名前两位为大写那么，bean的名称就是类名称的本身。如果只有一个构造函数，不需要添加@Autowired来进行注入。需要再setter上添加@Autowired注解来进行注入。@bean（这个方法搭配上面的五大注解进行使用）bean的名称为方法名称。配置分为两种用户的配置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

功夫熊猫大侠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值