- parentNode , 表示当前节点的父节点
- previousSibling , 表示当前节点的前一个兄弟节点
- nextSibling , 表示当前节点的后一个兄弟节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "total">
<div class = "inner">
<p>你最喜欢哪个城市</p>
<ul id="city">
<li id="bj">北京</li>
<li>杭州</li>
<li>吉林</li>
<li>上海</li>
</ul>
<br>
<br>
<p>你的手机操作系统是什么</p>
<ul id="phone"><li>IOS</li><li id="android">android</li></ul>
</div>
</div>
<br>
<div>
<button id = "btn07">获取bj的父元素</button>
<button id = "btn08">返回#id为android的前一个兄弟节点</button>
</div>
<script>
function myClick(idstr , fun){
var btn = document.getElementById(idstr);
btn.onclick = fun;
}
myClick("btn07",function(){
var bj = document.getElementById("bj");
var pn = bj.parentNode;
alert(pn.innerText);
});
myClick("btn08",function(){
var and = document.getElementById("android");
var ps = and.previousSibling;
alert(ps);
})
</script>
</body>
</html>