获取节点和元素对象,JSON,二级联动

最新推荐文章于 2023-10-22 21:17:39 发布

ZX周公子

最新推荐文章于 2023-10-22 21:17:39 发布

阅读量819

点赞数

本文链接：https://blog.youkuaiyun.com/ZXD693/article/details/93880108

版权

本文介绍了如何通过节点关系查找HTML节点，包括nodeType、nodeName和nodeValue等属性的使用，以及详细阐述了JSON的基本概念，如JSON对象的定义、遍历、解析和字符串化的方法。同时提到了二级联动的相关应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，通过节点关系查找节点

document.all 获取文档中所有的节点
1.从一个节点出发开始查找：

  	parentNode	获取当前元素的父节点。

	childNodes  获取当前元素的所有下一级子元素。

	firstChild	获取当前节点的第一个子节点。

	lastChild	获取当前节点的最后一个子节点。

	nextSibling	  获取当前节点的下一个节点。（兄节点）

	previousSibling	获取当前节点的上一个节点。（弟节点）

2.获取节点对象的信息
每个节点都包含的信息的，这些属性是：
nodeType ---- -节点类型
nodeName ---- 节点名称
nodeValue ----- 节点值

nodeType 属性可返回节点的类型：
元素 1 就是标签元素
文本 3 标签元素中的文本
注释 8 表示为注释
nodeName 属性含有某个节点的名称：
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
nodeValue 属性含有某个节点的名称：
对于文本节点，nodeValue 属性是所包含的文本。
对于属性节点，nodeValue 属性是属性值。
对于注释节点，nodeValue 属性注释内容。
nodeValue 属性对于文档节点和元素节点是不可用的。

二，获取元素对象的属性

parentElement  获取当前元素的父元素对象(不会获取到空文本,或者注释)

firstElementChild  获取父元素的第一个标签对象(不会获取到空文本,或者注释)

lastElementChild  获取父亲元素的最后一个标签对象(不会获取到空文本,或者注释)

previousElementSibling;  获取上一个兄弟元素对象(不会获取到空文本,或者注释)

nextElementSibling  获取下一个兄弟元素对象(不会获取到空文本,或者注释)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="">
			<h1>abc</h1>
		</div>
		<div id="">哈哈哈</div>
		<div id="">
			aasssdddfffggg
		</div>
	</body>
	<script type="text/javascript">
		//通过节点的层级关系,去找元素
		 var allNodes = document.all;
		 for (var i = 0; i < allNodes.length; i++) {
		 	alert(allNodes[i]);
		 }
		 var node = document.body.childNodes[0];
		 node.style.color = "red";
		 node.nextSibling.style.color = "yellow";
		
		var node = document.body.firstElementChild;
		node.style.color="red";
		node.parentElement.style.background="yellow"
		node.nextElementSibling.nextElementSibling.style.fontSize="200px";
	</script>
</html>

三，JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。
定义JSON对象：{‘键名’:值,键名2’:值2}

var stuJSON={'name':'张三','age':23,'sex':true};
			 //取数据:方式1:
			 var name=stuJSON.name;
			 //方式2:
			var age=stuJSON['age'];

3.遍历JSON对象
for(key in JSON对象){
}

var arr=["aaa","bbbb","cccc","dddd"];
			for(index in arr){
				alert(arr[index]);
			}

4.parse()方法将JSON字符串解析成JSON对象;
JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

 var str='{"name":"runoob", "alexa":10000, "site":"www.runoob.com"}';
 var js=JSON.parse(str);

var str = {"name":"zzzz", "site":"http://www.xxxxxx.com"}
str_pretty1 = JSON.stringify(str)

注意：JSON.parse()方法,在解析JSON字符串时,注意JSON字符串要原始格式(JSON字符串没有换行和空格)，否则会出现问题.
5.JSON嵌套

var jsonArr=[{'name':'sss',age:23},{'name':'ddd',age:24},{'name':'fff',age:25}];
			for(index in jsonArr){    //JSON嵌套
				var obj=jsonArr[index];
				for(key in obj){
					alert(key+"==="+obj[key]);

四，二级联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select id="sf" onchange="SF()">
			<option value ="">--省份--</option>
			<option value ="">陕西</option>
			<option value ="">河南</option>
		</select>
		<select id="citys">
			<option value ="">--请选择城市--</option>
		</select>
	</body>
	<script type="text/javascript">
		//省市二级联动
		//获取省份这个标签对象
		var arr=[[],["请选择城市","西安","商洛","宝鸡","咸阳","铜川","渭南","汉中","安康","榆林","延安"],["请选择城市","商丘","郑州","驻马店","南阳","洛阳","开封"]];
		var sheng=document.getElementById("sf");
		var city=document.getElementById("citys");
		
		function SF(){
			//清空旧数据
			city.innerHTML="";
			//alert("选择而来");
			var index=sheng.selectedIndex;
			//alert(index);
			var citys=arr[index];
			for(var i=0;i<citys.length;i++){
				//取出这个省份对应的一维数组里面的城市,显示到第二个下来框
				//创建option对象
				var op=document.createElement("option");
				//创建文本对象
				var text=document.createTextNode(citys[i]);
				//把文本对象放到option之间
				op.appendChild(text);
				//把option放到select之间
				city.appendChild(op);
			}
		}
	</script>
</html>