深入解读JavaScript中BOM和DOM(1)

时间:2013-03-06 14:58来源:未知作者:admin 点击: 次

分享到：

51CTO之前曾报导过关于 JavaScript使用心得汇总：从BOM和DOM谈起，在那篇文章中，主要介绍了两者的基本概念，而本文应用了很多实例，来解读JavaScript中BOM和DOM。 BOM定义了JavaScript可以进

51CTO之前曾报导过关于JavaScript使用心得汇总：从BOM和DOM谈起，在那篇文章中，主要介绍了两者的基本概念，而本文应用了很多实例，来解读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 );