課程任務(wù)

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

區(qū)別：
innerText 是一個可寫屬性，返回元素內(nèi)包含的文本內(nèi)容，在多層次的時候會按照元素由淺到深的順序拼接其內(nèi)容。(能獲取或修改文本內(nèi)容)
innerHTML屬性作用與innerText類似，但不是返回元素的文本內(nèi)容，而是返回元素的HTML結(jié)構(gòu)，在寫入的時候也會自動構(gòu)建DOM.（能獲取或修改html里的所有內(nèi)容）
例如：

<div>
    <p>
       123
        <span>456</span>
    </p>
</div>
外層div的innerText返回內(nèi)容是''123456''
外層div的innerHTML返回內(nèi)容是：''<p>123<span>456</span></p>''

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

區(qū)別：
childNodes屬性，標(biāo)準(zhǔn)的，它返回指定元素的子元素集合，包括HTML節(jié)點(diǎn)，所有屬性，文本。可以通過nodeType來判斷是哪種類型的節(jié)點(diǎn)，只有當(dāng)nodeType==1時才是元素節(jié)點(diǎn)，2是屬性節(jié)點(diǎn)，3是文本節(jié)點(diǎn)。
children屬性，非標(biāo)準(zhǔn)的，它返回指定元素的子元素集合。經(jīng)測試，它返回HTML節(jié)點(diǎn)，甚至不返回文本節(jié)點(diǎn)。和childNodes 一樣，在Firefox下不支持()取集合元素。
(對于DOM元素，children是指DOM Object類型的子對象，不包括tag之間隱形存在的TextNode，而childNodes包括tag之間隱形存在的TextNode對象。)

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

常見查詢元素方法：
document.getElementById();
document.getElementsByTagName();
document.getElementsByClassName();
document.getElementsByName();

ES5的元素選擇方法：
document.querySelector();
document.querySelectorAll();
document.ElementFromPoint();

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

創(chuàng)建元素：

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

create TextNode方法用來生存文本節(jié)點(diǎn)，參數(shù)為所要生成的文本節(jié)點(diǎn)的內(nèi)容:

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

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

給元素設(shè)置屬性：
node.setAttribute('屬性名'， '屬性值')；

刪除屬性：
node.removeAttribute('屬性名')

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

給頁面元素添加子元素：

var newNode = document.createElement("標(biāo)簽名")；
fatherNode.appendChild(newNode);

刪除頁面元素下的子元素：

var newNode = document.createElement("標(biāo)簽名")；
fatherNode.appendChild(newNode);
fatherNode.removeChild(newNode);

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

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

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">點(diǎn)我</btn>
</div>

文章著作權(quán)歸饑人谷_sunny和饑人谷所有，轉(zhuǎn)載須說明來源