有關于DOM操作的一些題目

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

innerText 設置或獲取位于對象起始和結(jié)束標簽內(nèi)的文本
innerHTML 設置或獲取位于對象起始和結(jié)束標簽內(nèi)的 HTML

innerText和innerHTML區(qū)別.png

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

children與childNodes 兩者都是返回子節(jié)點； 前者返回的是元素節(jié)點， 后者返回所有的節(jié)點類型 包括 元素 、文本 、注釋 等。
（或者這么說：children屬于Element元素，所以不含有其它節(jié)點類型。childNodes 返回的是 NodeList，children返回是 HTMLElement[] 數(shù)組）

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

  getElementById()      //返回匹配指定ID屬性的元素節(jié)點
  getElementsByClassName() //返回一個類似數(shù)組的對象（HTMLCollection類型的對象） 
  //元素的變化實時反映在返回結(jié)果中
  getElementsByTagName() //返回所有指定標簽的元素（搜索范圍包括本身）。返回值是
  //一個HTMLCollection對象，也就是說，搜索結(jié)果是一個動態(tài)集合，任何元素的變化都會
  //實時反映在返回的集合中
  getElementsByName()  //用于選擇擁有name屬性的HTML元素，比如form、img、frame、
  //embed和object，返回一個NodeList格式的對象，不會實時反映元素的變化。
   elementFromPoint()  //返回位于頁面指定位置的元素。

  ES5的元素選擇方法：
  querySelector()  //返回匹配指定的CSS選擇器的元素節(jié)點。如果有多個節(jié)點滿足匹配條件，
  //則返回第一個匹配的節(jié)點。如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null。
  querySelectorAll()  //返回匹配指定的CSS選擇器的所有節(jié)點，返回的是NodeList類型的對象。
  //NodeList對象不是動態(tài)集合，所以元素節(jié)點的變化無法實時反映在返回結(jié)果中。
  //elementList = document.querySelectorAll(selectors);
  //querySelectorAll方法的參數(shù)，可以是逗號分隔的多個CSS選擇器，返回所有匹配
  //其中一個選擇器的元素。

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

• createElement()
  createElement方法用來生成HTML元素節(jié)點。
   var newDiv = document.createElement("div");
  

createElement方法的參數(shù)為元素的標簽名，即元素節(jié)點的tagName屬性。如果傳入大寫的標簽名，會被轉(zhuǎn)為小寫。如果參數(shù)帶有尖括號（即<和>）或者是null，會報錯。

• createTextNode()
  createTextNode方法用來生成文本節(jié)點，參數(shù)為所要生成的文本節(jié)點的內(nèi)容。下面代碼新建一個div節(jié)點和一個文本節(jié)點

  var newDiv = document.createElement("div");
  var newContent = document.createTextNode("Hello");
  

• createDocumentFragment()
  createDocumentFragment方法生成一個DocumentFragment對象。

  var docFragment = document.createDocumentFragment();
  

DocumentFragment對象是一個存在于內(nèi)存的DOM片段，但是不屬于當前文檔，常常用來生成較復雜的DOM結(jié)構(gòu)，然后插入當前文檔。這樣做的好處在于，因為DocumentFragment不屬于當前文檔，對它的任何改動，都不會引發(fā)網(wǎng)頁的重新渲染，比直接修改當前文檔的DOM有更好的性能表現(xiàn)。

• 設置元素屬性setAttribute()
  var node = document.getElementById("div1");
  node.setAttribute("my_attrib", "newVal");
• 刪除元素屬性romoveAttribute()
  node.removeAttribute('id');
  appendChild()

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

（1）在元素末尾添加元素

   var newDiv = document.createElement("div");
   var newContent = document.createTextNode("Hello");
   newDiv.appendChild(newContent);

（2）在某個元素之前插入元素

   var newDiv = document.createElement("div");
   var newContent = document.createTextNode("Hello");
   newDiv.insertBefore(newContent, newDiv.firstChild);

• 刪除元素

  刪除元素使用removeChild()方法即可

  parentNode.removeChild(childNode);
  

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

classList 屬性返回元素的類名，作為 DOMTokenList 對象。該屬性用于在元素中添加，移除及切換 CSS 類。
classList 屬性是只讀的，但你可以使用 add() 和 remove() 方法修改它。

   //方法：
   add(class1, class2, ...)  
   //在元素中添加一個或多個類名。如果指定的類名已存在，則不會添加

   contains(class)             
   //返回布爾值，判斷指定的類名是否存在。

   item(index)  
   //返回類名在元素中的索引值。索引值從 0 開始。如果索引值在區(qū)間范圍外則返回 null

   remove(class1, class2, ...)
   //移除元素中一個或多個類名。注意： 移除不存在的類名，不會報錯。

   toggle(class, true|false)
   //在元素中切換類名

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

   <div class="mod-tabs">
      <ul>
        <li>list1</li>
        <li>list2</li>
        <li>list3</li>
      </ul>
     <button class="btn">點我</button>
   </div>

   /* 代碼
   <script type="text/javascript">
      //選中所有的li元素
      var list=document.querySelector('.mod-tabs ul')
      console.log(list)
      //選中btn元素
      var btn=document.querySelector('.mod-tabs .btn')
      console.log(btn)
  </script>
  */

本文題文內(nèi)容來自于饑人谷，版權歸饑人谷_海瀚和饑人谷所有，轉(zhuǎn)載需說明來源