webAPI
1-通過DOM節點方式獲取元素
1-0注意事項
下面的內容都在在文檔樹上直接操作的 (節點 + 元素)重點是: 與元素相關的內容
1-1與父節點相關的操作方式
1-1-1.知識點-判斷父元素中是否有子節點
語法:
DOM.hasChildNodes();
- 總結:
- 該方法返回的是一個布爾類型的結果
- 該方法會將元素中所有的節點都獲取（包括空格，回車符，文字，標簽等）
1-1-2.知識點-獲取父元素中所有子元素
語法:
DOM.children
- 總結:
- chiledren是一個屬性，不是一個方法
- 該屬性返回父元素中所有子元素（只包含標簽），不包括空格，回車符，純文本等
- 返回一個偽數組
- 通過dom.children.length來判斷是否存在子元素(長度是為0)
1-1-3.知識點-獲取父元素中第一個子元素
語法:
DOM.firstElementChild
- 總結:
- 通過該屬性可以將父元素中的第一個子元素獲取到【標簽】
- 該屬性只能獲取標簽，無法獲取文字，空格，回車符等節點
1-1-4.知識點-獲取父元素中最后一個子元素
語法:
DOM.lastElementChild
- 總結
- 通過該屬性可以將父元素中最后一個子元素獲取到【標簽】
- 該屬性只能獲取標簽，無法獲取文字，空格，回車符等節點
1-1-5.知識點-獲取父元素中所有子節點(了解)
語法:
DOM.childNodes
- 總結
- childNodes是一個屬性，不是一個方法
- 該屬性將父元素中所有節點返回（包括回車，空格等特殊符號）
- 該屬性將回車符看做是一個空的文本
1-1-6.知識點-獲取父元素中第一個子節點(了解)
語法:
DOM.firstChild
- 總結
- 通過該屬性可以將父元素中第一個節點得到
- 節點中包括文字，回車符，換行符等
1-1-7.知識點-獲取父元素中最后一個子節點(了解)
語法:
DOM.lastChild
- 總結
- 通過該屬性將父元素中最后一個節點得到
- 節點中包括文字，回車符，換行符等
1-2與子節點相關的操作方式
1-2-1.知識點-獲取上一個兄弟元素
語法:
DOM.previousElementSibling備注:
1. previousElementSibling屬性
2. previousElementSibling屬性 得到是一個 html 元素
1-2-2.知識點-獲取下一個兄弟元素
語法:
DOM.nextElementSibling備注:
1. nextElementSibling屬性
2. nextElementSibling屬性 得到是與當前元素相鄰的一個 html 元素
1-2-3.知識點-獲取下一個兄弟節點
語法:
DOM.nextSibling
1-2-4.知識點-獲取上一個兄弟節點
語法:
DOM.previousSibling備注:
1.獲取的是一個節點(包括html標簽, 回車符...)
1-2-5.知識點-根據子節點獲取父元素
語法:
DOM.parentNode備注:
1. parentNode 獲取當前元素的父元素
1-3節點屬性
1-3-1.知識點-獲取節點類型
語法:
DOM.nodeType總結:
1. 如果nodeType返回值是1，那么代表當前節點是一個標簽
2. 如果nodeType返回值是3，那么代表當前節點是一個文本(包括回車符)
3. 如果nodeType返回值是2，代表標簽中的一個屬性例如;
// 元素
var div = document.querySelector('div');
// 獲取屬性
var attr = div.getAttributeNode('id');
//獲取文本節點
var text = div.firstChild;
//獲取節點類型(了解)
console.log(div.nodeType); //1 ---> 就是一個html標簽
console.log(attr.nodeType); //2 ---> 表示的就是標簽中的一個屬性
console.log(text.nodeType); //3 ---> 表示的就是一個文本節點(回車符)
1-3-2.知識點-獲取節點名稱
語法:
DOM.nodeName總結:
1. 如果當前對象是一個標簽,那么就會將標簽的名字以大寫的形式展示
2. 如果當前對象是一個屬性,那么就會將屬性的名字以小寫的方式展示
3. 如果當前對象是一個文本節點(回車符), 那么就會返回一個值 #text
2-動態創建元素
-
知識點-通過document.write動態創建元素
document.write('<p>我是一個動態標簽</p>');備注: 1. document.write() 中放的都是字符串 2. document.write() 適合創建少量的html元素 -
知識點-通過innerHTMl動態創建元素
DOM.innerHTML = '<p>我是一個動態標簽</p>';備注: 1. innerHTML 也是一個字符串 2. 適合創建少量的html元素 -
知識點-通過document.createElement()方式創建元素
-
語法
document.createElement('標簽的名字');備注: 1. document.createElement() 寫的是標簽的名字,不是標簽 2. document.createElement() 有返回值,返回值就是創建的標簽對象 -
步驟:
-
document.createElement(‘標簽名’)
-
通過appendChild(‘子元素’)添加到父元素中
例如; var body = document.querySelector('body'); //2. 如何將創建的元素添加到body父元素中? body.appendChild(div);備注: appendChild() 將新元素追加到父容器的末尾
-
-
-
課堂練習-根據數組動態創建列表
var ary = ['張三', '李四', '王五', '趙六']; -
課堂案例-根據數組動態創建英雄列表
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:'北京'}];-
移除子元素
父元素.removeChild(子元素);
-
-
課堂案例-動態創建英雄圖片
3-其他方式添加元素
-
父節點.insertBefore(“新的節點”,“舊的子節點”)
通過insertBefore可以在父元素中某一個子元素的前面添加一個新元素備注: 1. 如果希望在父元素中的開始位置添加元例如: DOM對象.insertBefore(a, DOM對象.firstElementChild);DOM對象.insertBefore(a, DOM對象.children[0]); -
父節點.replaceChild(“新節點”,“舊節點”)
通過新節點將原來的節點替換掉, 不會保留原來的節點 -
元素.cloneNode(true| false)
false: 默認。只克隆外邊的標簽 true: 代表克隆元素內部的所有信息 -
課堂案例-微博案例
-
oninput事件
DOM.oninput = function() {}
4-注冊事件
-
知識點-通過 on 方式給元素注冊事件
-
知識點-通過addEventListener方式注冊事件
-
語法
DOM.addEventListener('事件類型',function(){});例如: div.addEventListener('click', function(){});注意: 通過addEventListener元素注冊事件的時候,事件類型前不需要加 'on' -
特點
-
-
知識點-移除事件
-
移除
on方式注冊的事件DOM.事件類型 = null; -
移除
addEventListener注冊的事件DOM.removeEventListener('事件類型', 函數名)注意: 如果要通過removeEventListener移除事件的時候,那么addEventListener注冊事件的時候需要是命名函數
-
-
補充說明:
var btn = document.getElementById("myBtn"); if (btn.addEventListener) { btn.addEventListener("click", myFunction); } else if (btn.attachEvent) {//兼容寫法btn.attachEvent("onclick", myFunction); }
5-事件流
- 知識點-事件冒泡
- 知識點-事件捕獲
- 知識點-事件目標
- 知識點-事件委托
- 知識點-事件對象參數
- e.target : 獲取真正觸發事件的對象
- e.type： 事件類型
- e.clientX
- 特點: 相對body
- e.clientY
- e.offsetX
- 特點:相對父元素左上角
- e.offsetY
- e.pageX
- 特點:相對整個頁面包括滾動出去的位置
- e.pageY
- e.screenX
- 特點:相對整個電腦屏幕
- e.screenY
- e.stopPropagation() 阻止事件冒泡
- 課堂案例-鼠標移動案例
6.鍵盤事件
-
知識點-onkeydown事件
-
知識點-onkeyup事件
-
知識點-onkeypress事件
-
鍵盤事件對象參數
-
e.key
-
e.keyCode
-
-
課堂案例-鍵盤移動案例
)
第五天（1）)
第五天（2）)
 - 插件的刪除和升級)
 內存泄漏)
第六天（1）)
