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

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>

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

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

猜你喜欢

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