DOM、事件
問答
1. dom 對象的 innerText 和 innerHTML 有什么區(qū)別？
innerText，輸出/更改純文本
innerHTML，不僅可以輸出/更改純文本，還可以輸出/更改DOM節(jié)點樹
2. elem.children 和 elem.childNodes 的區(qū)別？
elem.children，輸出父節(jié)點包含的子節(jié)點組成的類數組
elem.children，輸出父節(jié)點包含的所有元素（包括空格、換行、文本、子節(jié)點）組成的類數組
3. 查詢元素有幾種常見的方法？
- 下面的方法里面的參數都是字符串：
- getElementById()
通過 id 查找。返回值為單個元素。 - getElementsByClassName()
通過 class 查找。返回值為類數組。 - getElementsByTagName()
通過 tagname(標簽名字) 查找。返回值為類數組。
- 下面的方法通過** CSS 選擇符**查詢：
- querySelector()
返回與該模式匹配的第一個元素，如果沒有，返回 null 。 - querySelectorAll()
與上類似，返回一個 NodeList 對象（與該模式匹配的所有元素）（類數組），如果沒有，Nodelist 為空。
4. 如何創(chuàng)建一個元素？如何給元素設置屬性？
- 創(chuàng)建元素
document.createElement('Tagname') - 設置屬性
setAttribute(‘屬性名’, ‘屬性值’)
tips: 不規(guī)范的屬性名也能夠被設置。
5. 元素的添加、刪除？
- 元素添加
appendChild(要添加的節(jié)點) tips: 在末尾添加
insertBefore(要插入的節(jié)點, 作為參照的節(jié)點) - 元素刪除
appendChild(要插入的節(jié)點, 要替換的節(jié)點)
removeChild(要移除的節(jié)點)
6. DOM0 事件 和 DOM2 級在事件監(jiān)聽使用方式上有什么區(qū)別？
- DOM0 事件監(jiān)聽器無法處理多個事件（當在同一個元素上再添加一個監(jiān)聽事件時會覆蓋之前的事件方法），DOM2 級事件監(jiān)聽器可以處理多個事件（事件列表）。
- DOM2 級 (addEventListener()) : 可以選擇在捕獲階段觸發(fā)事件或者在冒泡階段觸發(fā)事件。DOM0 無法選擇。
- DOM0 不存在兼容性問題，DOM2 在 IE8 之前不支持。（ IE 使用attachEvent(‘click’, func) ）
7. attachEvent 與 addEventListener 有什么區(qū)別？
-
attachEvent是老版本IE瀏覽器上監(jiān)聽事件的方法，接受兩個參數，第一個參數是事件類型，格式為”on+type”(onclick),第二個參數是事件處理程序函數。事件處理程序只能發(fā)生在冒泡階段。 -
addEventListener是現代大多數逐漸主流瀏覽器（Chrome,firefox,safari）監(jiān)聽事件的方法，接受三個參數，第一個參數時事件類型，格式為”type”(click),第二個參數是事件處理程序函數，第三個參數是布爾值,默認為false(冒泡事件),true為捕獲階段事件。
8. 解釋 IE 事件冒泡和 DOM2 事件傳播機制？
- IE事件冒泡：事件由觸發(fā)元素所在的具體節(jié)點開始，逐級向上傳播，直至html根節(jié)點。
- DOM2事件傳播機制：DOM2事件傳播機制屬于DOM事件流(DOM2級事件規(guī)定事件流包括三個階段，事件捕獲階段，處于目標階段，事件冒泡階段，首先發(fā)生的是事件捕獲，為截取事件提供機會，然后是實際目標接收事件，最后是冒泡階段)，并且第三個參數可以設置事件觸發(fā)時是捕獲階段或者冒泡階段。
9. 如何阻止事件冒泡？如何阻止默認事件？
- 阻止事件冒泡：
- event.stopPropagation()
- IE: event.cancelBubble=true ( 這里默認為 false )
- 阻止默認事件：
- event.preventDefault()
- IE: event.returnValue = false ( 這里默認為 true )
代碼
1. 要求：
- 當點擊每一個元素li時控制臺展示該元素的文本內容。不考慮兼容
2. 補全代碼，要求：
- 當點擊按鈕開頭添加時在
<li>這里是</li>元素前添加一個新元素，內容為用戶輸入的非空字符串；當點擊結尾添加時在<li>前端6班</li>后添加用戶輸入的非空字符串. - 當點擊每一個元素li時控制臺展示該元素的文本內容。
3. 補全代碼，要求：
- 當鼠標放置在li元素上，會在img-preview里展示當前l(fā)i元素的data-img對應的圖片。
4. 實現如下圖Tab切換的功能
JSBin_代碼地址_方法 1
JSbin_代碼地址_方法 2
5. 實現下圖的模態(tài)框功能
