<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
//1.根据ID查询节点
//2.根据标签名查询节点
//3.根据层次查询节点
// 查询某个节点的亲戚(父亲，孩子，兄弟)
//1)查询父亲
var gz=document.getElementById("gz");
var ul=gz.parentNode;
console.log(gz.parentNode);
//2)查询孩子
//包含空格（了解即可）
console.log(ul.childNodes);
//只含元素(重点掌握)
console.log(ul.getElementsByTagName("li"));
//3)查询兄弟
//某节点.父亲.孩子们[i]
var tj=gz.parentNode.getElementsByTagName("li");
console.log(tj);
//4.根据name查询节点
//一般用于查询一组单选/多选
var radios=document.getElementsByName("sex");
console.log(radios);
}
</script>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li id="gz">广州</li>
<li>深圳</li>
<li>天津</li>
<li>重庆</li>
</ul>
<p>
<input type="radio" name="sex" >男
<input type="radio" name="sex" >女
</p>
</body>
</html>