1. DOM對象的innerText和innerHTML有什么區(qū)別？
- innerHTML屬性返回調(diào)用元素的所有子節(jié)點(diǎn)，包括元素、注釋、文本
- innerText屬性返回元素包含的所有文本內(nèi)容，包括子元素的文本
- 在通過innerText和innerHTML寫入值時，會刪除元素所有子節(jié)點(diǎn)，插入文本節(jié)點(diǎn)。不過innerText寫入的全部為文本，而innerHTML可以是其他內(nèi)容
<div id="div1">
<p>123</p>
<span>123</span>
</div>
<div id="div2">
<p>456</p>
<span>456</span>
</div>
<script>
var a = document.getElementById("div1")
var b = document.getElementById("div2")
a.innerText = "<p>這是innerText</p>"
b.innerHTML = "<p>這是innerHTML</p>"
</script>
innerHTML和innerText在頁面中的輸出
<div id="div1">
<p>innerText</p>
<span>innerText</span>
</div>
<div id="div2">
<p>innerHTML</p>
<span>innerHTML</span>
</div>
<script>
var a = document.getElementById("div1")
console.log(a)
console.log(a.innerText)
var b = document.getElementById("div2")
console.log(b)
console.log(b.innerHTML)
</script>
innerText和innerHTML對應(yīng)的內(nèi)容
2. elem.children和elem.childNodes的區(qū)別？
參考
1. JavaScript中Element與Node的區(qū)別，children與childNodes的區(qū)別
Node(節(jié)點(diǎn))是DOM層次結(jié)構(gòu)中的任何類型的對象的通用名稱，Node有很多類型，如元素節(jié)點(diǎn)，文本節(jié)點(diǎn)，注釋節(jié)點(diǎn)等，而Element繼承Node類，是其中一種，同時擴(kuò)展了一些屬性。
elem.children返回的是Element類，而elem.childNodes返回的是Node類
| 節(jié)點(diǎn)類型 | NodeType | 描述 |
|---|---|---|
| 元素 ELEMENT_NODE | 1 | 如<p>、<div>
|
| 文本 TEXT_NODE | 3 | / |
| 注釋 COMMENT_NODE | 8 | <!--123--> |
| 文檔 DOCUMENT_NODE | 9 | / |
<div id="div1">
<p>innerText</p> <!--lala-->
<span>innerText</span>
</div>
<div id="div2">
<p>innerHTML</p> <!--lala-->
<span>innerHTML</span>
</div>
<script>
var a = document.getElementById("div1")
console.log(a.children) //
var b = document.getElementById("div2")
console.log(b.childNodes) //
</script>
children和childNodes 輸出
3. 查詢元素有幾種常見的方法？ES5的元素選擇方法是什么?
//返回id為div1的一個對象
document.getElementById('div1')
//返回的類數(shù)組
document.getElementsByTagName('p')
document.getElementsByClassName('attr1 attr2')
document.getElementsByName('name')
//ES5 selectors類似CSS選擇器
//返回符合第一個
document.querySelector(selectors)
//返回符合的全部
document.querySelectorAll(selectors)
4. 如何創(chuàng)建一個元素？如何給元素設(shè)置屬性？如何刪除屬性
//生成HTML元素節(jié)點(diǎn)
document.createElement('div')
//生成文本節(jié)點(diǎn)
document.createTextNode('Hello')
//DocumentFragment對象是一個存在于內(nèi)存的DOM片段，但是不屬于當(dāng)前文檔，常常用來生成較復(fù)雜的DOM結(jié)構(gòu)，然后插入當(dāng)前文檔。這樣做的好處在于，因為DocumentFragment不屬于當(dāng)前文檔，對它的任何改動，都不會引發(fā)網(wǎng)頁的重新渲染，比直接修改當(dāng)前文檔的DOM有更好的性能表現(xiàn)。
document.createDocumentFragment()
//設(shè)置屬性
document.setAttribute('name','value')
//刪除屬性
document.romoveAttribute('name')
5. 如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?
//添加子元素
//appendChild()
var aChild = element.appendChild(aChild); //語法，element元素末尾添加aChild
var p = document.createElement("p"); //示例，創(chuàng)建p元素
document.body.appendChild(p); //將p元素添加到body末尾
//insertBefore()
//語法 在parentNode內(nèi)，將newNode添加到referenceNode前，如果refereNode省略則加在末尾
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
//刪除頁面元素下的子元素
parentNode.removeChild(childNode);
6. element.classList有哪些方法？如何判斷一個元素的 class 列表中是包含某個 class？如何添加一個class？如何刪除一個class?
//add(value):將給定字符串值加入列表，如已存在，就不添加
//添加"current"類
div.classList.add("current");
//remove(value)
//刪除"disabled"類
div.classList.remove("disabled");
//contains(value):判斷是否存在給定值，存在返回true，否則false
div.classList.contains("bd")
//toggle(value):如果列表中已存在，刪掉；不存在，就添加
//切換"user"類
//div.classList.toggle("user");
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>
<script>
//li
document.getElementsByTagName('li')
document.querySelectorAll('li')
//.btn
document.getElementsByClassName('btn')
document.querySelector('.btn')
</script>
