详解html结构之间的各个关系,层级关系(以列表为例)
生活随笔
收集整理的這篇文章主要介紹了
详解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>
陰影是div的第一個文本節點，占位nodeType為3
陰影是div的第二個元素節點，占位nodeType為1
陰影是div的第三個文本節點，占位nodeType為1
以上是針對childNodes ，如果是children 就不包含文本節點了。
getElement()的結果
Conclusion:
根節點，父節點，子節點，兄弟節點
nodeType 1 表示 （標簽）元素節點 ; 2 表示屬性節點 ；3 表示文本節點
firstChild 第一個節點，包括文本節點； lastChild 最后一個節點 包含文本節點
firstElementChild 第一個元素節點; lastElementChild 最后一個元素節點 是元素！！！！
總結
以上是生活随笔為你收集整理的详解html结构之间的各个关系,层级关系(以列表为例)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oppo售后解锁恢复工具.zip_OPP
- 下一篇： websocket onclose方法什