jacascript DOM節(jié)點——元素節(jié)點、屬性節(jié)點、文本節(jié)點

更新時間：2017年04月18日 08:44:19 投稿：mrr

這篇文章主要介紹了jacascript DOM節(jié)點——元素節(jié)點、屬性節(jié)點、文本節(jié)點,需要的朋友可以參考下

元素節(jié)點

　　元素節(jié)點就是HTML標(biāo)簽元素，元素節(jié)點主要提供了對元素標(biāo)簽名、子節(jié)點及屬性的訪問；

　　元素節(jié)點的三個node屬性：nodeType：1、nodeName/TagName：元素的標(biāo)簽名大寫、nodeValue：null；

　　其父節(jié)點 parentNode 指向包含該元素節(jié)點的元素節(jié)點 Element 或文檔節(jié)點 Document；

　　元素的 childNodes 屬性中包含了它的所有子節(jié)點，這些子節(jié)點可能是元素、文本、注釋、處理指令節(jié)點；

　　childNodes 結(jié)合 NodeType 可以檢查有幾個元素子節(jié)點：

   <ul class="list" id="list">
      <li class="in"></li>
      <li class="in"></li>
    </ul>
    <script>
      var oList = document.getElementById('list');
      var children = oList.childNodes;
      var num = 0;
      for(var i = 0; i < children.length; i++){
        if(children[i].nodeType == 1){
          num++;
        }
      }
      console.log(num);//2  有2個元素子節(jié)點  
    </script>

　　操作屬性的方法主要有hasAttribute()、getAttribute()、setAttribute()、removeAttribute()四個，可以針對任何屬性使用，包括那些以HTMLElement類型屬性的形式定義的屬性；

obj.hasAttribute(attr)方法返回一個布爾值，表示當(dāng)前元素節(jié)點是否包含指定屬性；
IE6/IE7不支持 hasAttribute() 方法；
obj.hasAttribute(attr)檢測 class 屬性時，直接用 class 就可以了，不要用className;
obj.hasAttribute(attr)檢測 for屬性時，直接用 for就可以了，不要用htmlFor;

 <div class="wrapper" id='test' for="nice" style="width:200px;height:100px;background:#f0f">123</div>
    <script type="text/javascript">
      var oTest = document.getElementById('test');
      //IE6/IE7不支持hasAttribute方法
      console.log(oTest.hasAttribute('class'));//true
      console.log(oTest.hasAttribute('className'));//false  
      console.log(oTest.hasAttribute('id'));//true
      console.log(oTest.hasAttribute('style'));//true
      console.log(oTest.hasAttribute('for'));//true
      console.log(oTest.hasAttribute('htmlFor'));//false
    </script>

obj.getAttribute(attr)方法用于取得屬性的值，如果給定名稱的屬性不存在或無參數(shù)則返回null；
obj.getAttribute(attr)獲取 class 時，直接用 class 就可以了；IE6/IE7除外，IE6/IE7的 getAttribute(attr) 方法要用 className；
obj.getAttribute(attr)獲取 for時，直接用 for就可以了；
obj.setAttribute(attr,value)方法接受兩個參數(shù)：要設(shè)置的屬性名和值，如果已經(jīng)存在，則替換現(xiàn)有的值。如果屬性不存在，則創(chuàng)建該屬性并設(shè)置相應(yīng)的值。該方法無返回值；
obj.setAttribute(attr,value)設(shè)置 class 時，直接用 class 就可以了；
obj.setAttribute(attr,value)設(shè)置 for 時，直接用 for 就可以了；
obj.setAttribute(attr,value)設(shè)置 style 時，直接用 style 就可以了；在 IE7及以下，用 obj.style.setAttribute("cssText",value); 這里的 style 只是行間樣式；
我們一般用 obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]; 來獲取元素當(dāng)前樣式；

 <script type="text/javascript">
      var oTest = document.getElementById('test');
      oTest.setAttribute('class','aaa'); //setAttribute直接用class就可以了
      oTest.setAttribute('className','bbb');
      console.log(oTest.class);//undefined IE8及以下會報錯缺少標(biāo)識符
      console.log(oTest.getAttribute('class'));//aaa getAttribute直接用class就可以了
      console.log(oTest.className);//aaa
      console.log(oTest.getAttribute('className'));//bbb
      oTest.setAttribute('style','border:1px solid red;height: 100px;'); //setAttribute直接用 style 就可以了
      console.log(oTest.style);//所有的style設(shè)置，包括你沒有設(shè)置的，太多了，肯定不是你想要的
      console.log(oTest.getAttribute('style'));
      //border:1px solid red;height: 100px; getAttribute直接用 style 就可以了
      oTest.setAttribute('for','eee'); //setAttribute直接用for就可以了
      oTest.setAttribute('htmlFor','fff')
      console.log(oTest.for);//undefined  IE8及以下會報錯缺少標(biāo)識符
      console.log(oTest.htmlFor);//undefined
      console.log(oTest.getAttribute('for'));//eee getAttribute直接用for就可以了
      console.log(oTest.getAttribute('htmlFor'));//fff
      console.log(oTest);
      //<div class="aaa" id="test" for="eee" style="ddd" classname="bbb" htmlfor="fff">123</div>
    </script>

obj.removeAttribute(attr)方法用于徹底刪除元素的屬性，這個方法不僅會徹底刪除元素的屬性值，還會刪除元素屬性。該方法無返回值；

<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
    <script type="text/javascript">
      var oTest = document.getElementById('test');
      oTest.removeAttribute('class'); //removeAttribute直接用class就可以了
      oTest.removeAttribute('for');
      oTest.removeAttribute('style'); 
      console.log(oTest);// <div id="test">123</div>
    </script>

屬性節(jié)點

　　屬性節(jié)點，有的叫特性節(jié)點，差不多一個意思；

　　屬性節(jié)點的三個node屬性，nodeType:2、nodeName/name:屬性名稱、nodeValue/value：屬性值；

　　屬性節(jié)點還有一個 specified 屬性，specified 是一個布爾值，用以區(qū)別特性是在代碼中指定的，還是默認的。這個屬性的值如果為true，則意味著在HTML中指定了相應(yīng)特性，或者是通過 setAttribute() 方法設(shè)置了該屬性。在IE中，所有未設(shè)置過的特性的該屬性值都為false，而在其他瀏覽器中，所有設(shè)置過的特性的該屬性值都是true，未設(shè)置過的特性，如果強行為其設(shè)置 specified 屬性，則報錯。

　　元素節(jié)點有一個 attributes 屬性，它包含一個 NamedNodeMap，包含當(dāng)前元素所有的屬性及屬性值，與NodeList類似，也是一個動態(tài)的集合。元素的每一個屬性都由一個Attr節(jié)點表示，每個節(jié)點都保存在NamedNodeMap對象中，每個節(jié)點的 nodeName 就是屬性的名稱，節(jié)點的 nodeValue 就是屬性的值；

　　createAttribute(attr) 創(chuàng)建新的屬性節(jié)點；

　　attributes屬性包含以下四個方法:

obj.attributes.setNamedItem(attr); 向列表中添加節(jié)點，該方法無返回值；要先創(chuàng)建屬性，在以nodeValue的形式賦屬性值，在傳入setNamedItem
obj.attributes.getNamedItem(attr); 返回 nodeName 屬性等于 attr 的節(jié)點；以" attr=value " 形式返回；
obj.attributes.removeNamedItem(attr); 從列表中移除 nodeName 屬性等于 attr 的節(jié)點，并返回該節(jié)點；
obj.attributes.item(index); 返回位于下標(biāo) index 位置處的節(jié)點，也可以用[]代替， obj.attributes[index]；

<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
    <script type="text/javascript">
      var oTest = document.getElementById('test');
      console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: for, 3: style, length: 4}
      console.log(oTest.attributes.item(1).specified);//true
      console.log(oTest.attributes.getNamedItem('id'));//id='test'
      console.log(typeof oTest.attributes.getNamedItem('id'));//object
      console.log(oTest.attributes.removeNamedItem('for'));//id='test'
      console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: style, length: 3}
      var abc = document.createAttribute("abc"); 
      abc.nodeValue = "1234567";
      oTest.attributes.setNamedItem(abc);
      //obj.attributes.setNamedItem(attr) 要先創(chuàng)建屬性，在以nodeValue的形式賦屬性值，在傳入setNamedItem
      console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: style, 3: abc, length: 4}
      console.log(oTest.attributes.item(1));//id='test'
      console.log(oTest.attributes[1]);//id='test'
    </script>

　　attributes屬性主要用于屬性遍歷。在需要將DOM結(jié)構(gòu)序列化為HTML字符串時，多數(shù)都會涉及遍歷元素特性

<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
    <script type="text/javascript">
      function outputAttributes(obj){
        var arr = [],
          attrName,
          attrValue,
          i;
        for(i = 0; i < obj.attributes.length; i++){
          attrName = obj.attributes[i].nodeName;
          attrValue = obj.attributes[i].nodeValue;
          arr.push(attrName + '=\"' + attrValue + '\"');
        }
        return arr.join(" ");
      }
      var oTest = document.getElementById('test');
      console.log(oTest.attributes);//NamedNodeMap {0: class, 1: id, 2: for, 3: style, length: 4}
      console.log(typeof oTest.attributes);//object
      console.log(outputAttributes(oTest));
      //class="wrapper" id="test" for="nice" style="background:#f0f;height: 100px;"
      console.log(typeof outputAttributes(oTest));//string
    </script>

文本節(jié)點

　　文本節(jié)點的三個node屬性，nodeType:3、nodeName:'#text'、nodeValue:節(jié)點所包含的文本，其父節(jié)點 parentNode 指向包含該文本節(jié)點的元素節(jié)點，文本節(jié)點沒有子節(jié)點；

　　關(guān)于文本節(jié)點，遇到最多的兼容問題是空白文本節(jié)點問題。IE8及以下瀏覽器不識別空白文本節(jié)點，而其他瀏覽器會識別空白文本節(jié)點；所以有時候我們需要清理空白文本節(jié)點；

 <div id="test">
      <div>hello world!</div>
    </div>
    <script type="text/javascript">
      var oTest = document.getElementById('test');
      //第一個和最后一個都是空白文本節(jié)點
      console.log(oTest.firstChild);//" "  
      console.log(oTest.lastChild);//" "  
      console.log(oTest.childNodes);//[text, div, text]  
      //標(biāo)準(zhǔn)瀏覽器輸出[text, div, text]，text表示空白文本節(jié)點
      //IE8及以下瀏覽器輸出[div]，并不包含空白文本節(jié)點
      console.log(oTest.childNodes.length); //3
      //標(biāo)準(zhǔn)瀏覽器返回3
      //IE8及以下瀏覽器返回1，并不包含空白文本節(jié)點
      //清理空白文本節(jié)點
      function cleanWhitespace(oEelement){
         for(var i = 0; i < oEelement.childNodes.length; i++){
           var node = oEelement.childNodes[i];
           if(node.nodeType == 3 && !/\S/.test(node.nodeValue)){
             node.parentNode.removeChild(node);
           }
         }
      }
      cleanWhitespace(oTest);
      console.log(oTest.childNodes);//[div]
      console.log(oTest.childNodes.length); //1
    </script>

文本節(jié)點屬性：

文本節(jié)點的 data 屬性與 nodeValue 屬性相同；
wholeText 屬性將當(dāng)前 Text 節(jié)點與毗鄰的 Text 節(jié)點，作為一個整體返回。大多數(shù)情況下，wholeText 屬性的返回值，與 data 屬性和 textContent 屬性相同；
文本節(jié)點的 length 屬性保存著節(jié)點字符的數(shù)目，而且 nodeValue.length、data.length 也保存著相同的值；

<div id="testData">hello world!</div>
    <div id="testWholeText">hello world!</div>
    <script type="text/javascript">
      var oTestData = document.getElementById('testData');
      //第一個和最后一個都是空白文本節(jié)點
      console.log(oTestData.firstChild);//"hello world!"  
      console.log(typeof oTestData.firstChild);//object  
      console.log(oTestData.childNodes.length); //1
      console.log(oTestData.firstChild.nodeValue);//"hello world!" 
      console.log(typeof oTestData.firstChild.nodeValue);//string
      console.log(oTestData.firstChild.data);//"hello world!" 
      //文本節(jié)點的data屬性與nodeValue屬性相同,都是 string 類型
      console.log(oTestData.firstChild.data === oTestData.firstChild.nodeValue);//true
      var oTestWholeText = document.getElementById('testWholeText');
      console.log(oTestWholeText.childNodes); //[text]
      console.log(oTestWholeText.childNodes.length); //1
      console.log(oTestWholeText.firstChild.wholeText);//hello world!
      console.log(oTestWholeText.firstChild.data);//hello world!  
      oTestWholeText.firstChild.splitText('or');
      console.log(oTestWholeText.childNodes); //[text, text]
      console.log(oTestWholeText.childNodes.length); //2
      console.log(oTestWholeText.firstChild);//#text
      console.log(oTestWholeText.firstChild.wholeText);//hello world!
      //wholeText屬性將當(dāng)前Text節(jié)點與毗鄰的Text節(jié)點，作為一個整體返回。
      console.log(oTestData.firstChild.length);//12
      console.log(oTestData.firstChild.nodeValue.length);//12
      console.log(oTestData.firstChild.data.length);//12
    </script>

文本節(jié)點方法：

　　文本節(jié)點的操作與字符串的操作方法相當(dāng)類似。一般地，我們獲取文本都用 innerHTML，然后再去字符串的操作方法去操作。

document.createTextNode(text); 方法用于創(chuàng)建文本節(jié)點，這個方法接收一個參數(shù)，要插入節(jié)點中的文本；插入的是文本，就算寫的是標(biāo)簽，也是當(dāng)做文本來插入的；
splitText(index) 方法將一個文本節(jié)點分成兩個文本節(jié)點，即按照 index 指定的位置分割 nodeValue 值。原來的文本節(jié)點將包含從開始到指定位置之前的內(nèi)容。這個方法會返回一個新文本節(jié)點，包含剩下的文本；
appendData(text) 方法將 text 添加到節(jié)點的末尾，該方法無返回值；
deleteData(index,count) 方法從 index指定的位置開始刪除 count 個字符，無返回值；
insertData(index,text) 方法在 index 指定的位置插入 text，無返回值；
replaceData(index,count,text) 方法用 text 替換從 index 指定位置開始到 index+count 為止的文本，無返回值；
substringData(index,count) 方法提取從 index 指定的位置開始到 offset+count 為止處的字符串，并返回該字符串。原來的文本節(jié)點無變化；

以上所述是小編給大家介紹的jacascript DOM節(jié)點——元素節(jié)點、屬性節(jié)點、文本節(jié)點，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: