深入解读JavaScript中BOM和DOM.docVIP

深入解读JavaScript中BOM和DOM BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口，提供访问文档各个功能部件（如窗口本身、屏幕功能部件、浏览历史记录等）的途径以及操作方法。 遗憾的是，BOM只是JavaScript脚本实现的一部分，没有任何相关的标准，每种浏览器都有自己的BOM实现，这可以说是BOM的软肋所在通常情况下浏览器特定的JavaScript扩展都被看作BOM的一部分，主要包括： ◆关闭、移动浏览器及调整浏览器窗口大小； ◆弹出新的浏览器窗口； ◆提供浏览器详细信息的定位对象； ◆提供载入到浏览器窗口的文档详细信息的定位对象； ◆提供用户屏幕分辨率详细信息的屏幕对象； ◆提供对cookie的支持； ◆加入ActiveXObject类扩展BOM，通过JavaScript实例化ActiveX对象。 BOM有一些事实上的标准，如窗口对象、导航对象等，但每种浏览器都为这些对象定义或扩展了属性及方法。Document Object Model，这个就是标准了，由著名的w3c制定，目前最高的级别是level 3，不过3还没有彻底完成。 目前主流的浏览器都可以支持到（仅仅是支持到哦，并不是完全遵守的）level 2，对html，也就是html4.x，目前最高的是4.01，后来w3c向把html统一向xml靠拢，于是就有了xhtml1.0，再后来，w3c想搞一个xhtml2.0，结果进度缓慢，加之各大厂商又不看好，于是就有了html5.0 1、创建节点 createElement():? ? var?a??=?document.createElement(“p”);?? 它创建的是一个元素节点，所以nodeType等于1，a.nodeName将返回p。 注意；createElement()方法创建出来的新元素节点不会被自动添加到文档里，既然没添加到文档里，说明它还是一个游离的状态。所以它也没有nodeParent属性。如果想把它添加到文档里，可以使用 appendChild()或者insertBefore()方法或者replaceChild()方法。当然我们在前面的例子中，自己写了一个 insertAfter()方法，比如： var?a??=?document.createElement(“p”);? ? document.body.appendChild(a);?? 注意： appendChild()默认是添加到文档的最后。也就是lastChild子节点。如果想添加到某个地方，可以使用insertBefore()。如果想在元素插入之前给元素添加属性。可以这么做： var?a??=?document.createElement(“p”);? ? a.setAttribute(“title”,”my?demo”);? ? document.body.appendChild(a);? ? createTextNode():? ? var?b?=?document.createTextNode(“my?demo”);?? 它创建的是一个文本节点，所以nodeType等于3 。b.nodeName 将返回 #text ; 跟createElement()一样，用createTextNode()创建的节点也不会自动添加到文档里。需要使用 appendChild()或者insertBefore()方法或者replaceChild()方法。它经常与createElement()配合使用，知道为什么吗？（一个元素节点，一个文本节点。） var?mes?=?document.createTextNode(“hello?world”);? ? var?container?=?document.createElement(“p”);? ? container.appendChild(mes);? ? document.body.appendChild(container);?? 2、复制节点 cloneNode(boolean)： var?mes?=?document.createTextNode(hello?world);? ? var?container?=?document.createElement(p);? ? container.appendChild(mes);? ? document.body.appendChild(container);? ? var?newpara?=?container.cloneNode(true);//true和false的区别? ? document.body.appendChild(newpara?);?? 注意：?◆true的话：是paaaa/p克隆。◆