CH16-DOM元素增删改

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(){//元素节点的nodeNamealert(document.querySelector("#ul_1").nodeName);//属性节点的nodeNamevar node= document.getElementById("ul_1").attributes["class"];alert(node.nodeName);//文本节点的nodeNamealert(document.querySelector("#li_3").firstChild.nodeValue);}

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

nodeValue:节点的值

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

 function test8(){//元素节点的nodeValuealert(document.querySelector("#ul_1").nodeValue);//属性节点的nodeValuevar node= document.getElementById("ul_1").attributes["class"];alert(node.nodeValue);//文本节点的nodeValuealert(document.querySelector("#li_3").firstChild.nodeValue);}

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

nodeType：节点类型

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

​ 2：表示属性节点

​ 3：表示文本节点

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

 function test9(){//元素节点的nodeTypealert(document.querySelector("#ul_1").nodeType);//属性节点的nodeTypevar node= document.getElementById("ul_1").attributes["class"];alert(node.nodeType);//文本节点的nodeTypealert(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标签";// 追加到 bodydocument.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");//追加到bodydocument.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() {//获取idvar 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(){//获取idvar 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. 提供“删除”链接，可删除所在的行。

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

      在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/44720.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【逆向】-异或-分组异或2

【逆向】-异或-分组异或2

IDA查看源代码 src长度32&#xff0c;encrypt函数加密&#xff0c;工4个参数&#xff0c;_FFFC双击&#xff0c;可以看到是个长度为7的固定值FnTest! 加密函数将4个参数又重新命名&#xff0c;混淆视听&#xff0c;但是还是可以看到是嵌套循环&#xff0c;动态调试直接看结果可…
阅读更多...
ArcGIS Pro SDK （八）地理数据库 8 拓扑

ArcGIS Pro SDK （八）地理数据库 8 拓扑

ArcGIS Pro SDK &#xff08;八&#xff09;地理数据库 8 拓扑 文章目录 ArcGIS Pro SDK &#xff08;八&#xff09;地理数据库 8 拓扑1 开放拓扑和进程定义2 获取拓扑规则3 验证拓扑4 获取拓扑错误5 标记和不标记为错误6 探索拓扑图7 找到最近的元素 环境&#xff1a;Visual …
阅读更多...
C++11中重要的新特性之 lambda表达式 Part two

C++11中重要的新特性之 lambda表达式 Part two

序言 在上一篇文章中&#xff0c;我们主要介绍了 C11 中的新增的关键词&#xff0c;以及 范围for循环 这类语法糖的使用和背后的逻辑。在这篇文章中我们会继续介绍一个特别重要的新特性分别是 lambda表达式 。 1. lambda表达式 1.1 lambda的定义 C11 中的 lambda表达式 是一种…
阅读更多...
昇思25天学习打卡营第19天 | ResNet50迁移学习再续

昇思25天学习打卡营第19天 | ResNet50迁移学习再续

训练模型部分代码解析 构建Resnet50网络 两行初始化代码 weight_init Normal(mean0, sigma0.02)这行代码定义了一个初始化器weight_init&#xff0c;它将使用均值为0&#xff0c;标准差为0.02的正态分布来初始化网络中的权重。这种初始化策略有助于在网络的初始阶段避免梯度…
阅读更多...
Java基础之集合

Java基础之集合

集合和数组的类比 数组: 长度固定可以存基本数据类型和引用数据类型 集合: 长度可变只能存引用数据类型存储基本数据类型要把他转化为对应的包装类 ArrayList集合 ArrayList成员方法 添加元素 删除元素 索引删除 查询 遍历数组
阅读更多...
day30【LeetCode力扣】18.四数之和

day30【LeetCode力扣】18.四数之和

day30【LeetCode力扣】18.四数之和 1.题目描述 给你一个由 n 个整数组成的数组 nums &#xff0c;和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]] &#xff08;若两个四元组元素一一对应&#xff0c;则认为两个…
阅读更多...
Linux: Mysql环境安装

Linux: Mysql环境安装

Mysql环境安装&#xff08;Centos&#xff09; 前言一、卸载多余环境1.1 卸载mariadb1.2 查看并卸载系统mysql和mariadb安装包 二、换取mysql官方yum源三、安装并启动mysql服务3.1 yum源加载3.2 安装yum源3.3 安装mysql服务3.3.1 安装指令3.3.2 GPG密钥问题解决方法3.3.3 查看是…
阅读更多...
循环结构(一)——for语句【互三互三】

循环结构(一)——for语句【互三互三】

文章目录 &#x1f341; 引言 &#x1f341; 一、语句格式 &#x1f341; 二、语句执行过程 &#x1f341; 三、语句格式举例 &#x1f341;四、例题 &#x1f449;【例1】 &#x1f680;示例代码: &#x1f449;【例2】 【方法1】 &#x1f680;示例代码: 【方法2】…
阅读更多...
【C++ 编程】引用 - 给变量起别名、浅复制

【C++ 编程】引用 - 给变量起别名、浅复制

基本语法&#xff1a;数据类型 &别名 原名int a 10; int &b a;引用必须初始化 (❌ int &b;)&#xff0c;初始化后不可改变 (int c 5; b c&#xff1a;b 没有变成c的别名&#xff0c;而是 a、b 对应的值变更为了 c 的值)本质是指针常量, 浅复制 【黑马程序员匠…
阅读更多...
Cartographer重入门到精通（二）：运行作者demo及自己的数据集

Cartographer重入门到精通（二）：运行作者demo及自己的数据集

在demo数据包上运行cartographer 现在Cartographer和Cartographer的Ros包已经都安装好了&#xff0c;你可以下载官方的数据集到指定的目录&#xff08;比如在Deutsches Museum用背包采集的2D和3D 数据&#xff09;&#xff0c;然后使用roslauch来启动demo。 注&#xff1a;la…
阅读更多...
IO半虚拟化-Virtio学习笔记

IO半虚拟化-Virtio学习笔记

参考&#xff1a;《深入浅出DPDK》及大佬们的各种博客 Virtio简介&运行环境 Virtio 是一种用于虚拟化环境中的半虚拟化 I/O 框架&#xff0c;目的是在虚拟机和主机之间提供一种高效的 I/O 机制。关于什么是半虚拟化和全虚拟化&#xff1a;见SR-IOV学习笔记。 YES&#xf…
阅读更多...
PDMS二次开发（二十二）——关于1.0.3.1版本升级内容的说明

PDMS二次开发（二十二）——关于1.0.3.1版本升级内容的说明

目录 1.更新内容介绍2.效果演示3.关于重构自动添加焊口功能的说明3.1错误示例 3.问题交流1.创建焊口提示失败2.程序崩溃 1.更新内容介绍 在添加焊口之前先清除当前branch已有焊口&#xff1b;显示清除焊口的个数和添加焊口的个数&#xff1b;重构了自动添加焊口功能&#xff0…
阅读更多...
值得关注的数据资产入表

值得关注的数据资产入表

不错的讲解视频&#xff0c;来自&#xff1a;第122期-杜海博士-《数据资源入表及数据资产化》-大数据百家讲坛-厦门大学数据库实验室主办第122期-杜海博士-《数据资源入表及数据资产化》-大数据百家讲坛-厦门大学数据库实验室主办-20240708_哔哩哔哩_bilibili
阅读更多...
《A++ 敏捷开发》- 10 二八原则

《A++ 敏捷开发》- 10 二八原则

团队成员协作&#xff0c;利用项目数据&#xff0c;分析根本原因&#xff0c;制定纠正措施&#xff0c;并立马尝试&#xff0c;判断是否有效&#xff0c;是改善的“基本功”。10-12章会探索里面的注意事项&#xff0c;13章会看两家公司的实施情况和常见问题。 如果已经获得高层…
阅读更多...
Linq的常用方法

Linq的常用方法

LINQ&#xff08;Language Integrated Query&#xff09;是.NET Framework中用于数据查询的组件&#xff0c;它将查询功能集成到C#等.NET语言中。LINQ提供了丰富的查询操作符&#xff0c;这些操作符可以应用于各种数据源&#xff0c;如内存中的集合、数据库、XML等。以下是一些…
阅读更多...
java中的String 以及其方法(超详细！！！)

java中的String 以及其方法(超详细！！！)

文章目录 一、String类型是什么String不可变的原因(经典面试题)String不可变的好处 二、String的常用构造形式1.使用常量串构造2.使用newString对象构造3.字符串数组构造 三、常用方法1. length() 获取字符串的长度2. charAt() 获取字符串中指定字符的值 (代码单元)3. codePoin…
阅读更多...
水的几个科学问题及引发的思考

水的几个科学问题及引发的思考

水的几个科学问题及引发的思考 两个相同的容器A和B&#xff0c;分别装有同质量的水&#xff0c;然后&#xff0c;在A容器中加入水&#xff0c;在B容器中加入冰&#xff0c;如果加入水和冰的质量相同。问&#xff0c;容器B的水位将与容器A的水位相同吗&#xff08;假设冰未融化时…
阅读更多...
Log4j的原理及应用详解（二）

Log4j的原理及应用详解（二）

本系列文章简介&#xff1a; 在软件开发的广阔领域中&#xff0c;日志记录是一项至关重要的活动。它不仅帮助开发者追踪程序的执行流程&#xff0c;还在问题排查、性能监控以及用户行为分析等方面发挥着不可替代的作用。随着软件系统的日益复杂&#xff0c;对日志管理的需求也日…
阅读更多...
MySQL和SQlServer的区别

MySQL和SQlServer的区别

MySQL和SQlServer的区别 说明&#xff1a;在一些常用的SQL语句中&#xff0c;MySQL和SQLServer存在有一些区别&#xff0c;后续我也会将我遇到的不同点持续更新在这篇博客中。 1. 获取当前时间 SQLServer&#xff1a; -- SQLServer -- 1.获取当前时间 SELECT GETDATE(); --…
阅读更多...
Vue2切换图片小案例

Vue2切换图片小案例

代码中 v-show "index>0",是表示下标只有大于零时上一页按钮才会显示v-show "index<list.length-1",是表示下标只有小于list数组的最大值才会显示&#xff0c;反之隐藏。click "index--"和click "index",是点击按钮后加减数…
阅读更多...
最新文章

Copyright @ 2022~2023