JavaScript-DOM

節點的層次結構

hasChildNodes() 【父元素中是否包含子節點】

dom.hasChildNodes()
總結：1.該方法返回的是一個布爾類型的結果用來判斷當前元素中是否存在子節點。2.該方法會將元素中所有的節點都獲取（包括空格，回車符，文字，標簽等）

父節點.chiledren【父元素中的子元素】

 dom.children總結：1. chiledren是一個屬性，不是一個方法2. 該屬性返回父元素中所有子元素（只包含標簽），不包括空格，回車符，純文本等3. 返回一個偽數組4. 通過dom.children.length來判斷是否存在子元素

根據父節點獲取子節點【父元素中的子節點】

 dom.childNodes總結：1.childNodes是一個屬性，不是一個方法2.該屬性將父元素中所有節點返回（包括回車，空格等特殊符號）3.該屬性將回車符看做是一個空的文本

獲取父元素中第一個子元素

dom.firstElementChild
總結：1. 通過該屬性可以將父元素中的第一個子元素獲取到【標簽】2. 該屬性只能獲取標簽，無法獲取文字，空格，回車符等節點

獲取父元素中最后一個子元素

dom.lastElementChild
總結：1.通過該屬性可以將父元素中最后一個子元素獲取到【標簽】2.該屬性只能獲取標簽，無法獲取文字，空格，回車符等節點

獲取父元素中第一個節點

dom.firstChild
總結：1. 通過該屬性可以將父元素中第一個節點得到2. 節點中包括文字，回車符，換行符等

獲取父元素中最后一個節點

dom.lastChild
總結：1. 通過該屬性將父元素中最后一個節點得到2. 節點中包括文字，回車符，換行符等

操作與子元素相關的方法

根據子節點獲取父節點

? dom.parentNode
總結：1.通過該屬性可以獲取到整個父元素節點2.包括父元素中的所有文字，回車符等節點? 通過 nodeType 獲取節點類型dom.nodeType
總結：1. 如果nodeType返回值是1，那么代表當前節點是一個標簽2. 如果nodeType返回值是3，那么代表當前節點是一個文本【回車符】3. 如果nodeType返回值是2，代表標簽中的一個屬性? 通過 nodeName 獲取節點名稱dom.nodeName總結：1. 如果當前節點是一個標簽，那么通過該屬性返回該標簽的名稱2. 如果當前節點是一個文本，那么通過該屬性返回 #text

獲取兄弟節點
- 獲取下一個節點

? node.nextElementSibling 總結：1.獲取當前元素的下一個兄弟元素，不包括回車符，返回的是一個標簽? node.nextSibling 總結：1.獲取當前元素的下一個兄弟元素，包括回車符

- 獲取上一個節點

? node.previousElementSibling  總結：1. 上一個兄弟元素，不包括回車符
? node.previousSibling 總結：1. 上一個兄弟元素，存在兼容性

創建元素

document.write()
dom.innerHTMl

document.createElement()

 總結：1. createElement()只是在內存中創建了一個元素，無法再頁面中顯示出來2. 創建完元素后需要通過node.appendChild(子節點)將元素添加到dom樹中案例：通過數組動態創建列表，鼠標進入高亮顯示var ary = ["張三", "李四", "王五"];

課堂案例

創建英雄列表案例

創建表格【根據數據】-- 父元素.removeChild(node)

var heads = ['姓名', '年齡', '性別', '學號', '薪資', '城市', '操作'];
var datas = [
{name:'歐陽霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'上海'},
{name:'令狐霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'諸葛霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'南京'},
{name:'西門霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'深圳'},
{name:'鳩摩智',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'段延慶',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'段正淳',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'容子矩',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'崔綠華',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'梅超風',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'魯有腳',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'焦木和尚',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'韓小瑩',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'侯通海',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'歐陽克',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'歐陽峰',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'玄真道人',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'司徒伯雷',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'陳近南',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'張康年',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'吳大鵬',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'西奧圖三世',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'任盈盈',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'林遠圖',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'鄭鏢頭',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'張金鏊',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'陳歪嘴',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'洪人雄',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'余人彥',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'勞德諾',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'玉鐘子',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'史鏢頭',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'東方不敗',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}];

動態創建元素的其他方式

父節點.insertBefore(“新的節點”,“舊的子節點”)

  注意：1. 我們通過createElement創建的元素，默認都在元素的末尾添加2. 通過insertBefore可以在父元素中某一個子元素的前面添加一個新元素

父節點.replaceChild(“新節點”,“舊節點”)

  總結：1. 通過新節點將原來的節點替換掉

元素.cloneNode(true| false)

true: 代表克隆元素內部的所有信息
false: 默認。只克隆外邊的標簽

輸入框事件

oninput事件

dom.oninput = function() {}
總結：1. 用戶在輸入內容時候觸發該事件

注冊事件

on方式注冊事件

問題：使用on的方式給標簽注冊事件，后面的事件會將前面的事件覆蓋掉

addEventListener() 給元素注冊事件

參數介紹：第一個參數：代表事件類型【click,focus...】第二個參數：事件執行函數第三個參數：參數，可選，true或者false（默認）
備注：1. 存在瀏覽器兼容性IE9以后2. 多在移動端使用
語法：事件源.addEventListener(事件類型,事件處理程序);

attachEvent() 給元素注冊事件

dom.attachEvent('事件類型'，function(){}) 注意：1. 第一個參數： 代表事件類型需要 加 on2. 該事件注冊方式是給IE低版本瀏覽器使用的

移除元素事件

  1. 如果通過on給元素注冊事件，那么移除對應的事件賦值為null即可例如：  div.onclick = null;2. removeEventListener()注意：1. 如果需要通過removeEventListener移除事件，那么在使用addEventListener注冊事件的時候必須是命名函數，不能是匿名函數3. detachEvent() ,移除事件也需要命名函數

addEventListener()第三個參數介紹【事件流】

  事件冒泡： 如果addEventListener的第三個參數為false事件捕獲： 如果addEventListener的第三個參數為 true總結：?事件發生的三個階段：1. 捕獲階段  2. 執行階段： 執行當前點擊的元素3. 冒泡階段： ? on 或者 attachEvent方式注冊的事件，無法捕獲事件以上三個階段，只能有事件冒泡，因為不支持第三個參數

委托

 事件委托： 本質就是利用了事件冒泡實現步驟：通過事件對象參數，來捕獲當前事件相關的數據。事件參數（對象）： 當事件發生的時候，可以捕獲一些和當前事件相關的數據案例：點擊li獲取內容信息

事件對象

通過事件對象可以獲取到事件發生的時候和事件相關的數據? 在標準的方式中，在事件處理程序中，通過參數 “e”事件對象獲取? 在IE低版本中， 通過window.event 獲取事件對象e.target : 獲取真正觸發事件的對象
e.type： 事件類型e.clientX: 相對可視區域左上角橫坐標【以HTML標簽為參照，如果將body8像素去掉，body和html一樣】
e.clientY：相對可視區域左上角縱坐標【以HTML標簽為參照，如果將body8像素去掉，body和html一樣】e.offsetX: 橫坐標是相對于當前點擊元素的左上角
e.offsetY: 相對當前點擊元素的左上角e.pageX： 相對整個body標簽左上角【始終以整個頁面最左邊為參照】
e.pageY： 相對整個body標簽左上角【始終以整個頁面最上面為參照】e.screenX:  相對整個瀏覽器的左上角
e.screenY： 相對整個瀏覽器的左上角e.stopPropagation() 阻止事件冒泡課堂案例：鼠標移動案例鍵盤移動案例鍵盤事件： onkeydown： 用戶按下任何鍵盤鍵（包括系統按鈕，如箭頭鍵和功能鍵）時發生。   onkeyup  ：  用戶放開任何先前按下的鍵盤鍵時發生。 onkeypress： 【這個事件在用戶按下并放開任何字母數字鍵時發生。系統按鈕（例如，箭頭鍵,TAB,ctrl等功能鍵）無法得到識別。 】e.key： 獲取按下鍵的名稱
e.keyCode : 鍵對應的值