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、创建节点
-
1.createElement():
-
2.var a = document.createElement(“p”);
它创建的是一个元素节点，所以nodeType等于1，a.nodeName将返回p。
注意：createElement()方法创建出来的新元素节点不会被自动添加到文档里，既然没添加到文档里，说明它还是一个游离的状态。所以它也没有nodeParent属性。如果想把它添加到文档里，可以使用 appendChild()或者insertBefore()方法或者replaceChild()方法。比如：
-
3.var a = document.createElement(“p”);
-
4.document.body.appendChild(a);
注意： appendChild()默认是添加到文档的最后。也就是lastChild子节点。如果想添加到某个地方，可以使用insertBefore()。如果想在元素插入之前给元素添加属性。可以这么做：
-
5.var a = document.createElement(“p”);
-
6.a.setAttribute(“title”,”mydemo”);
-
7.document.body.appendChild(a);
-
8.createTextNode():
-
9.var b= document.createTextNode(“my demo”);
它创建的是一个文本节点，所以nodeType等于3。b.nodeName将返回 #text 跟createElement()一样，用createTextNode()创建的节点也不会自动添加到文档里。需要使用 appendChild()或者insertBefore()方法或者replaceChild()方法。它经常与createElement()配合使用，知道为什么吗？（一个元素节点，一个文本节点。）
-
10.var mes = document.createTextNode(“helloworld”);
-
11.var container = document.createElement(“p”);
-
12.container.appendChild(mes);
-
13.document.body.appendChild(container);
2、复制节点cloneNode(boolean)
-
14.var mes = document.createTextNode("hello world");
-
15.var container = document.createElement("p");
-
16.container.appendChild(mes);
-
17.document.body.appendChild(container);
-
18.var newpara = container.cloneNode(true);//true和false的区别
-
19.document.body.appendChild(newpara );
注意：◆true的话：是克隆。◆false：只克隆 ，不克隆里面的文本。可以自己写个例子，然后用firebug看看。
克隆后的新节点，和createTextNode()一样不会被自动插入到文档。需要appendChild();另外还有一个注意：如果克隆后，id一样，不要忘记用
setAttribute(“id” , “ another_id “);改变新的节点的ID。
3、插入节点appendChild() :
-
1.var container = document.createElement("p");
-
2.var t = document.createTextNode("cssrain");
-
3.container.appendChild(t);
-
4.document.body.appendChild(container);
它经常跟createElement()和createTextNode(),cloneNode()配合使用。另外appendChild()不仅可以用来追加新的元素，也可以你挪动文档中现有的元素。看下面的例子：
-
5.<p id="msg">msg</p>
-
6.<p id="content">content</p>
7.<p id="aaa">aaaaaaaa</p>
-
8.<script>
-
9.var mes = document.getElementById("msg");
-
10.var container = document.getElementById("content");
-
11.container.appendChild(mes);
-
12.</script>
-
13.//发现msg放到 content 后面去了。
-
14.<p id="content">
-
15.content
-
16.<p id="msg">msg</p>
-
17.</p>
-
18.<p id="aaa">aaaaaaaa</p>
第二个参数是可选，如果第二个参数不写，将默认添加到文档的最后，相当于appendChild();我们看看insertBefore()怎么使用：
-
19.<div id="cssrian">
-
20.<p id="content">1111</p>
-
21.<div id="msg">msg<div>test</div></div>
-
22.<p id="content">222</p>
-
23.<p id="aaa">aaaaaaaa</p>
-
24.</div>
-
25.<script>
-
26.var msg = document.getElementById("msg");
-
27.var aaa = document.getElementById("aaa");
-
28.var test = document.getElementById("cssrian");
-
29.test.insertBefore( msg , aaa );
-
30.</script>
4、删除节点removeChild():
-
32.<body>
-
33.<div id="cssrain">
-
34.<div id="a">a </div>
-
35.<div id="b">b </div>
-
36.<div id="c">c </div>
-
37.</div>
-
38.</body>
-
39.<script>
-
40.var msg = document.getElementById("cssrain");
-
41.var b = document.getElementById("b");
-
42.msg.removeChild(b);
-
43.</script>
如果不知道要删除的节点的父节点是什么？可以使用parentNode属性。比如：
-
44.<body>
-
45.<div id="cssrain">
-
46.<div id="a">a </div>
-
47.<div id="b">b </div>
-
48.<div id="c">c </div>
-
49.</div>
-
50.</body>
-
51.<script>
-
52.var b = document.getElementById("b");
-
53.var c = b.parentNode;
-
54.c.removeChild(b);
-
55.</script>
注意：你如果想把某个节点从一处移动到另一个地方，不必使用removeChild（）。可以使用前面的 appendChild()和insertBefore(),他们都会自动先删除节点，然后移动到你指定的地方。
5、替换节点replaceChild():
-
56.Element.repalceChild( newNode , oldNode )：
-
57.
-
58.<body>
-
59.<div id="cssrain">
-
60.<div id="a">a </div>
-
61.<div id="b">b </div>
-
62.<div id="c">c </div>
-
63.</div>
-
64.</body>
-
65.<script>
-
66.var cssrain = document.getElementById("cssrain");
-
67.var msg = document.getElementById("b");
-
68.var para = document.createElement("p");
-
69.cssrain.replaceChild( para , msg );
-
70.</script>
6、设置/获取属性节点
-
1.setAttribute();//设置
-
2.
-
3.var a = document.createElement(“p”);
-
4.a.setAttribute(“title”,”mydemo”);
-
5.
-
6.var a =document.getElementById(“cssrain”);
-
7.var b = a.getAttribute(“title”);
获取的时候，如果属性不存在，则返回空，注意ie和ff返回不同，可以看我以前的例子。返回虽然不同，但是可以用一个方法来判断：if(a.getAttribute(“title”)){ }
7、查找节点getElementById():
返回一个对象，对象拥有 nodeName , nodeType , parentNode , ChildNodes等属性。getElementsByTagName()：查找标签名的所有元素。返回一个集合，可以用循环取出每个对象，对象拥有 nodeName , nodeType , parentNode , ChildNodes等属性。
阅读(817) | 评论(0) | 转发(0) |
