<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <!---DOM基础知识--> <p>DOM1级别 DOM Core DOM HTML </p> <p>DOM2级别 DOM Views DOM Events DOM Style DOM Traversal and DOM Ranges</p> <P>DOM3级别 DOM Load and Save DOM Validation</P> <div id="divContainer" style=" height: auto; width:600px;">DOM3级别</div> <div id="divContainer1" style=" height: auto; width:600px;"> <p>Element 1 </P> <p> Attr（属性节点） 2 是包含他的元素节点的一部分，不属于文档树的一部分 </P> <p>Text（文本节点） 3 空格同样属于文本节点 </P> <p>Comment（注释节点） 8 </P> <p>Document(文档节点） 9 </P> <p>DocumentType（文档类型节点） 10 </P> <p>DocumentFragment（文档片段节点） 11 所有节点的根节点 </P> </div> <div> <p>webkit 渲染流程</p> <p>解析HTML 构建DOM树--->构建渲染树---->布局渲染树--->绘制渲染树<p> <p style="padding-left: 230px;"> DOM <p> <p style="padding-left: 230px;"> || <p> <p > HTML --------->Html Parse--->DOM Tree --->layout <p> <p style="padding-left: 230px;"> || || <p> <p style="padding-left: 230px;"> Attachment---->Render Tree----->Painting----->Display<p> <p style="padding-left: 230px;"> || <p> Style Sheet---->Css Parse --->Style Rules<p> </div> </body> <script type="text/javascript"> //IE 7 IE 8不支持Node var divNode = document.getElementById("divContainer"); if (divNode.nodeType == Node.ELEMENT_NODE) { console.log("this is a element"); } //IE 兼容 if (divNode.nodeType = 1) { console.log("this is a element"); } console.log("--attributes nodes--"); var attrNodes = divNode.attributes; for (var i = 0; i < attrNodes.length; i++) { var item = attrNodes[i]; console.log(item.nodeName + "----" + item.nodeValue); } console.log("--child nodes--"); var childNodes = divNode.childNodes; for (var i = 0; i < childNodes.length; i++) { var item = childNodes[i]; console.log(item.nodeName + "----" + item.nodeValue); } console.log("document.doctype.nodeName: " + document.doctype.nodeName + "----document.doctype.nodeValue: " + document.doctype.nodeValue) var comment=document.body.childNodes[1]; console.log(comment.nodeName+"0--0"+comment.nodeValue) var flat=document.createDocumentFragment(); console.log(flat.nodeName+"--"+flat.nodeValue) </script> </html>
