NodeList v.s. HTMLCollection
DOM中的NodeList與HTMLCollection
饑人谷DOM

1. dom對象的innerText和innerHTML有什么區(qū)別怠李？

     <div id="seostudying"> <span style="color:red">www.seostudying.com</span> </div>

1. seostudying.innerText
   它得到的是<div></div>標(biāo)簽中的文本節(jié)點的內(nèi)容在多層的時候會按照元素由淺到深的順序拼接內(nèi)容
   seostudying

2. seostudying.innerHTML
   它得到的是<div></div>標(biāo)簽中的所有內(nèi)容菩收，包括元素節(jié)點，屬性節(jié)點以及文本節(jié)點脾猛，也就是
   <span style="color:red">www.seostudying.com</span>

3. seostudying.outerHTML
   它得到的是包括<div></div>標(biāo)簽自身及其中的所有內(nèi)容，也就是
   <div id="seostudying"><span style="color:red">www.seostudying.com</span></div>

同時也得提醒一下大家咪奖，這3個屬性都是IE專有的屬性，而不是W3C的標(biāo)準(zhǔn)凌唬，因而一般的主流瀏覽器Firefox赁还，Opera妖泄，Safari僅僅支持innerHTML，其它兩個屬性都不支持艘策。建議你使用DOM來進行處理

20081124205003453.gif

2.elem.children和elem.childNodes的區(qū)別蹈胡？

• childNodes 屬性，它返回指定元素的子元素集合朋蔫，包括HTML節(jié)點罚渐，所有屬性，文本驯妄『刹ⅲ可以通過nodeType來判斷是哪種類型的節(jié)點，只有當(dāng)nodeType==1時才是元素節(jié)點富玷，2是屬性節(jié)點，3是文本節(jié)點既穆。

• 有時候需要獲取指定元素的第一個HTML子節(jié)點（非屬性/文本節(jié)點）赎懦，最容易想到的就是firstChild 屬性。代碼中第一個HTML節(jié)點前如果有換行幻工，空格励两，那么firstChild返回的就不是你想要的了∧衣可以使用nodeType來判斷下当悔。

      function getFirst(elem){
          for(var i=0,e;e=elem.childNodes[i++];){
              if(e.nodeType==1)
                  return e;
          }      
      }
  

• children 屬性**，它返回指定元素的子元素集合踢代。它只返回HTML節(jié)點盲憎，甚至不返回文本節(jié)點。且在所有瀏覽器下表現(xiàn)驚人的一致胳挎。和childNodes 一樣饼疙，在Firefox下不支持()取集合元素。因此如果想獲取指定元素的第一個HTML節(jié)點慕爬，可以使用children[0]來替代上面的getFirst函數(shù)窑眯。需注意children在IE中包含注釋節(jié)點。

3. 查詢元素有幾種常見的方法医窿？ES5的元素選擇方法是什么?

• 老版本：

  • document.getElementById()
  • document.getElementsByClassName()
  • document.getElementsByName()
  • document.getElementsByTagName()

• 新增：

  • querySelector()
  • querySelectorAll()
  • elementFromPoint()

4.如何創(chuàng)建一個元素磅甩？如何給元素設(shè)置屬性？如何刪除屬性

• 創(chuàng)建元素
  • createElement('div')
• 元素設(shè)置屬性
  • node.setAttribute('id','id_value');
• 刪除屬性
  • node.removeAttribute('id')

5.如何給頁面元素添加子元素姥卢？如何刪除頁面元素下的子元素?

    var span = document.createElement('span')

• 添加元素
  • document.body.appendChild(span)
• 刪除元素
  • document.body.removeChild(span)

6.element.classList有哪些方法痢毒？如何判斷一個元素的 class 列表中是包含某個 class塔嬉？如何添加一個class渗蟹？如何刪除一個class?

• element.classList有四種方法：
  • add( String [, String] )
    添加指定的類值。如果這些類已經(jīng)存在于元素的屬性中饵逐，那么它們將被忽略。
  • remove( String [,String] )
    刪除指定的類值彪标。
  • item ( Number )
    按集合中的索引返回類值倍权。
  • toggle ( String [, force] )
    當(dāng)只有一個參數(shù)時：切換 class value; 即如果類存在，則刪除它并返回false捞烟，如果不存在薄声，則添加它并返回true。
    當(dāng)存在第二個參數(shù)時：如果第二個參數(shù)的計算結(jié)果為true题画，則添加指定的類值默辨，如果計算結(jié)果為false，則刪除它
  • contains( String )
    檢查元素的類屬性中是否存在指定的類值苍息。

    // div是具有class =“foo bar”的<div>元素的對象引用
    
    // 判斷判斷一個元素的 class 列表中是是否包含某個 class
    alert(div.classList.contains("foo"));
    
    // 刪除class
    div.classList.remove("foo");
    
    //添加class
    div.classList.add("anotherclass");

    // 如果visible被設(shè)置則刪除它缩幸，否則添加它
    div.classList.toggle("visible");

    // 添加/刪除 visible，取決于測試條件竞思，i小于10
    div.classList.toggle("visible", i < 10);

    //添加或刪除多個類
    div.classList.add("foo","bar");
    div.classList.remove("foo", "bar");

7.如何選中如下代碼所有的li元素表谊？ 如何選中btn元素？

    <div class="mod-tabs">
       <ul>
           <li>list1<li>
           <li>list2<li>
           <li>list3<li>
       </ul>
       <button class="btn">點我</button>
    </div>
    <script>
       var btn = document.querySelector('.btn');
       var lis = document.querySelectorAll('li');
    </script>