深入解读JavaScript中BOM和DOM

开发 前端
本文应用了很多实例,来解读JavaScript中BOM和DOM,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、创建节点

  1. createElement():   
  2. var a  = document.createElement(“p”);  

它创建的是一个元素节点,所以nodeType等于1,a.nodeName将返回p。

注意;createElement()方法创建出来的新元素节点不会被自动添加到文档里,既然没添加到文档里,说明它还是一个游离的状态。所以它也没有nodeParent属性。如果想把它添加到文档里,可以使用 appendChild()或者insertBefore()方法或者replaceChild()方法。当然我们在前面的例子中,自己写了一个 insertAfter()方法,比如:

  1. var a  = document.createElement(“p”);   
  2. document.body.appendChild(a);  

注意: appendChild()默认是添加到文档的***。也就是lastChild子节点。如果想添加到某个地方,可以使用insertBefore()。如果想在元素插入之前给元素添加属性。可以这么做:

  1. var a  = document.createElement(“p”);   
  2. a.setAttribute(“title”,”my demo”);   
  3. document.body.appendChild(a);   
  4. createTextNode():   
  5. var b = document.createTextNode(“my demo”);  

它创建的是一个文本节点,所以nodeType等于3 。b.nodeName 将返回 #text ; 跟createElement()一样,用createTextNode()创建的节点也不会自动添加到文档里。需要使用 appendChild()或者insertBefore()方法或者replaceChild()方法。它经常与createElement()配合使用,知道为什么吗?(一个元素节点,一个文本节点。)

  1. var mes = document.createTextNode(“hello world”);   
  2. var container = document.createElement(“p”);   
  3. container.appendChild(mes);   
  4. document.body.appendChild(container);  

2、复制节点

cloneNode(boolean):

  1. var mes = document.createTextNode("hello world");   
  2. var container = document.createElement("p");   
  3. container.appendChild(mes);   
  4. document.body.appendChild(container);   
  5. var newpara = container.cloneNode(true);//true和false的区别   
  6. document.body.appendChild(newpara );  

注意:
 
◆true的话:是<p>aaaa</p>克隆。
◆false: 只克隆 <p></p>,里面的文本不克隆。
◆可以自己写个例子,然后用firebug看看。

克隆后的新节点,和createTextNode()一样  不会被自动插入到文档 。需要appendChild();另外还有一个注意: 如果克隆后,id一样,不要忘记用 setAttribute(“id” , “ another_id “);改变新的节点的ID。

#p#

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()不仅可以用来追加新的元素,也可以你挪动文档中现有的元素。看下面的例子:

  1. <p id="msg">msg</p>   
  2. <p id="content">content</p>   
  3. <p id="aaa">aaaaaaaa</p>   
  4. <script>   
  5. var mes = document.getElementById("msg");   
  6. var container = document.getElementById("content");   
  7. container.appendChild(mes);   
  8. </script>   
  9. //发现msg放到 content 后面去了。  
  10. <p id="content">   
  11. content   
  12. <p id="msg">msg</p>   
  13. </p>   
  14. <p id="aaa">aaaaaaaa</p>  

第二个参数是可选,如果第二个参数不写,将默认添加到文档的***,相当于appendChild();我们看看insertBefore()怎么使用:

  1. <div id="cssrian">   
  2. <p id="content">1111</p>   
  3. <div id="msg">msg<div>test</div></div>   
  4. <p id="content">222</p>   
  5. <p id="aaa">aaaaaaaa</p>   
  6. </div>   
  7. <script>   
  8. var msg = document.getElementById("msg");   
  9. var aaa = document.getElementById("aaa");   
  10. var test = document.getElementById("cssrian");   
  11. test.insertBefore( msg , aaa );   
  12. </script>   
  13. // 我们发现ID为msg的 插入到了aaa的前面。 

Js内部处理方式跟 appendChild()相似。

4、删除节点

removeChild():

  1. <body>   
  2. <div id="cssrain">   
  3. <div id="a"></div>   
  4. <div id="b"></div>   
  5. <div id="c"></div>   
  6. </div>   
  7. </body>   
  8. <script>   
  9. var msg = document.getElementById("cssrain");   
  10. var b = document.getElementById("b");   
  11. msg.removeChild(b);   
  12. </script>  

如果不知道要删除的节点的父节点是什么?可以使用parentNode属性。比如:

  1. <body>   
  2. <div id="cssrain">   
  3. <div id="a"></div>   
  4. <div id="b"></div>   
  5. <div id="c"></div>   
  6. </div>   
  7. </body>   
  8. <script>   
  9. var b = document.getElementById("b");   
  10. var c = b.parentNode;   
  11. c.removeChild(b);   
  12. </script>  

注意:你如果想把某个节点从一处移动到另一个地方,不必使用removeChild()。可以使用前面的 appendChild()和insertBefore(),他们都会自动先删除节点,然后移动到你指定的地方。、

5、替换节点

  1. Element.repalceChild( newNode , oldNode ):  
  2.  
  3. <body>   
  4. <div id="cssrain">   
  5. <div id="a"></div>   
  6. <div id="b"></div>   
  7. <div id="c"></div>   
  8. </div>   
  9. </body>   
  10. <script>   
  11. var cssrain = document.getElementById("cssrain");   
  12. var msg =  document.getElementById("b");   
  13. var para =  document.createElement("p");   
  14. cssrain.replaceChild( para , msg  );   
  15. </script>  

#p#

6、设置/获取属性节点

  1. setAttribute();//设置   
  2.  
  3. var a  = document.createElement(“p”);   
  4. a.setAttribute(“title”,”my demo”);   
  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 等属性。 例子:

  1. var ps = document.getElementsByTagName(“p”);   
  2. for(var i=0 ; i< ps.length ; i++){   
  3.  ps[i].setAttribute(“title”,”hello”);   
  4. //也可以使用:  ps.item(i).setAttribute("title","hello");   
  5. }   
  6.    
  7. <body>   
  8. <div id="cssrain">   
  9. <div id="a"></div>   
  10. <div id="b"></div>   
  11. <div id="c"></div>   
  12. </div>   
  13. </body>   
  14. <script>   
  15. var ps = document.getElementById("cssrain")   
  16. if(ps.hasChildNodes){   
  17.         alert( ps.childNodes.length  );     
  18. }   
  19. </script>  

8、DOM属性

我们常用的3中类型:
 
nodeType == 1  : 元素节点
nodeType == 2  : 属性节点
nodeType == 3  : 文本节点

如果想记住的话,上面的顺序我们可以看做是从前到后。比如:<p  title="cssrain" >test</p> 从前往后读:你会发现先是元素节点,然后是属性节点,***是文本节点,这样你就很容易记住了nodeType分别代表什么类型了。nodeType属性经常跟if配合使用,以确保不会在错误的节点类型上执行错误的操作。比如:

  1. function cs_demo(mynode){   
  2.       if(mynode.nodeType == 1){   
  3.               mynode.setAttribute("title","demo");   
  4.         }   
  5. }  

代码解释:先检查mynode的nodeType属性,以确保它所代表的节点确实是一个元素节点。和nodeName属性一样,他也是只读属性,不能进行设置.

  1. <div id="c">aaaaaaaaaaaaaaaa</div>   
  2. <SCRIPT LANGUAGE="JavaScript">   
  3. var cdocument.getElementById("c");   
  4. alert(  c.nodeValue  );//返回null   
  5. </SCRIPT>  

nodeValue是一个可以读、写的属性。 但它不能设置元素节点的值。看下面的例子:

  1. <div id="c">aaaaaaaaaaaaaaaa</div>   
  2. <SCRIPT LANGUAGE="JavaScript">   
  3. var cdocument.getElementById("c");   
  4.   c.nodeValue =" dddddddddddd"; //不能设置   
  5.   //alert( c.firstChild.nodeValue ) //元素节点 包括属性节点和文本节点。   
  6.   c.firstChild.nodeValue =  "test"//能设置   
  7. </SCRIPT>  

当然我们为了确保能正确运行:可以加一段代码:

  1. <div id="c">aaaaaaaaaaaaaaaa</div>   
  2. <SCRIPT LANGUAGE="JavaScript">   
  3. var cdocument.getElementById("c");   
  4.   c.nodeValue =" dddddddddddd"; //不能设置   
  5.   //alert( c.firstChild.nodeValue )   
  6.   if( c.firstChild.nodeType==3 ){ //判断是不是 文本节点   
  7.   c.firstChild.nodeValue =  "test"//能设置   
  8.   }   
  9. </SCRIPT>  

nodeValue一般只用来设置 文本节点的值。如果要刷新属性节点的值,一般使用setAttribute(). childNodes属性:返回一个数组,数组由元素节点的子节点构成。由于文本节点和属性节点都不可能再包含任何子节点,所以他们的childNodes属性永远返回一个空数组。

可以使用hasChildNodes方法,它用来判断某个元素有没有子节点。或者if (container.childNodes.length < 1) ;childNodes也是一个只读属性。如果要增加节点,可以使用appendChild()或者insertBefore() ,删除节点可以使用removeChild(); 操作后,childNodes属性会自动刷新。

firstChild属性

由于文本节点和属性节点都不可能再包含任何子节点,所以他们的firstChild属性永远返回一个空数组。 如果没有子节点,将返回null;node.firstChild 等价于  node.childNodes[0] ; firstChild属性是一个只读属性。

lastChild属性

由于文本节点和属性节点都不可能再包含任何子节点,所以他们的lastChild属性永远返回一个空数组。 如果没有子节点,将返回null; node.lastChild  等价于  node.childNodes[ node.childNodes.length - 1 ] ;lastChild属性是一个只读属性。

nextSibling属性

返回目标节点的下一个兄弟节点。如果目标节点后面没有同属于一个父节点的节点,nextSibling 将返回null ;nextSibling 属性是一个只读属性。

previousSibling属性

返回目标节点的前一个兄弟节点。如果目标节点前面没有同属于一个父节点的节点,previousSibling 将返回null ;previousSibling 属性是一个只读属性。

parentNode属性

注:parentNode属性返回的节点永远是一个元素节点,因为只有元素节点才有可能有子节点。

当然有个例外

document节点,他没有父节点。所以document节点的parentNode属性将返回null;parentNode 属性是一个只读属性。
 

【编辑推荐】

  1. JavaScript使用心得汇总:从BOM和DOM谈起
  2. 关于使用JavaScript的几点建议
  3. 早该知道的7个JavaScript技巧
责任编辑:王晓东 来源: 博客园
相关推荐

2009-08-26 13:31:21

JavaScript使

2021-09-09 10:26:26

Javascript 文档对象前端

2010-09-28 14:35:34

DOM遍历

2010-09-28 09:14:36

HTML DOMJavascript

2011-01-18 14:06:58

JavaScriptweb

2011-07-04 13:12:04

JavaScript

2015-12-24 10:05:39

JavaScripttypeofinstanceof

2010-09-08 16:50:11

JavaScriptDOM操作

2010-08-17 15:04:37

JavaScriptDOM ready

2010-09-08 15:13:09

Node节点Node属性

2010-09-28 12:59:45

JavaScriptDOM

2010-09-28 14:12:50

Javascript

2010-09-08 17:26:46

JavaScript

2023-05-12 08:11:58

JavaScriptJSON克隆

2021-02-05 07:33:05

JavaScript参数ES6

2016-04-06 11:29:58

JavaScriptDOM操作

2009-12-15 14:16:13

Ruby Contin

2010-09-28 09:22:34

DOM模型Html

2010-09-28 13:24:34

DOM文档对象模型

2010-09-13 17:12:55

JavaScript
点赞
收藏

51CTO技术栈公众号