1.dom對象的innerText和innerHTML有什么區(qū)別凰狞？
答：innerText是獲取不帶標(biāo)簽的文本谅河，而innerHTML獲取的是帶標(biāo)簽的文本罐栈。都可以用作改寫頁面上的內(nèi)容搓蚪，innerHTML會獲取該元素所子元素的內(nèi)容像寒。一般使用innerText的多一些劝赔，這樣可以防止用戶所提交的數(shù)據(jù)中存在代碼誓焦，對頁面產(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)仍翰，還會返回文本節(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.查詢元素有幾種常見的方法？
答：常用的有六種方法他們分別是getElementById()灵迫、getElementsByClassName()秦叛、getElementsByTagName()、getElementByName()瀑粥、querySelector()挣跋、querySelectAll()。
- getElementById()：通過Id名稱來查詢元素
document.getElementById('ct') //查詢id為ct的元素
- getElementsByClassName():通過Class名稱來獲取元素狞换。
document.getElementsByClassName('box')//獲取Class名稱為box的元素避咆。
- getElementsByTagName():獲取指定標(biāo)簽的元素，返回值是一個(gè)HTMLCollection對象（類似一個(gè)數(shù)組）修噪。
document.getElementsByTagName('p')//獲取所有p標(biāo)簽內(nèi)容的一個(gè)類數(shù)組查库。
- getElementsByName():查詢擁有Name屬性的HTML元素，比如form割按、img等膨报，返回一個(gè)NodeList格式對象，不會實(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()：同上但返回對象是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級在事件監(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è)事件處理程序银还，對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ā)的元素接收类缤，然后逐級向上傳播臼勉，
- 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í)控制臺展示該元素的文本內(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>
