任務22 DOM、事件

dom對象的innerText和innerHTML有什么區別?
innerText:獲取節點里的所有文本;
innerHTML:獲取節點里的所有信息;

elem.children和elem.childNodes的區別?
elem.children:獲取元素的所有子節點dom對象,不包含自身的文本內容;
elem.childNodes:獲取元素的所有子節點對象,包含自身的文本內容;
elem.childNodes:會把子節點和父標簽間的空格當作文本內容;

查詢元素有幾種常見的方法?
getElementByID():返回匹配指定ID屬性的元素節點;

getElementsByClassName():返回一個類似數組的對象(HTMLCollection類型的對象),包括了所有class名字符合指定條件的元素(搜索范圍包括本身);

getElementsByTagName():返回所有指定標簽的元素(搜索范圍包括本身)。返回值是一個HTMLCollection對象;

getElementsByName():用于選擇擁有name屬性的HTML元素,返回一個NodeList格式的對象

querySelector():返回匹配指定的CSS選擇器的元素節點。如果有多個節點滿足匹配條件,則返回第一個匹配的節點;

querySelectorAll():返回匹配指定的CSS選擇器的所有節點,返回的是NodeList類型的對象;

如何創建一個元素?如何給元素設置屬性?
創建元素有3種方法:
createElement方法用來生成HTML元素節點;
createTextNode方法用來生成文本節點;
createDocumentFragment方法生成一個DocumentFragment對象;

給元素設置屬性:
setAttribute用來設置元素節點屬性。

元素的添加、刪除?
元素添加:appendChild()在元素末尾添加元素;
insertBefore()在某個元素之前插入元素
replaceChild()替換元素;
元素的刪除:removeChild()

DOM0 事件和DOM2級在事件監聽使用方式上有什么區別?
在DOM0級事件處理程序,事件名以'on'開頭,因此click事件的事件處理程序就是onclick、load事件的事件處理程序就是onload。
DOM2級事件定義了兩個方法,用于處理制定和刪除事件處理程序的操作“addEventListener() 和removeEventListener(),接收3個參數:要處理的事件名,作為事件處理程序的函數和一個布爾值;
使用0級事件處理具有跨瀏覽器的優勢;
2級事件處理可以添加多個事件處理程序。

attachEvent與addEventListener的區別?
一、適應的瀏覽器版本不同
attachEvent方法適用于IE addEventListener方法適用于FF
二、針對的事件不同
attachEvent中的事件帶on 而addEventListener中的事件不帶on
三、參數的個數不同
attachEvent方法兩個參數:第一個參數為事件名稱,第二個參數為接收事件處理的函數;
addEventListener 有三個參數:第一個參數表示事件名稱(不含 on,如 "click");第二個參數表示要接收事件處理的函數;第三個參數是一個bool值,一般為false
第三個參數叫做useCapture,是一個boolean值,就是true or false,如果送出true的話就是瀏覽器會使用Capture方式,false的話是Bubbling,只有在特定狀況下才會有影響,通常建議是false,而會有影響的情形是目標元素(target element)有祖先元素(ancestor element),而且也有同樣的事件對應函數,我想,看圖會比較清楚。

解釋IE事件冒泡和DOM2事件傳播機制?
IE事件冒泡:事件發生后先從具體的接收元素,然后逐步向上傳播到不具體的元素。
DOM2事件傳播機制:DOM2級事件規定事件流包括三個階段,事件捕獲階段,處于目標階段,事件冒泡階段,首先發生的是事件捕獲,為截取事件提供機會,然后是實際目標接收事件,最后是冒泡階段.

如何阻止事件冒泡? 如何阻止默認事件?
阻止事件冒泡:stopProprgation();
阻止默認事件:preventDefault();

代碼1
代碼2
代碼3
代碼4
代碼5

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,237評論 6 537
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,957評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,248評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,356評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,081評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,485評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,534評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,720評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,263評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,025評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,204評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,787評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,461評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,874評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,105評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,945評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,205評論 2 375

推薦閱讀更多精彩內容