<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>