<div style="font-family: 'Helvetica Neue' , Helvetica , Tahoma , Arial , 'Hiragino Sans GB' , STHeiti , 'Microsoft YaHei' , '微软雅黑' , 'WenQuanYi Micro Hei' , STXihei , '华文细黑' , Heiti , '黑体' , SimSun , '宋体' , Song , sans-serif; font-size: 1.15em; font-weight: 100; color: #2f2f2f;"> <div class="preview"> <h2 id="e8aea4e8af86dom" style="margin-top: 1.0em; margin-right: 0; margin-bottom: .6em; margin-left: 0; font-family: inherit; font-weight: 500; line-height: 40px; color: inherit; text-rendering: optimizelegibility; font-size: 31.5px;">認識DOM</h2> <h3 id="dome7baa7e588ab" style="margin-top: 1.0em; margin-right: 0; margin-bottom: .6em; margin-left: 0; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 24.5px;">DOM級別</h3> <p style="margin-top: 0; margin-right: 0; margin-bottom: 1.1em; margin-left: 0; line-height: 1.6;"> </p> <div class="story_image_container story_block_image" style="text-align: center;"> <div class="story_image" style="display: inline-block; position: relative; max-width: 80%;"><img style="max-width:90%" title="1476105439884.jpg" src="http://images2015.cnblogs.com/blog/899091/201610/899091-20161010233225336-459545744.png" alt="enter description here" name="images/1476105439884.jpg"></div> <br><br> </div> <br> <em style="font-style: italic;">註::DOM 0級標準實際上並不存在,只是歷史座標系的一個參考點而已,具體的說,它指IE4.0和Netscape Navigator4.0最初支援的DHTML。 </em> <p style="margin-top: 0; margin-right: 0; margin-bottom: 1.1em; margin-left: 0; line-height: 1.6;"> </p> <h3 id="e88a82e782b9e7b1bbe59e8b" style="margin-top: 1.0em; margin-right: 0; margin-bottom: .6em; margin-left: 0; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 24.5px;">節點類型</h3> <p style="margin-top: 0; margin-right: 0; margin-bottom: 1.1em; margin-left: 0; line-height: 1.6;"> </p> <div class="story_image_container story_block_image" style="text-align: center;"> <div class="story_image" style="display: inline-block; position: relative; max-width: 80%;"><img style="max-width:90%" title="1476106384627.jpg" src="http://images2015.cnblogs.com/blog/899091/201610/899091-20161010233227586-216819980.png" alt="enter description here" name="images/1476106384627.jpg"></div> <br><br> </div> <br> <em style="font-style: italic;">註:1.節點代表元素中的屬性,因為屬性實際上是附屬於元素的,所以屬性節點不能被看作元素的子節點,在DOM中屬性節點不被認為是文檔樹的一部分,即屬性節點被視為包含它的元素節點的一部分,不作為單獨的節點在文檔樹中出現。 2.文檔片段節點作為插入節點時的佔位符。 3.IE不支援字元常數(因為IE無Node物件)。 </em> <p style="margin-top: 0; margin-right: 0; margin-bottom: 1.1em; margin-left: 0; line-height: 1.6;"> </p> <h3 id="dom20ready" style="margin-top: 1.0em; margin-right: 0; margin-bottom: .6em; margin-left: 0; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 24.5px;">DOM ready</h3> <p style="margin-top: 0; margin-right: 0; margin-bottom: 1.1em; margin-left: 0; line-height: 1.6;">Html標籤要經過瀏覽器解析才會變成DOM節點。 <br> <span class="story_inline_image"><img style="max-width:90%" title="1476108920496.jpg" src="http://images2015.cnblogs.com/blog/899091/201610/899091-20161010233228555-779342723.png" alt="enter description here" name="images/1476108920496.jpg"></span><br> <span class="story_inline_image"><img style="max-width:90%" title="1476109658296.jpg" src="http://images2015.cnblogs.com/blog/899091/201610/899091-20161010233229586-204443144.png" alt="enter description here" name="images/1476109658296.jpg"></span><br> DOM ready 比window.onload更優化。 </p> <h3 id="e7bba7e689bfe5b182e6aca1e4b88ee5b58ce5a597e8a784e58899" style="margin-top: 1.0em; margin-right: 0; margin-bottom: .6em; margin-left: 0; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 24.5px;">繼承層次與巢狀規則</h3> <p style="margin-top: 0; margin-right: 0; margin-bottom: 1.1em; margin-left: 0; line-height: 1.6;"><img style="max-width:90%" title="1476111890149.jpg" src="http://images2015.cnblogs.com/blog/899091/201610/899091-20161010233230618-348665150.png" alt="enter description here" name="images/1476111890149.jpg"></p> <div class="story_image_container story_block_image" style="text-align: center;"> <br><br> </div> <span class="story_inline_image"><img style="max-width:90%" title="1476111940879.jpg" src="http://images2015.cnblogs.com/blog/899091/201610/899091-20161010233231430-248256391.png" alt="enter description here" name="images/1476111940879.jpg"></span><br> HTML巢狀規則<br> <span class="story_inline_image"><img style="max-width:90%" title="1476112312893.jpg" src="http://images2015.cnblogs.com/blog/899091/201610/899091-20161010233232414-555292420.png" alt="enter description here" name="images/1476112312893.jpg"></span><br> 塊狀元素與內嵌元素嵌套規則 <p style="margin-top: 0; margin-right: 0; margin-bottom: 1.1em; margin-left: 0; line-height: 1.6;"> </p> <ul style="margin-top: 0; margin-right: 0; margin-bottom: 10px; margin-left: 35px; padding: 0;"> <li> <p style="margin-top: 0; margin-right: 0; margin-bottom: 1.1em; margin-left: 0; line-height: 1.6;">塊元素可以包含內聯元素或某些塊元素,但內聯元素只能包含內聯元素。 </p> </li> <li> <p style="margin-top: 0; margin-right: 0; margin-bottom: 1.1em; margin-left: 0; line-height: 1.6;">h1~h6、p、dt這些特殊的標籤只能包含內聯元素。 </p> </li> </ul> <hr style="margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 0; border: 0; border-top: 1px solid #eeeeee; border-bottom: 1px solid #ffffff;"> <p style="margin-top: 0; margin-right: 0; margin-bottom: 1.1em; margin-left: 0; line-height: 1.6;">參考資料:慕課網-DOM探討基礎詳解</p> </div> </div> <div id="MySignature"></div> <div class="clear"></div>