JS BOM

时间  2019-11-11
标签 bom 栏目 JavaScript 繁體版
原文   原文链接

BOM有一些事实上的标准，如窗口对象、导航对象等，但每种浏览器都为这些对象定义或扩展了属性及方法。Document Object Model，这个就是标准了，由著名的w3c制定，目前最高的级别是level 3，不过3尚未完全完成。css

目前主流的浏览器均可以支持到（仅仅是支持到哦，并非彻底遵照的）level 2，对html，也就是html4.x，目前最高的是4.01，后来w3c向把html统一贯xml靠拢，因而就有了xhtml1.0，再后来，w3c想搞一个xhtml2.0，结果进度缓慢，加之各大厂商又不看好，因而就有了html5.0html

一、建立节点html5

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

它建立的是一个元素节点，因此nodeType等于1，a.nodeName将返回p。node

注意；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()配合使用，知道为何吗？（一个元素节点，一个文本节点。）app

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

二、复制节点spa

cloneNode(boolean)：ssr

  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看看。xml

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

 

三、插入节点

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()类似。

四、删除节点

removeChild():

  1. <body>   
  2. <div id="cssrain">   
  3. <div id="a">a </div>   
  4. <div id="b">b </div>   
  5. <div id="c">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">a </div>   
  4. <div id="b">b </div>   
  5. <div id="c">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(),他们都会自动先删除节点，而后移动到你指定的地方。、

五、替换节点

  1. Element.repalceChild( newNode , oldNode )：  
  2.  
  3. <body>   
  4. <div id="cssrain">   
  5. <div id="a">a </div>   
  6. <div id="b">b </div>   
  7. <div id="c">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>  

 

六、设置/获取属性节点

  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”) ){   }

七、查找节点

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">a </div>   
  10. <div id="b">b </div>   
  11. <div id="c">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>  

八、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 c= document.getElementById("c");   
  4. alert(  c.nodeValue  );//返回null   
  5. </SCRIPT>  

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

  1. <div id="c">aaaaaaaaaaaaaaaa</div>   
  2. <SCRIPT LANGUAGE="JavaScript">   
  3. var c= document.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 c= document.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属性返回的节点永远是一个元素节点，由于只有元素节点才有可能有子节点。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程