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

• innerText是一個可寫屬性，返回元素內(nèi)包含的文本內(nèi)容，在多層次的時候會按照元素由淺到深的順序拼接其內(nèi)容
• innerHTML屬性作用是返回元素的HTML結(jié)構(gòu)，在寫入的時候也會自動構(gòu)建DOM
• innerText只獲取文本內(nèi)容，innerHTML還能獲取HTML的代碼堪侯，另外innerHTML也可以插入HTML代碼生成相應(yīng)的元素

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

• elem.childen獲取的是子元素列表（HTMLCollection）
• elem.childNodes獲取的是子元素列表（NodeList）
• 雖然中文名稱相同荔仁，但是英文名稱是不一樣的伍宦，下面我們討論HTMLCollection和NodeList的區(qū)別
  • HTMLCollection 是一個接口，表示 HTML 元素的集合乏梁，它提供了可以遍歷列表的方法和屬性
  • NodeList 對象代表一個有順序的節(jié)點列表
  • HTMLCollection對象具有namedItem()方法次洼，可以傳遞id或name獲得元素
  • HTMLCollection的item()方法和通過屬性獲取元素(document.forms.f1)可以支持id和name，而NodeList對象只支持id

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

• 常見方法
  • document.getElementById()根據(jù)ID查找,返回元素
  • document.getElementsByClassName()根據(jù)類名查找卖毁，返回HTMLCollection對象
  • document.getElementsByTagName()根據(jù)標(biāo)簽名查找，返回HTMLCollection對象
  • document.getElementsByName()根據(jù)name名稱查找落萎，返回NodeList對象
• ES5方法
  • document.querySelector()/根據(jù)CSS選擇器查找,只返回第一個匹配的節(jié)點
  • document.querySelectorAll()根據(jù)CSS選擇器查找亥啦，返回所有節(jié)點，NodeList對象
  • document.elementFromPoint()返回指定位置的元素

如何創(chuàng)建一個元素练链？如何給元素設(shè)置屬性翔脱？如何刪除屬性

• 創(chuàng)建元素
  • document.createElement('標(biāo)簽名')
  • 創(chuàng)建的元素是游離在DOM外的，需要掛載到DOM中
• 元素屬性
  • 設(shè)置元素屬性 el.setAttribute('屬性名','屬性值')
  • 刪除元素屬性 el.removeAttribute('屬性名')

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

• 添加子元素
  • el.appendChild(A)將A元素插入到el元素的末尾届吁，作為el元素的子元素
  • el.appendBefore(B,el.firstChild)將B元素插入到el元素的第一個子元素之前
• 刪除頁面元素
  • el.parentNode.removeChild(el)el并沒有權(quán)限刪除自己，只能調(diào)用父元素的removeChild方法來刪除自己绿鸣。

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

• Element.classList 是一個只讀屬性亮蛔，返回一個元素的類屬性的實時DOMTokenList集合。
  • add('類名1',['類名2'])添加指定的類值再登。如果這些類已經(jīng)存在于元素的屬性中，那么它們將被忽略晾剖。
  • remove('類名1',['類名2'])刪除指定的類值锉矢。
  • item (Number)按集合中的索引返回類值。
  • toggle ('類名',[true/false])
    • 當(dāng)只有一個參數(shù)時：如果類存在齿尽，則刪除它并返回false沽损，如果不存在，則添加它并返回true循头。
    • 當(dāng)存在第二個參數(shù)時：如果第二個參數(shù)的計算結(jié)果為true绵估，則添加指定的類值炎疆，如果計算結(jié)果為false，則刪除它
  • contains('類名')檢查元素的類屬性中是否存在指定的類值国裳。
• 判斷一個元素的class列表中是包含某個 class

  var contentDiv = document.getElementById('content')
  var flag = contentDiv.classList.contains('layout')
  console.log(flag)
  

• 添加一個class

  var contentDiv = document.getElementById('content')
  contentDiv.classList.add('layout')
  

• 刪除一個class

  var contentDiv = document.getElementById('content')
  contentDiv.classList.remove('layout')
  

如何選中如下代碼所有的li元素形入？ 如何選中btn元素？

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

• 選中所有l(wèi)i元素

  var btnClickMe = document.querySelectorAll('.mod-tabs>ul>li')
  

• 選中btn元素

  var btnClickMe = document.querySelector('.mod-tabs>.btn')
  

• 想法
  • 如果使用document.getElementsByTagName可能會選取到頁面中所有的li元素
  • 如果使用document.getElementsByClassName可能會選取到頁面中其他的class為btn的元素