DOM元素查询技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/jettzed/article/details/52230940

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>DOM</title>
	</head>
	<body>
		<ol id="province">
			<li>浙江省</li>
			<li>河北省</li>
			<li>江苏省</li>
		</ol>
		<ul id="city">
			<li>北京</li>
			<li class="south" id="sh">上海</li>
			<li class="south">广州</li>
			<li class="south">深圳</li>
		</ul>
		<p>
			<input type="radio" name="sex"/>男
			<input type="radio" name="sex"/>女
		</p>
		
		<script>
			//1.根据id查询节点
			//2.根据标签名查询节点
			var lis = 
				document.getElementsByTagName("li");
			console.log(lis);
			var ul = 
				document.getElementById("city");
			var cities = 
				ul.getElementsByTagName("li");
			console.log(cities);
			//3.根据class查询节点
			var south = 
				document.getElementsByClassName("south");
			console.log(south);
			//4.根据name查询节点
			var radios = 
				document.getElementsByName("sex");
			console.log(radios);
			//5.根据关系查询节点
			console.log(ul.childNodes);//含空格
			console.log(ul.children);//不含空格
			console.log(ul.parentNode);
			var sh = 
				document.getElementById("sh");
			//哥哥
			console.log(sh.previousElementSibling);
			//弟弟
			console.log(sh.nextElementSibling);
			//任意的兄弟
			var sz = sh.parentNode.children[3];
			console.log(sz);
		</script>
	</body>
</html>