javascript节点常用的一些方法

最新推荐文章于 2024-05-30 09:16:39 发布

众人寻他千百度

最新推荐文章于 2024-05-30 09:16:39 发布

阅读量205

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45936263/article/details/107216298

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<h3>喜欢的水果</h3>
		<button>添加一张图片</button>
		<button>删除图片</button>
		<button>复制图片</button>
		<button>替换图片</button>
		<div id="imgContainter" style="width: 800px;height: 600px;">
		</div>			
		<div><!--注释节点-->
			文本节点<span class="属性节点">1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
			789
		</div>
		<script type="text/javascript">
			var div =document.getElementsByTagName("div")[1];
			// 常用属性				  		// 输出                 解释
			//alert(div.nodeName);  		// DIV
			//alert(div.nodeType);  		// 1 				    说明是个元素节点
			//alert(div.nodeValue);			// null			  	    返回节点的文本 只用于文本节点
			//alert(div.firstChild);		// object Text 		    【注】是文本节点 ，不是元素节点
			//alert(div.lastChild.nodeValue);//空格78 最后一个元素是文本节点 查看文本节点的值  空格789
			//alert(div.childNodes); 		//[object Comment] 返回一个文本节点加元素节点,注释节点的数组
			//alert(div.childNodes[0]);		//[object Comment]	      这是注释节点  nodeType=8;
			//alert(div.children);  	   //[object HTMLSpanElement] 返回的是元素节点数组
			//alert(div.hasChildNodes());		// true			     判断是否有子节点
			//
			// 常用方法  
			// 添加图片
			var aBtns = document.getElementsByTagName("button");
			var imgContaninter = document.getElementById("imgContainter");
			var i = 1;
			aBtns[0].onclick = function() {
				var fruit = document.createElement("img"); // 创建元素
				fruit.src = "img/f" + i + ".png";
				imgContaninter.appendChild(fruit);         // 插入元素
				if(i == 3) {
					i = 0;
				}
				i++
			}
			// 删除
			aBtns[1].onclick = function() {
				imgContaninter.removeChild(imgContaninter.lastChild);  // 删除元素
			}
			// 拷贝
			aBtns[2].onclick = function() {
				var newNode = imgContaninter.lastChild.cloneNode(true);	// 复制
				imgContaninter.appendChild(newNode);
			}
			// 替換		
			aBtns[3].onclick = function() {
				var newFruit = document.createElement("img"); // 创建元素 
				newFruit.src = "img/f2.png";//被替换的图片
				imgContaninter.replaceChild(newFruit, imgContaninter.lastChild);//替换最后一张
			}	
		</script>
	</body>
</html>

运行结果
在这里插入图片描述

节点的值

对于元素节点，nodeType=1
对于文本节点，nodeType=3
对于属性节点，nodeType=2
对于注释元素，nodeType=8
对于文档元素，nodeType=9

属性

/*
childNodes  	 //存储节点的子节点列表（只读）
dataType     	 //返回次节点的数据类型
documentElement  //返回文档的根元素（可读写）
firstChild   	 //返回当前节点的第一个子节点（只读）
lastChild   	 //返回当前节点最后一个子节点（只读）
nextSibling  	 //返回当前节点的下一个兄弟节点（只读）
nodeName     	 //返回节点的名字（只读）
nodeType    	 //返回节点的类型（只读）
nodeValue    	 //返回节点的文本（可读写）
【注】 nodeValue(用于文本节点) 和 value（表单元素填写的东西）的区别 
（1）	是用来访问其中的其中的文本的内容的，但是其中只能够应用在文本节点上，
如果将nodeValue应用在元素节点上，那么其中就会才出现的问题就是返回的是null。
（2）	注意这里访问其中的文本的时候只能访问其中的就是原本就是标签里面的，如果是其中的通过的是其中的用户在<input>或者是<textarea>中，其中就会出现问题
parentNode   		   //返回父节点（只读）
previousSibling    	   //返回此节点的前一个兄弟节点（只读）
Text         		   //返回此节点及其后代的文本内容
firstElementChild 	   //返回第一个Element节点
lastElementChild  	   //返回最后一个Element节点
nextElementSibling 	   //返回下一个兄弟Element节点
previousElementSibling //返回上一个兄弟Element节点
childElementCount      //子元素的数量
*/

节点操作

/*
document.createElement() 		// 被创建新的节点
node.appendChild(newNode) 		//	添加子节点
node.insertBefore(parentNode)   // 插入节点
node.remove()					//删除节点
node.removeChild()  			// 删除节点
node.removeNode()				// 删除节点
node.replaceChild()				//替换节点
node.replaceNode()				//替换节点
node.cloneNode(boolean)			//是否克隆该节点所有子节点
node.contains(oNode)  			//是否包含某节点
node.hasChildNodes()  			//是否有子节点,返回的是boolean
node.parentNode 				//返回父节点
node.parentElement 				//返回父节点
node.childNodes 				//返回子节点集合
node.children  					//返回子标签节点集合
node.firstChild 				//返回第一个子节点
node.nextSibling  				//返回下一个兄弟节点 返回上一个兄弟节点
node.previousSibling 			//返回上一个兄弟节点
*/

还有很多属性，尝试一下^_吧。

众人寻他千百度

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript节点常用的一些方法

文章目录节点的值属性**方法**节点操作其他节点的值对于元素节点，nodeType=1对于文本节点，nodeType=3对于属性节点，nodeType=2对于注释元素，nodeType=8对于文档元素，nodeType=9属性/*Attributes 存储节点的属性列表（只读）childNodes 存储节点的子节点列表（只读）dataType 返回次节点的数据类型documentElement 返回文档的根元素（可读写）firstChild 返回
复制链接

扫一扫