<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
<script>
function getNodes(){
var d1 = document.getElementById("d1");
var nodes = d1.childNodes;
console.log(nodes);
}
/**
* 获取 p1 的父节点
*/
function getP1Parent(){
var p1 = document.getElementById("p1");
var parent = p1.parentNode;
console.log(parent);
}
/**
* 获取 p1 的下一个兄弟元素
*/
function getP1Sibling(){
var p1 = document.getElementById("p1");
var next = p1.nextElementSibling;
console.log(next);
}
</script>
</head>
<body>
<button onclick="getNodes()">点</button>
<button onclick="getP1Parent()">父节点</button>
<button onclick="getP1Sibling()">兄弟</button>
<div id="d1">
<p id="p1">子元素1</p>
<p>子元素2</p>
<p>子元素3</p>
<p>子元素4</p>
</div>
</body>
</html>
