JavaScript中Node节点对象的增、删、改 、查

最新推荐文章于 2023-08-31 20:41:26 发布
最新推荐文章于 2023-08-31 20:41:26 发布
阅读量603 收藏
点赞数
分类专栏： JavaScript 文章标签： Node对象 元素的增删改查
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/halo1416/article/details/82534635
版权

Node节点对象？
        HTML文档中的每一个标签都是一个节点对象，节点对象具有自己的属性和方法。        
 Node节点对象作用？
        可以动态的添加、修改(替换)、删除、克隆html元素节点。        
 如何操作节点？
        Node节点对象的属性和方法解决。

1. 查   ==>> 后面需要用到，先学

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<select class="testLei" id="city">
			<option value="cd">成都</option>
			<option value="cq">重庆</option>
			<option value="km">昆明</option>
		</select>
		<script type="text/javascript">
			//1.常用的Node对象的属性:
			/*
			parentNode	父节点
			
			firstChild	列表中的第一个节点
			firstElementChild  第一个元素节点
			
			lastChild	列表中的最后一个节点
			lastElementChild 最后一个元素节点
			
			childNodes	所有子节点的集合
			
			previousSibling	上一个兄弟节点
			previousElementSibling	上一个兄弟元素节点
			
			nextSibling	下一个兄弟节点
			nextElementSibling  下一个兄弟元素节点
			
			
			nodeName	节点名称
			nodeValue	节点值
			nodeType	节点类型
			
			getAttributeNode("属性的名称")  获取属性节点
			*/
			var city=document.getElementById("city");
			var ops=city.options;
			
			//option的父亲是select
			console.log(ops[0].parentNode);
			
			//找大儿子，文本或子元素
			console.log(city.firstChild);
			console.log(city.firstElementChild);
			
			//找幺儿子，文本或子元素
			console.log(city.lastChild);
			console.log(city.lastElementChild);
			
			//找所以的儿子的集合
			console.log(city.childNodes);
			var sons=city.childNodes;
			for (var i = 0; i < sons.length; i++) {
			    console.log(sons[i]);
			}
			
			//找兄弟
			console.log(ops[1].nextSibling);
			console.log(ops[1].nextElementSibling);
			
			
			//------------------------------------------------------------------
			
			//输出元素节点名称、值、类型
			//city 是一个元素节点
			console.log(city.nodeName,city.nodeValue,city.nodeType);
			
			//输出文本节点名称、值、类型
			var textNode=city.firstElementChild.firstChild;//第一option的文本，即“成都”
			console.log(textNode.nodeName,textNode.nodeValue,textNode.nodeType);
			
			//输出属性节点名称、值、类型
			var shuxingNode=city.getAttributeNode("class");
			console.log(shuxingNode.nodeName,shuxingNode.nodeValue,shuxingNode.nodeType);
			
			//-------------------------------------------------------------------
			/*
				               nodeName	     nodeValue	nodeType
				Element(元素)	           标签名称	     null	    1
				Attribute(属性)  属性的名称	              属性的值	    2
				Text(文本)	    #text	     文本的内容  	3
		    */
		</script>
	</body>
</html>

2. 增

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*
			1.增加的操作:
			createElement("标签名称") 	创建一个元素节点
			createTextNode("文本的内容") 	创建文本节点
			setAttribute("属性名称"，"属性的值")	设置属性(创建属性节点)
			
			父元素.appendChild("子元素节点")  在父元素的末尾添加一个儿子节点
			父元素.insertBefore("新的节点", "指定位置的节点")	在父元素的指定位置插入一个新的节点
			*/
			
			//添加一个a标签，href属性为http://www.itsource.cn，内容为”源码时代教育”，添加到网页的body中
			
			//添加节点的五部曲:
			//(1)创建元素节点
			var a=document.createElement("a");
			
			//(2)创建文本节点
			var aText=document.createTextNode("源码时代教育");
			
			//(3)创建属性节点
			a.setAttribute("href","http://www.itsource.cn");
			
			//(4)文本值A的儿子
			a.appendChild(aText);
			
			//(5)把创建的所有元素（标签，属性，文本）添加到指定位置
			document.body.appendChild(a);
		</script>
		<select class="testLei" id="city">
			<option value="cd">成都</option>
			<option value="cq">重庆</option>
			<option value="km">昆明</option>
		</select>
		<script type="text/javascript">
			//在重庆的前面加入一个选项是贵州
			//(1)找父亲
			var city=document.getElementById("city");
			
			//(2)创建一个option标签
			var op=document.createElement("option");
			
			//(3)创建一个文件节点 贵州
			var opText=document.createTextNode("贵州");
			
			//(4)设置option的value属性
			op.setAttribute("value","gz");
			op.setAttribute("selected","selected")
			
			//(5)把文本添加到选项里面
			op.appendChild(opText);
			
			//(6)添加到结尾就用appendChild,添加到自定位置就用insertBefore
			city.insertBefore(op,city.options[1]);
		</script>
	</body>
</html>

3. 改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<select class="testLei" id="city">
			<option value="cd">成都</option>
			<option value="cq">重庆</option>
			<option value="beijing">beijing</option>
			<option value="tianjin">天津111</option>
			<option value="wh">武汉</option>
			<option value="km">昆明</option>
		</select>
		<script type="text/javascript">
			//replaceChild(newnode, oldnode) 将childNodes中的oldnode替换成newnode
			
			var city=document.getElementById("city");
			var ops=city.options;
			
			//方法1   直接修改属性的值
			//ops[2].text="北京";
			ops[2].innerText="北京";
			ops[2].value="bj";
			ops[2].setAttribute("name","测试");
			
			//方法2
			//创建一个新的节点
			var op=document.createElement("option");
			var opText=document.createTextNode("天津");
			op.appendChild(opText);
			op.setAttribute("value","tj");
			op.setAttribute("selected","selected");
			
			//用新的节点替换旧的节点
			city.replaceChild(op,ops[3]);			
			
		</script>
	</body>
</html>

4. 删

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<select class="testLei" id="city">
			<option value="cd">成都</option>
			<option value="cq">重庆</option>
			<option value="beijing">beijing</option>
			<option value="tianjin">天津111</option>
			<option value="wh">武汉</option>
			<option value="km">昆明</option>
		</select>
		<script type="text/javascript">
			//removeChild(node)	从childNodes中删除node
			//remove()  找到自己干掉自己
			//hasChildNodes()	当有子节点时返回真true，否则为假false
			
			
			//删除单个指定的节点--武汉
			//city.removeChild(ops[4]);
			ops[4].remove();
			
			//删除所的节点
			//最简单的方法（推荐）
			//city.innerHTML="";
			
			//用while循环来删除所有
			//只要有儿子，就依次干掉儿子
			while (city.hasChildNodes()){
				city.removeChild(city.firstChild);
			}
		</script>
	</body>
</html>

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出

halo1416
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中对DOM节点的访问、创建、修改、删除
10-23
主要介绍了JavaScript中对DOM节点的访问、创建、修改、删除,是JavaScript入门学习中的基础知识,需要的朋友可以参考下
rosnodejs:使用Node.js在JavaScript中编写ROS节点的客户端库
05-06
rosnodejs 安装 npm install rosnodejs 启动一个节点 const rosnodejs = require('rosnodejs'); rosnodejs.initNode('/my_node') .then(() => { // do stuff }); 发布/订阅 const nh = rosnodejs.nh; const sub = nh.subscribe('/chatter', 'std_msgs/String', (msg) => { console.log('Got msg on chatter: %j', msg); }); const pub = nh.advertise('/chatter', 'std_msgs/String'); pub.publish({ data: "hi" }); UDP运输（实验性） const nh
tree-node:树节点链接HTML节点
05-18
树节点 树节点链接HTML Node类。 组件安装 component install brighthas/tree-node Node.js安装 npm install tree-node 原料药 要求 var Node = require("tree-node"); 创造 var node = new Node(); #createChild（） var rootNode = new Node(); var childNode = root.createChild(); #getNode（childId） return a node. if no return null. #appendChild（child） var rootNode = new Node(); var node = new Node(); root.appendChild(node) .
browserify-node:在节点环境中生成客户端javascript
06-05
关于 browserify-node 用于 browserify 生成客户端代码的转换器。 ＃＃＃信息 包含具有node.js扩展名的文件 在这个文件中定义导出函数，它返回客户端 js 代码的字符串 //test.node.js module . exports = function ( ) { return "{hello: \"world\"}" ; } 使用test.node.js基础结构需要test.node.js文件 var test = require ( "test.node" ) ; test . hello === "world" ; // true 安装 npm install browserify-node --save-dev 例子 例如我们要加载异步文本文件 //text.node.js var fs = require ( "fs" ) ;
Node-Assignment:节点JS中的Web API分配
05-22
节点分配 Web API的分配 恢复数据库 在DBever中，将一个数据库名称指定为Assignment2 从右键菜单中选择工具，然后还原 从数据库文件夹名称中选择文件作为Assignment2.sql ＃运行项目 命令： npm开始
js对象赋值更改原对象
zhuyuyaya的博客
08-24 255
关于数组和对象赋值的遗漏点
Node节点对象
love07070707的博客
01-14 570
nodeName 节点名称 nodeType 节点类型 nodeValue 节点的值<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <input type="text" id="nameId" value="zhangsan" /> <span id="
关于vue.js使用wangEditor3 基本设置和内容修改问题
weixin_47483275的博客
04-04 1120
富文本编辑器wangEditor修改
js的node对象(节点的使用)
全场梦游c的博客
03-16 3639
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; function copy1(){ var i1=document.getElementById("i1")
用node.js模块向数组添加对象
m0_67296095的博客
04-25 2612
1.先在文件夹里创建一个JSON文件,里面有一个数组,数组里面有两个对象 2.再创建一个js文件,再js文件里面书写内容,通过node模块向数组里面添加一个对象 //思路 //1.读出这个文件,读出来之后是字符串格式的 //2.JSON.parse(JSON字符串格式)==>数组 //3.数组.push() //4. 重新写回去-转回字符串 //5.覆盖写入 //引用核心模块fs,path const fs = require('fs') const path = require('pat
js为Object对象动态添加属性和值
热门推荐
天马3798
03-01 15万+
为Object对象动态添加属性和值 方式1： var obj = {}; //或者 var obj=new Object(); var key = "name"; var value = "张三丰" obj[key] = value; console.info(obj); 方式2，使用eval() 动态解析字符串表达式 var obj = {}; var key = "name"; var
对象的属性特征的修改和获取Object.defineProperty()与Object.getOwnPropertyDescriptor()
fengqixuejian的博客
08-31 86
1、Object.defineProperty(obj,prop,descriptor) 该方法用来配置对象单个属性的属性特征 obj:目标对象 prop：要修改的属性 descriptor：修改当前属性的特征 当把属性gender的属性特征writable修改为false后,即使将‘女’赋值给gender仍然没有修改 当把属性gender的属性特征configurable修改为false后，即使用delete删除gender，也没有生效。
JS 之Node节点的 属性、方法 &获取
xiongfeng
10-22 2万+
JS Node节点的常见属性和方法使用 & 如何获取相应节点和值 一、节点的常用属性和方法 （一）通过具体的元素节点调用如下方法和属性 《1》getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点 《2》appendChild(oNode) 方法给标签对象添加子节点。oNode是要添加的子节点。 《3》removeChild(oNode) removeChild方法删除子节
Node常用的API
yang031997的博客
03-20 482
Node常用的API Array: splice() 添加/删除/替换数组元素 定义： splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目 语法： array.splice(index,howmany,item1,…,itemX) 删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两...
前端循环根据条件对象内赋值_前端面试真题（3）
weixin_39964573的博客
11-30 1519
28、 什么是闭包（closure），为什么要用它？简单的理解是函数的嵌套形成闭包，闭包包括函数本身已经它的外部作用域使用闭包可以形成独立的空间，延长变量的生命周期，报存中间状态值29、javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？意思是使用严格模式，使用严格模式，一些不规范的语法将不再支持30、如何判断一个对象是否属于某个类？ Instanceof c...
Node对象的一些方法
weixin_34249367的博客
08-30 352
Node对象是什么提供了 DOM的标准规范提供了Node对象，该对象主要提供了解析DOM节点树结构的属性和方法，DOM树结构主要是依靠节点进行解析，称为DOM节点树结构。Node对象是解析DOM节点树结构的主要入口。 Node对象时继承于EventTarget对象的，EventTarget是一个用于接受时间的对象。 Document对象...
Node对象
qq_44336097的博客
11-19 568
* Node：节点对象，其他5个的父对象 * 特点： 所有dom对象都可以被认为是一个节点 * 方法： * CRUDdom树： * appendChild():向节点的子节点列表的结尾添加新的子节点。 * removeChild():删除（并返回）当前节点的指定子节点。 * replaceChild():用新节点替换一个子节点。 * 属性： * parentNode: 返回节点的父节点 <!--Node对象--> <!DOCTYPE html> &l
html文档中怎么区分节点对象节点类型,JavaScript文档对象模型（DOM）——节点层次Node类型...
weixin_32224617的博客
06-03 734
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点树，允许添加、移除和修改页面的一部分。DOM1级为基本的文档结构即查询提供了接口。节点层次DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息及(或)标记。每个节点都拥有各自的特定、数据和方法，另外也与其它节点存在某种...
原生DOM的Node对象
一碗周
12-09 319
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 这是【从头学前端】系列文章的第四十二篇-《Node对象》 概述 Node对象是什么 DOM的标准规范中提供了Node对象，该对象主要提供了了用于解析DOM节点树结构的属性和方法。 DOM树结构主要是依靠节点进行解析，称为DOM节点树结构。Node对象是解析DOM节点树结构的主要入口。 Node对象提供的属性和方法，可以实现遍历节点、插入点和替换节点等操作。 Node对象并不像Document对象一样，提供可.
用js实现图的增删改查
最新发布
09-10
### 回答1： 好的。 使用 JavaScript 实现图的增删改查，可以使用以下方法： 增加节点： - 可以使用图的 addVertex(value) 方法向图中添加一个新节点，其中 value 是新节点的值。 增加边： - 可以使用图的 addEdge(vertex1, vertex2) 方法向图中添加一条边，其中 vertex1 和 vertex2 是节点的值。 删除节点： - 可以使用图的 removeVertex(value) 方法从图中删除节点，其中 value 是节点的值。 删除边： - 可以使用图的 removeEdge(vertex1, vertex2) 方法从图中删除边，其中 vertex1 和 vertex2 是节点的值。 查找节点： - 可以使用图的 findVertex(value) 方法查找节点，其中 value 是节点的值。 查找边： - 可以使用图的 findEdge(vertex1, vertex2) 方法查找边，其中 vertex1 和 vertex2 是节点的值。 希望这些信息能帮助到你。 ### 回答2： 使用JavaScript可以很容易地实现图的增删改查功能。在这里，我们可以采用图的邻接矩阵表示法来实现。 首先，我们需要创建一个二维数组来表示图的邻接矩阵。数组的长度为图的顶点数，可以初始化为0，表示没有边连接。当有边连接时，我们将数组中对应位置的元素设为1。 接下来，我们可以实现图的增加边的功能。通过将两个顶点的对应位置设为1，我们可以在图中添加一条边。 图的删除边功能可以通过将两个顶点的对应位置设为0来实现。这样，我们可以在图中删除一条边。 要查询图中是否存在某条边，我们只需要检查对应位置是否为1。如果是，那么表示图中存在这条边。 图的修改功能可以看作是删除边和增加边的结合，即先删除原有的边，然后添加新的边。 总结起来，使用JavaScript实现图的增删改查步骤如下： 1. 创建一个二维数组，表示图的邻接矩阵。 2. 实现添加边功能，将对应位置设为1。 3. 实现删除边功能，将对应位置设为0。 4. 实现查询边功能，检查对应位置是否为1。 5. 实现修改边功能，先删除原有边，然后添加新的边。 通过以上步骤，我们可以很方便地使用JavaScript实现图的增删改查功能。 ### 回答3： 使用JavaScript实现图的增删改查可以通过创建一个图的对象来实现。首先，我们需要定义一个图的类，该类包含添加节点和边、删除节点和边、修改节点和边以及查找节点和边的方法。 1. 添加节点和边： - 添加节点：在图的对象中定义一个`addNode`方法，将节点添加到图的节点集合中。 - 添加边：在图的对象中定义一个`addEdge`方法，将边添加到图的边集合中，同时更新相关节点的邻接信息。 2. 删除节点和边： - 删除节点：在图的对象中定义一个`removeNode`方法，首先删除该节点的相关边，然后将该节点从节点集合中删除。 - 删除边：在图的对象中定义一个`removeEdge`方法，将该边从边集合中删除，同时更新相关节点的邻接信息。 3. 修改节点和边： - 修改节点：在图的对象中定义一个`updateNode`方法，找到该节点并更新节点的属性。 - 修改边：在图的对象中定义一个`updateEdge`方法，找到该边并更新边的属性。 4. 查找节点和边： - 查找节点：在图的对象中定义一个`findNode`方法，根据节点的唯一标识符查找节点。 - 查找边：在图的对象中定义一个`findEdge`方法，根据边的唯一标识符查找边。 使用以上方法，可以方便地实现图的增删改查操作。在实际应用中，可以根据具体需求对图的对象进行扩展，例如增加节点属性、边属性以及其他图算法等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值