1. dom對象的innerText和innerHTML有什么區別？

• innerText是一個可寫屬性，返回元素內包含的文本內容，在多層次的時候會按照元素由淺到深的順序拼接其內容
• innerHTML屬性作用和innerText類似，但是不是返回元素的文本內容，而是返回元素的HTML結構，在寫入的時候也會自動構建DOM

2. elem.children和elem.childNodes的區別？

• elem.children:獲取指定元素的子元素列表，包含HTML元素節點。
• elem.childNodes：獲取指定元素的子元素列表，包含HTML元素節、文本節點、注釋節點。

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

getElementById()// 匹配ID元素
getElementByClassName()//匹配class，多個空格分隔的class名字，返回同時具有這些節點的元素
getElementsByTagName()//匹配標簽
getElementsByName()//用于選擇擁有name屬性的HTML元素，在IE瀏覽器使用這個方法，會將沒有name屬性、但有同名id屬性的元素也返回，所以name和id屬性最好設為不一樣的值
querySelector()//返回匹配指定的CSS選擇器的元素節點，如果有多個節點滿足匹配條件，則返回第一個匹配的節點，無法匹配偽元素
querySelectorAll()//匹配指定的CSS選擇器的所有節點，參數可以是逗號分隔的多個CSS選擇器，返回所有匹配其中一個選擇器的元素
elementFromPoint(x,y)//位于頁面指定位置的元素,參數x和y分別是相對于當前窗口左上角的橫坐標和縱坐標，單位是CSS像素。

ES5的元素選擇方法是querySelector()和elementFromPoint(x,y)

4.如何創建一個元素？如何給元素設置屬性？如何刪除屬性

var node = document.createElement('img')//用來生成HTML元素節點
node.setAttribute('src','地址')// 設置屬性
ct.appendChild(node)  //在元素末尾添加元素
node.getAttribute('src') //獲取元素的attribute值
node.removeAtrbute('src') //刪除元素屬性

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

• appendChild()在元素末尾添加元素；insertBefore()在某個元素之前插入元素；replaceChild()接受兩個參數要插入的元素和要替換的元素。
• 刪除元素使用removeChild()方法

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

• item(index)，返回類名在元素中的索引
• toggle(class, true|false)，在元素中切換類名，第一個參數為要在元素中移除的類名，并返回false。如果類名不存在則會在元素中添加類名，并返回true。第二個是可選參數，是個布爾值用于設置元素是否強制添加或移除類，不管類名是否存在。

node.classList.add('active') //添加
node.classList.remove('active') // 刪除
node.classList.contains('active') // 判斷有無'active'

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

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

document.getElementsByTagName('li')
document.querySelectorAll('li')
document.getElementsByTagName('button')
document.getElementsByClassName('btn')

image.png