Web开发基础-JavaScript-19

JS中DOM对象的使用

案例演示:

<!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 class="north">北京</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 type="text/javascript">
		
			console.log("-----1.根据ID查询--------");
			var ul = document.getElementById("city");
			console.log(ul);
			
			console.log("-----2.根据标签名查询------");
			//document.getElementsByTagName(标签名);
			//在文档下查询所有满足这个标签名的节点
			var lis = document.getElementsByTagName("li");
			console.log(lis);
			//父亲.getElementsByTagName(标签名)
			//在父亲下查询所有满足这个标签名的节点
			lis = ul.getElementsByTagName("li");
			console.log(lis);
			
			console.log("-------3.根据class查询------");
			lis = document.getElementsByClassName("south");
			console.log(lis);
			
			console.log("--------4.根据name查询-------");
			//通常用来获取表单控件
			var inputs = document.getElementsByName("sex");
			console.log(inputs);
			
			console.log("------5.根据层次关系查询-------");
			//查询父亲
			var sh = document.getElementById("sh");
			console.log(sh.parentNode);
			
			//查询孩子
			console.log(ul.childNodes);//带空格[带有文本节点]
			console.log(ul.children);//不带空格
			console.log(ul.getElementsByTagName("li"));
			
			//查询哥哥
			console.log(sh.previousElementSibling);
			//查询弟弟
			console.log(sh.nextElementSibling);
			//查询任意的兄弟：节点.父亲.孩子[n]
			console.log(sh.parentNode.children[3]);
		</script>
	</body>
</html>

最终页面显示效果：控制台输出

刷新浏览器，切换控制台显示方式【方便查看核心信息】：

Web开发基础-JavaScript-19

猜你喜欢