DOM嫉你、事件

問(wèn)答

1. dom 對(duì)象的 innerText 和 innerHTML 有什么區(qū)別月帝？

• innerText，輸出/更改純文本

• innerHTML幽污，不僅可以輸出/更改純文本嚷辅，還可以輸出/更改DOM節(jié)點(diǎn)樹(shù)

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

• elem.children距误，輸出父節(jié)點(diǎn)包含的子節(jié)點(diǎn)組成的類(lèi)數(shù)組

• elem.children簸搞，輸出父節(jié)點(diǎn)包含的所有元素（包括空格、換行深寥、文本攘乒、子節(jié)點(diǎn)）組成的類(lèi)數(shù)組

3. 查詢(xún)?cè)赜袔追N常見(jiàn)的方法贤牛？

1. 下面的方法里面的參數(shù)都是字符串：

• getElementById()
  通過(guò) id 查找惋鹅。返回值為單個(gè)元素。
• getElementsByClassName()
  通過(guò) class 查找殉簸。返回值為類(lèi)數(shù)組闰集。
• getElementsByTagName()
  通過(guò) tagname(標(biāo)簽名字) 查找。返回值為類(lèi)數(shù)組般卑。

2. 下面的方法通過(guò)** CSS 選擇符**查詢(xún)：

• querySelector()
  返回與該模式匹配的第一個(gè)元素武鲁，如果沒(méi)有，返回 null 蝠检。
• querySelectorAll()
  與上類(lèi)似沐鼠，返回一個(gè) NodeList 對(duì)象（與該模式匹配的所有元素）（類(lèi)數(shù)組），如果沒(méi)有，Nodelist 為空饲梭。

4. 如何創(chuàng)建一個(gè)元素乘盖？如何給元素設(shè)置屬性？

1. 創(chuàng)建元素
   document.createElement('Tagname')
2. 設(shè)置屬性
   setAttribute(‘屬性名’, ‘屬性值’)
   tips: 不規(guī)范的屬性名也能夠被設(shè)置憔涉。

5. 元素的添加订框、刪除？

1. 元素添加
   appendChild(要添加的節(jié)點(diǎn)) tips: 在末尾添加
   insertBefore(要插入的節(jié)點(diǎn), 作為參照的節(jié)點(diǎn))
2. 元素刪除
   appendChild(要插入的節(jié)點(diǎn), 要替換的節(jié)點(diǎn))
   removeChild(要移除的節(jié)點(diǎn))

6. DOM0 事件 和 DOM2 級(jí)在事件監(jiān)聽(tīng)使用方式上有什么區(qū)別兜叨？

• DOM0 事件監(jiān)聽(tīng)器無(wú)法處理多個(gè)事件（當(dāng)在同一個(gè)元素上再添加一個(gè)監(jiān)聽(tīng)事件時(shí)會(huì)覆蓋之前的事件方法）穿扳，DOM2 級(jí)事件監(jiān)聽(tīng)器可以處理多個(gè)事件（事件列表）。
• DOM2 級(jí) (addEventListener()) : 可以選擇在捕獲階段觸發(fā)事件或者在冒泡階段觸發(fā)事件国旷。DOM0 無(wú)法選擇矛物。
• DOM0 不存在兼容性問(wèn)題，DOM2 在 IE8 之前不支持跪但。（ IE 使用attachEvent(‘click’, func) ）

7. attachEvent 與 addEventListener 有什么區(qū)別泽谨？

• attachEvent是老版本IE瀏覽器上監(jiān)聽(tīng)事件的方法，接受兩個(gè)參數(shù)特漩，第一個(gè)參數(shù)是事件類(lèi)型吧雹，格式為”on+type”(onclick),第二個(gè)參數(shù)是事件處理程序函數(shù)。事件處理程序只能發(fā)生在冒泡階段涂身。
• addEventListener是現(xiàn)代大多數(shù)逐漸主流瀏覽器（Chrome,firefox,safari）監(jiān)聽(tīng)事件的方法雄卷，接受三個(gè)參數(shù)，第一個(gè)參數(shù)時(shí)事件類(lèi)型蛤售，格式為”type”(click),第二個(gè)參數(shù)是事件處理程序函數(shù)丁鹉，第三個(gè)參數(shù)是布爾值,默認(rèn)為false(冒泡事件),true為捕獲階段事件。

8. 解釋 IE 事件冒泡和 DOM2 事件傳播機(jī)制悴能？

• IE事件冒泡：事件由觸發(fā)元素所在的具體節(jié)點(diǎn)開(kāi)始揣钦，逐級(jí)向上傳播，直至html根節(jié)點(diǎn)漠酿。
• DOM2事件傳播機(jī)制：DOM2事件傳播機(jī)制屬于DOM事件流(DOM2級(jí)事件規(guī)定事件流包括三個(gè)階段冯凹，事件捕獲階段，處于目標(biāo)階段炒嘲，事件冒泡階段宇姚，首先發(fā)生的是事件捕獲，為截取事件提供機(jī)會(huì)夫凸，然后是實(shí)際目標(biāo)接收事件浑劳，最后是冒泡階段)，并且第三個(gè)參數(shù)可以設(shè)置事件觸發(fā)時(shí)是捕獲階段或者冒泡階段夭拌。

9. 如何阻止事件冒泡魔熏？如何阻止默認(rèn)事件衷咽？

• 阻止事件冒泡：
  • event.stopPropagation()
  • IE: event.cancelBubble=true ( 這里默認(rèn)為 false )
• 阻止默認(rèn)事件：
  • event.preventDefault()
  • IE: event.returnValue = false ( 這里默認(rèn)為 true )

代碼

1. 要求：

• 當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。不考慮兼容

效果預(yù)覽

2. 補(bǔ)全代碼蒜绽，要求：

• 當(dāng)點(diǎn)擊按鈕開(kāi)頭添加時(shí)在 <li> 這里是 </li> 元素前添加一個(gè)新元素兵罢，內(nèi)容為用戶(hù)輸入的非空字符串；當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在 <li> 前端6班 </li> 后添加用戶(hù)輸入的非空字符串.
• 當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容滓窍。

效果預(yù)覽

3. 補(bǔ)全代碼卖词，要求：

• 當(dāng)鼠標(biāo)放置在li元素上，會(huì)在img-preview里展示當(dāng)前l(fā)i元素的data-img對(duì)應(yīng)的圖片吏夯。

效果預(yù)覽

4. 實(shí)現(xiàn)如下圖Tab切換的功能

JSBin_代碼地址_方法 1
JSbin_代碼地址_方法 2

5. 實(shí)現(xiàn)下圖的模態(tài)框功能

效果預(yù)覽