為什么要學(xué)習(xí)DOM? 因?yàn)?要改變頁面的某個東西，JavaScript就需要獲得對HTML文檔中所有元素進(jìn)行訪問的入口。這個入口，連同對 HTML 元素進(jìn)行添加、移動、改變或移除的方法和屬性，都是通過DOM來獲得的. 包括:document對象常用屬性,document對象常用方法,查詢元素,創(chuàng)建元素等
題目1： dom對象的innerText和innerHTML有什么區(qū)別？
<div>
<p>
123
<span>456</span>
</p>
</div>
外層div的innerText返回內(nèi)容是: "123456"
innerHTML返回內(nèi)容是: "<p>123<span>456</span></p>"
innerText:是一個可寫屬性，返回元素內(nèi)包含的文本內(nèi)容，在多層次的時候會按照元素由淺到深的順序拼接其內(nèi)容.
innerHTML:屬性作用和innerText類似，但是不是返回元素的文
本內(nèi)容，而是返回元素的HTML結(jié)構(gòu)
題目2： elem.children和elem.childNodes的區(qū)別？
Element.children：子元素列表（HTMLCollection）
HTMLCollection: 返回元素的子元素集合,但是它只返回HTML節(jié)點(diǎn).Element.childNodes：子元素列表（NodeList）
NodeList: 一個節(jié)點(diǎn)的集合，既可以包含元素和其他節(jié)點(diǎn)(注釋節(jié)點(diǎn)、文本節(jié)點(diǎn)等).
題目3：查詢元素有幾種常見的方法？ES5的元素選擇方法是什么?
getElementById方法返回匹配指定ID屬性的元素節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。這也是獲取一個元素最快的方法.getElementsByClassName方法返回一個類似數(shù)組的對象（HTMLCollection類型的對象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身）getElementsByTagName方法返回所有指定標(biāo)簽的元素（搜索范圍包括本身）。返回值是一個HTMLCollection對象getElementsByName方法用于選擇擁有name屬性的HTML元素ES5方法: querySelector();querySelectorAll();
題目4：如何創(chuàng)建一個元素？如何給元素設(shè)置屬性？如何刪除屬性
-
createElement方法用來生成HTML元素節(jié)點(diǎn) -
setAttribute()方法用于設(shè)置元素屬性 -
removeAttribute()用于刪除元素屬性
題目5：如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?
-
appendChild()方法在元素末尾添加元素 -
insertBefore()方法在某個元素之前插入元素 -
removeChild()方法可用于刪除某元素下的子元素 -
replaceChild()接受兩個參數(shù)：要插入的元素和要替換的元素
題目6： element.classList有哪些方法？如何判斷一個元素的 class 列表中是包含某個 class？如何添加一個class？如何刪除一個class?
-
add(class1, class2, ...)//在元素中添加一個或多個類名。如果指定的類名已存在，則不會添加 -
toggle()支持一個類名字符串參數(shù),若類名列表中有此類名，移除之，并返回false; 如果沒有，則添加該類名，并返回true. -
contains(class)://返回布爾值，判斷指定的類名是否存在 -
classList.add(''):添加一個class -
classList.remove(''):刪除一個class
題目7： 如何選中如下代碼所有的li元素？ 如何選中btn元素？
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">點(diǎn)我</button>
</div>
//選中所有的li元素
document.getElementsByTagName('li')或document.querySelectorAll('li')
//選中btn元素
document.getElementsByClassName('btn')或
getElementsByClassName('btn')
document.querySelector('.btn')
