如果编程时希望访问某个元素的父元素或子元素，但又不知道父元素的id、name和tag，这时可以根据层级关系进行查找，在DOM中每个节点都具有访问其他节点的属性。
节点属性
（1）parentNode
当前节点的父节点
<body>
<div style="width: 100%; height:200px; background-color: orange;">
<p id="text">hello world</p>
</div>
<input id="change" type="button" value="切换背景颜色"/>
<script type="text/javascript">
var obj = document.getElementById("text");
function change(){
obj.parentNode.style.backgroundColor = "red";
}
document.getElementById("change").onclick = change;
</script>
</body>
（2）childNodes
当前节点的所有子节点
（3）firstChild
当前节点的第一个子节点
（4）lastChild
当前节点的最后一个子节点
（5）previousSibling
当前节点的前一个同级节点
（6）nextSibing
当前节点的后一个同级节点
动态添加和删除节点
1.createElement()添加节点
在父节点上使用appendChild(newnode)方法将制定节点加入到指定节点的父节点的末尾上。
<body>
<select id="list"></select>
<input id="btn" type="button" value="添加下拉框选项"/>
<script type="text/javascript">
document.getElementById("btn").onclick = function (){
var newNode = document.createElement("option");
newNode.className = "opt";
newNode.innerHTML = "新节点";
document.getElementById("list").appendChild(newNode);
}
</script>
</body>
2.使用removeChild删除节点
<body>
<div id="box">
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</div>
<input id="btn" type="button" value="点击删除首行段落"/>
<script type="text/javascript">
document.getElementById("btn").onclick = function (){
var obj = document.getElementById("box");
var firstNode = obj.firstChild;
obj.removeChild(firstNode);
}
</script>
</body>