详解html结构之间的各个关系,层级关系(以列表为例)

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>层级关系查找元素</title></head><body><div id = "div">hello<ul id = ""><li>li1</li><li>li2</li><li>li3</li><li>li4</li></ul></div><br /><ul id = "ul"><li>li1</li><li>li2</li><li>li3</li><li>li4</li></ul><script type="text/javascript">//父级查找子级 function getElement(){var div = document.getElementById("div");//得到div下面所有节点var elements = div.childNodes;//现在得到ul下面的所有childNodes，就是所有li div有 0,1,2 三个子节点 var lis1 = elements[1].childNodes;for (var i = 0 ; i < lis1.length;i ++){document.write(lis1[i].nodeName + " " + lis1[i].nodeType);}document.write("<hr />");//ul 下的所有元素节点，即四个livar lis2 = elements[1].children;for (var i = 0 ; i < lis2.length;i ++){document.write(lis2[i].nodeName + " " + lis2[i].nodeType + " "+ lis2[i].innerText + "<br />");}}//子级查找父级,父节点function parents(){var div = document.getElementById("div");var p = div.parentNode;//bodyvar pp = p.parentNode;//htmlvar ppp = pp.parentNode;//nodeType 9,nodeName documentvar v = div.parentElement;//父节点名alert(ppp.nodeType + ppp.nodeName + pp.innerHTML)}//创建元素图片function create(){var img = document.createElement("img");img.src = "../b1.gif";document.body.appendChild(img);}//移除元素function del1(){var ul = document.getElementById("ul");var lis = ul.children;ul.removeChild(lis[0]);}</script><button onclick="getElement()">find my son</button><button onclick="parents()">find my father</button><button onclick="create()">create a element</button><button onclick="del1()">del</button></body>
</html>