1.dom對(duì)象的innerText和innerHTML有什么區(qū)別？
答：innerText是獲取不帶標(biāo)簽的文本，而innerHTML獲取的是帶標(biāo)簽的文本。都可以用作改寫頁(yè)面上的內(nèi)容，innerHTML會(huì)獲取該元素所子元素的內(nèi)容。一般使用innerText的多一些，這樣可以防止用戶所提交的數(shù)據(jù)中存在代碼，對(duì)頁(yè)面產(chǎn)生影響。
<p>hello <a href="#">hunger</a></p>
<script>
var p = document.getElementsByTagName('p')[0]
</script>
2.elem.children和elem.childNodes的區(qū)別？
答：elem.children和elem.childNodes都是返回元素的直接子元素。區(qū)別有：
- children只返回有標(biāo)簽的元素節(jié)點(diǎn)。
- childNodes除了返回元素節(jié)點(diǎn)，還會(huì)返回文本節(jié)點(diǎn)，文本節(jié)點(diǎn)包括：空格、換行符等等。
<div id="ct">
<p>青青子衿， 悠悠我心</p>
<p>hello <a href="#">hunger</a></p>
</div>
<script>
var a = document.getElementById("ct")
console.log(a.children)
console.log(a.childNodes)
</script>
3.查詢?cè)赜袔追N常見的方法？
答：常用的有六種方法他們分別是getElementById()、getElementsByClassName()、getElementsByTagName()、getElementByName()、querySelector()、querySelectAll()。
- getElementById()：通過Id名稱來查詢?cè)?/li>
document.getElementById('ct') //查詢id為ct的元素
- getElementsByClassName():通過Class名稱來獲取元素。
document.getElementsByClassName('box')//獲取Class名稱為box的元素。
- getElementsByTagName():獲取指定標(biāo)簽的元素，返回值是一個(gè)HTMLCollection對(duì)象（類似一個(gè)數(shù)組）。
document.getElementsByTagName('p')//獲取所有p標(biāo)簽內(nèi)容的一個(gè)類數(shù)組。
- getElementsByName():查詢擁有Name屬性的HTML元素，比如form、img等，返回一個(gè)NodeList格式對(duì)象，不會(huì)實(shí)時(shí)反映元素變化。
document.getElementsByName('text')
- querySelector():查詢匹配指定的CSS選擇器的元素節(jié)點(diǎn)，如果有多個(gè)節(jié)點(diǎn)滿足條件，只返回第一項(xiàng)，IE8以上支持，現(xiàn)在很常用。
document.querySelector('#ct')//獲取Id為ct的元素
- querySelectorAll()：同上但返回對(duì)象是NodeList。
4.如何創(chuàng)建一個(gè)元素？如何給元素設(shè)置屬性？
答：創(chuàng)建一個(gè)元素createElement(),createTextNode()來往元素中添加文本，定義屬性setAttribute()，里面?zhèn)魅雰蓚€(gè)值，第一個(gè)值為元素的屬性，第二個(gè)值為定義的值。
<body>
<p class="a">青青子衿，悠悠我心</p>
<script>
var newP = document.createElement('p');
var newText = document.createTextNode('但為君故，沉吟至今')
newP.appendChild(newText)
document.body.appendChild(newP)
var a = document.querySelector('.a')
a.setAttribute('align','center')
</script>
</body>
5.元素的添加、刪除？
答：使用appendchild()在元素的末尾添加元素參數(shù)為添加進(jìn)的元素，在上一題的例子中已經(jīng)使用過這個(gè)。
使用insertBefore在某個(gè)元素之前插入元素節(jié)點(diǎn)，該方法有兩個(gè)參數(shù)一個(gè)是被添加的元素，另一個(gè)被替換的元素。
<div id="ct">
<p>青青子衿，悠悠我心</p>
</div>
<script>
var div = document.getElementById('ct'),
newContent = document.createTextNode('但為君故，沉吟至今');
div.insertBefore(newContent, div.firstChild);
</script>
使用 removChild（）來刪除某個(gè)元素，參數(shù)是待刪除元素。
使用replaceChild（）來替換某個(gè)元素，它有兩個(gè)參數(shù)一個(gè)是替換的元素，另一個(gè)是被替換的元素。
6.DOM0 事件和DOM2級(jí)在事件監(jiān)聽使用方式上有什么區(qū)別？
答：DOM0事件就是通過onclick寫在HTML標(biāo)簽里的事件，
<a href="#" onclick="console.log('clicked');">點(diǎn)我</a>
這種寫法的缺點(diǎn)是不利于日后的代碼維護(hù)，以及一個(gè)代碼只能使用一次，沒有復(fù)用性。
DOM2事件有兩種方法一個(gè)是addEventListener()和removeEventListener() 它們都返回三個(gè)參數(shù)分別是事件類型、事件處理方法和布爾值默認(rèn)為false，false是冒泡階段處理，如果是ture就是在調(diào)用階段處理。
<input id='btn' type="button" name="name" value="點(diǎn)我啊" />
<script>
var btn = document.querySelector("#btn")
btn.addEventListener("click",function(){
console.log("哈哈")
},false)
</script>
DOM2可以給上面代碼添加多個(gè)事件處理程序，對(duì)IE9以下的瀏覽器不支持。
7.attachEvent與addEventListener的區(qū)別？
答：
- addEventListener是W3C標(biāo)準(zhǔn)，而attachEvent()不是W3C標(biāo)準(zhǔn)，并只支持IE8瀏覽器以下的
- addEventListener里面有三個(gè)參數(shù)（類型、函數(shù)、布爾值）而attachEvent只有兩個(gè)（類型、函數(shù)），只支持事件冒泡。
- addEventListener接收的類型為click而attachEvent接收的是onclick。
- addEventListener的移除函數(shù)方法是removeEventListener，而attachEvent移除函數(shù)的方法是detachEvent。
- addEventListener的作用域是元素本身，this指的是觸發(fā)元素，attachEvent的作用域是全局this指的是window。
- addEventListener按照添加順序執(zhí)行，attachEvent沒有順序執(zhí)行。
8.解釋IE事件冒泡和DOM2事件傳播機(jī)制？
答：
- IE事件冒泡是事件由第一個(gè)被觸發(fā)的元素接收，然后逐級(jí)向上傳播，
- DOM2事件傳播，事件由最外層元素接收，然后逐層向內(nèi)傳播，這個(gè)過程為捕獲階段，當(dāng)達(dá)到目標(biāo)元素時(shí)，處于目標(biāo)階段，然后事件由目標(biāo)元素向最外層開始傳遞，這個(gè)過程稱之為冒泡階段
9.如何阻止事件冒泡？ 如何阻止默認(rèn)事件？
答：阻止事件冒泡：e.stopPropagation()用來阻止事件傳播，事件在document冒泡階段是聽不到響應(yīng)的。
使用cancelable來查詢默認(rèn)事件是否被阻止，如果返回值為true，可以使用e.preventDefault()來阻止默認(rèn)事件,比如阻止a鏈接的跳轉(zhuǎn)。
代碼題
有如下代碼，要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
var ct = document.querySelector(".ct")
ct.addEventListener("click",function(e){
console.log(e.target.innerText)
},false)
</script>
方法2
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
var ct = document.getElementsByClassName("ct")[0].getElementsByTagName("li")
for (var i= 0;i<ct.length;i++){
ct[i].addEventListener("click",function(){
console.log(this.innerText)
})
}
</script>
