有關Html頁面節點的簡單理解
阿新 • • 發佈：2019-01-22
這是之前研究web前端的一點經驗，主要針對剛入門還沒怎麼研究的朋友。
因為我發現我在用js，css參與過網站開發專案後仍然沒有理解文字節點與普通節點的差別，所以記下來拿來分享一下。
先上結論：<div>之內有三個節點，包括兩個文字節點和一個<b>節點，就算文字節點裡面沒有任何文字，它也是依舊存在的~
下面是一個簡單的Html介面。
<html> <body> <div>這是div的第一個子節點ObjectText型別 <b>這是div的第二個子節點內容</b> 這是div的第三個子節點ObjectText型別 </div> <br/> <br/> <script type="text/javascript"> //下面用js寫一段程式碼用來顯示我們想看到的資訊 var getTag=document.getElementsByTagName("div") //獲取div節點 document.write("TagName:"+getTag[0].tagName+"<br/>") document.write("nodeValue:"+getTag[0].nodeValue+"<br/>") document.write("innerHTML:"+getTag[0].innerHTML+"這裡用write看不出，alert就能看到全部資訊"+"<br/>") alert(getTag[0].innerHTML+"<br/>") document.write("firstChild:"+getTag[0].firstChild+"<br/>") document.write("firstChild.nodeValue:"+getTag[0].firstChild.nodeValue+"<br/>") document.write("<br/>") document.write("<br/>") for(var i=0;i<getTag[0].childNodes.length;i++) //遍歷子節點 { document.write("innerHTML："+getTag[0].childNodes[i].innerHTML+"<br/>") document.write("nodeValue："+getTag[0].childNodes[i].nodeValue+"<br/>") document.write("型別："+getTag[0].childNodes[i]+"<br/><br/>") } document.write(getTag[0].childNodes[1].firstChild.nodeValue) </script> </body> </html>
下面是執行結果：
TagName:DIV
nodeValue:null
innerHTML:這是div的第一個子節點ObjectText型別 這是div的第二個子節點內容 這是div的第三個子節點ObjectText型別 這裡用write看不出，alert就能看到全部資訊
firstChild[object Text]
firstChild.nodeValue這是div的第一個子節點ObjectText型別
innerHTML：undefined
nodeValue：這是div的第一個子節點ObjectText型別
型別：[object Text]
innerHTML：這是div的第二個子節點內容
nodeValue：null
型別：[object HTMLElement]
innerHTML：undefined
nodeValue： 這是div的第三個子節點ObjectText型別
型別：[object Text]
這是div的第二個子節點內容
總之，我們需要明白的就是，<div>之內有三個節點，包括兩個文字節點和一個<b>節點，就算文字節點裡面沒有任何文字，它也是依舊存在的~