本文参考自: 原文地址
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>
最终页面显示效果:控制台输出
刷新浏览器,切换控制台显示方式【方便查看核心信息】: