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教程