js-DOM學習
在學習DOM的時候，主要是對頁面元素進行操作，無非就是對頁面元素進行增刪改查的操作，接下來就來學習一下DOM的一些常規操作。
1.如何獲取頁面的元素
- ·1.根據ID獲取
document.getElementByid('ID')
獲取單個頁面元素，
參數是字符串
返回的是object類型，沒有則返回null
- 2.根據標籤名
getElementByTagName('標籤名')
返回的是元素對象的集合
- 3.通過HTML5新增的方法
1.根據類名
getElementByClassName('id')
根據雷鳴獲取元素，獲取的是一個元素集合
2.選擇器 (常用)
querySelector('#ID')
根據選擇器進行選擇
返回指定選擇器的第一個元素對象，獲取單個
裏面的選擇器需要加符號
3.選擇器 （常用）
querySelectAll('li')
返回的是一個元素集合
- 4.特殊元素獲取
1.獲取body標籤
document.body
2.獲取HTML標籤
document.documentElement;
2.事件三要素 （重點）
1.事件源：要觸發的對象
2.事件類型：觸發什麼事件
3。處理程序：做什麼
3.鼠標常用事件（重點）
1.click 鼠標點擊事件
2.mouseover 鼠標經過事件
3.mouseout 鼠標離開事件
4.focus 獲取焦點
5.blur 失去焦點
6.mousemove 鼠標移動觸發
7.mouseup 鼠標彈起
8.mousedown 鼠標按下
9.input 表單內容改變
10.change 內容改變觸發事件
11.mouseenter 鼠標移入
12.mouseleave 鼠標移除
4.mouseover和mousemove的區別：
前者只執行一次，mousemove是鼠標移動到指定位置會一直觸發。
5.操作元素對象的屬性
- 1.非表單元素
1.element.innerText=''; 設置標籤中的文本內容
2.element.innerHTML='' 設置標籤中的內容，會解析html標籤
3.element.src=''; 設置圖片的路徑
4.element.title='' 設置標題 鼠標懸停在圖片上顯示的提示文本
5.element.href='' 設置表單中的內容
- 2.表單元素
1.input.value=‘’ 設置表單中的內容
2.input.type='' 設置表單的類型
3.input.disabled=true 是否禁用（true表示禁用 false表示可用）
4.input.checked=true 是否選中（true表示選中 false表示不選中）
5.input.selected=true 是否選中
- 3.樣式的操作
element.style.屬性名=''
特點： 設置數量較少的樣式，權重高，可以接受變量
element.className=''
特點： 會覆蓋原來的類樣式，設置較多的樣式，權重不高，
6.排他思想：（重點）
1.使用for循環變量所有的元素，然後把他們元素設置樣式爲空
2.循環結束給當前元素設置樣式。
7.H5自定義屬性(重點)
1.獲取自定義屬性： element.getAttribute(屬性名)
2.設置自定義屬性：element.setAttribute(屬性名，屬性值)
3.移除自定義屬性：element.removeAttribute(屬性名)
H5規定自定義屬性必須以date- 開頭
dateset是一個集合裏面存放了所有以data開頭的自定義屬性
8.節點操作 (重點)：
1.獲取父節點 （常用）：
element.parentNode()
2.獲取子節點 （常用）:
element.children();
3.獲取子節點：
element.childNodes
4.獲取第一個節點|元素
element.firstChild
element.firstElementChild
5.獲取最後一個子節點|元素
element.lastChild
element.lastElementChild
6.獲取殤一二兄弟節點|元素
element.previousSibling
element.previousElementSibling
7.獲取下一個兄弟節點|元素
element.nextSibling
element.nextElementSibling
9.動態添加節點
1.使用element.innerHTML='';
2.創建元素，然後添加
var li=document.createElement('li');
parent.appendChild(li); //在父元素最後面追加子元素
parent.insertBefore(li,參照的元素) //在父元素最前面追加子元素
10.節點操作：
1.刪除節點 （常用）
parent.removeChild(child) 只能父親刪除兒子
2.克隆節點 （常用）
element.cloneNode(false|true)
false代表淺克隆，只會克隆標籤
true代表深克隆，克隆所有內容
11.創建節點的三種方式
document.write()
特點：如果當頁面已經渲染完畢，再次觸發這個方法的話，會覆蓋原來頁面的所有內容
element.innerHTML
特點：效率高，結構不方便查看，也不方便進行事件的註冊
document.createElement()
特點： 效率比innerHTML低一些，但是結構比較清晰，方便去進行事件的註冊
12.註冊事件的方法： （重點）
1.傳統方式
btn.onclick=function(){
}
2.添加監聽
btn.addEventListener('click',fn,flag)
flag:false代表的是事件冒泡
flag:true代表的是事件的捕獲
13.註銷事件的方式 （重點）
1.傳統方式
btn.onclick=null;
2.監聽方式
btn.removeEventListener('click',fn) //事件 函數
14.事件的三個階段 （重點）
- 1.捕獲階段
- 2.目標階段
- 3.冒泡階段
15事件對象 （重點）
1.什麼是事件對象：
描述一件事情的對象，裏面封裝了這次事件相關的數據信息
2.事件對象的屬性 （重點）
e.target 獲取觸發事件的對象
e.type 獲取事件類型
e.pageX|pageY 獲取鼠標在頁面中的位置
e.clientX|clientY 獲取鼠標在可視區的位置
e.screenX|e.screenY 獲取鼠標在屏幕中的位置
3.阻止冒泡
e.stopPropagation();
4.阻止默認行爲
e.preventDefault();
16.什麼是事件委託 （重點）
原理：使用的是事件冒泡
本應該給子元素綁定的事件，給父元素去設置，這樣一旦我們點擊了子元素
，就會通過事件冒泡給父元素父元素的事件，然後我們可以通過事件對象.target
就能夠得到目標元素。
17.鍵盤事件
keydown 當鍵盤按下的時候觸發 識別功能鍵
keypress 當鍵盤按下的時候觸發 不識別功能鍵
keyup 當鍵盤擡起的時候觸發
我們可以通過事件對象 e.keyCode 來獲取鍵盤按下對應按鍵的 asicc 碼
BOM學習
1.窗口加載事件（重點）
頁面所有元素加載完畢的時候調用
1.window.load=function(){}
2.window.addEventListenner('load',function(){});
3.DOMCotentLoaded Dom元素渲染完畢的時候調用
2.resize窗口改變的時候調用
方法：
獲取窗口的寬高
1.window.innerWidth
2.window.innerHeight
3.兩種定時器
第一種
var time=setTimeout(function(){},事件)
返回值是定時器的標識，這個標識可以用來清除定時器
clearTimeout(time) //清除定時器
第二種（常用）
var time=setInterval(function(){},間隔時間)
clearTimeout(time) //清除定時器
區別：
setTimeout只會執行一次，setInterval可以重複進行執行
4.this指向問題 （重點）
1.在全局作用域下、普通函數、定時器的this執行都是指window
2.在方法中誰調用了this就指向誰
3.在構造函數中調用指向的就是當前對象
5.js執行的機制（重點）
js執行機制中分爲同步任務和異步任務，首先代碼在執行的時候先執行執行棧中的同步任務，
如果在執行過程中遇到回調函數就會通過異步進程判斷他是否進行了事件操作如果是把
他放到異步任務隊列當中，然後再繼續執行，當同步任務執行完畢之後，系統會按次序讀
取任務隊列中的異步任務。如果有就把他放到執行棧中執行
事件循環：
由於主線程不斷地重複獲得任務，執行任務，再次獲取任務，再執行，這種機制被稱爲事件循環
6.window裏面的內置對象
location對象：
location.href 獲取的是地址欄的url，要是賦值用來跳轉頁面
location.search 獲取url後的參數 ?號後面的都是參數
location.reload( false|true) false代表普通刷新，有緩存就用緩存，沒有就去請求服務器，設置true強制刷新，直接請求服務器
location.assign() 跳轉頁面
location.replace() 跳轉，不存在歷史記錄中，就不能進行回退
navigation對象
userAgent 獲取的是客戶端的類型（瀏覽器，手機，平板）
history
history.forward() 前進
history.back() 後退
history.go() 整數代表前進，負數代表是後退
7.三大系列：
offset系列
獲取的是元素的偏移量，參照的是帶有定位的父輩元素，如果父輩元
素沒有定位，參照的是body
element.offsetTop|offsetLeft
獲取的元素的寬高， padding + border + 內容
element.offsetWidth|offsetHeight
獲取的是帶有定位的最近的父輩元素，如果父輩元素都沒有定位，那麼獲取的是body
element.offsetParent
client系列
獲取的是左邊框|上邊框的寬度
element.clientLeft|clientTop
獲取的是元素寬高， padding + 內容
element.clientWidth|clientHeight
scrool系列
scrollLeft|scrollTop
水平|垂直方向滾動出去的距離
scrollWidth|scrollHeigh
內容的真實寬度|高度
滾動整個頁面的時候， window.pageYOffset
8.自動調用函數（立即執行函數）
好處：防止命名污染
(function(){})()
(function(){}())
9.mouseenter 與 mouseover的區別
mouseenter 不會進行事件冒泡
mouseover 是會進行事件冒泡
10.動畫的原理
利用定時器 setInterval，在定時器的函數中，先獲取到當前盒子的位置，然後加
上移動的距離，最後把這個值設置給當前元素的偏移就好
緩動動畫：
var step= (目標位置- 當前盒子的位置)/10
把這個step + 盒子當前的位置，就是最後要設置給盒子的偏移量
11.節流閥的概念
防止用戶點擊過快，導致我們的輪播圖切換的速度變快
讓我們代碼執行完了之後，再去執行其他的代碼邏輯
使用節流閥
1.設置一個boolean的變量來控制
2.當我們的輪播圖的動畫開始執行的時候，把這個boolean類型的值設置爲false，當動畫執行完畢的時候，把boolean類型的值設置成true
12.移動端的事件
touchstart
觸摸到了屏幕
touchmove
手指在屏幕中滑動
touchend
手指離開屏幕
13.移動端有特殊的事件對象
touchEvent 觸摸事件
touches
獲取的是正在觸摸屏幕的所有的手指對象的集合
targetTouches
獲取的是觸摸當前元素對象的所有的手指對象的集合
changedTouches
獲取手指個數發生改變的手指對象的集合，從無到有，從有到無，添加手指
，移除了一個手指
14.類名操作
element.classList.add() 添加類名
element.classList.remove() 移除類名
element.classList.toggle() 切換類名 沒有這個類名會進行添加，有這個類名會進行刪除
15.緩存（重點）
sesstionStorage
生命週期：關閉當前窗口，那麼緩存數據就沒有了
存儲大小：5M
方法
sesstionStorage.setItem(key,value) key代表是屬性名 value 代表是屬性值
sesstionStorage.getItem(key) 獲取緩存數據
sesstionStorage.removeItem(key) 移除緩存數據
sessionStorage.clear() 清空
localStorge
生命週期: 永久生效，除非手動進行刪除
存儲大小: 20M
方法
localStorage.setItem(key,value) key代表是屬性名 value 代表是屬性值
localStorage.getItem(key) 獲取緩存數據
localStorage.removeItem(key) 移除緩存數據
localStorage.clear() 清空