H5新增元素獲取方式

var box = document.querySelector('選擇器')
var box = document.querySelector('.box')//class選擇器
var box = document.querySelector('#box')//id選擇器

querySelector根據指定元素返回第一個元素物件

var box = document.querySelectorAll('.box')

querySelectorAll()返回指定選擇器的所有元素物件集合

獲取特殊元素

1. 獲取body元素

var bodyEle = document.body
 

2. 獲取HTML元素

var htmlEle = document.documentElement

常見的滑鼠事件

innerText 和innerHTML區別

element.innerText

從起始位置到終止位置的內容，但它去除html標籤，同時空格和換行也會去掉

element.innerHTML

起始位置到終止位置的全部內容，包括html標籤，同時保留空格和換行

區別：

• innerText不識別html標籤，非標準，去除空格和換行
• innerHTML識別html標籤，W3C標準，保留空格和換行

修改樣式屬性

element.style //行內樣式操作
element.className //類名樣式操作

注意：

1. JS裡面的樣式採取駝峰命名方法，比如fontSize、backgroundColor
2. JS修改style樣式操作，產生的是行內樣式，css權重比較高
3. 如果樣式修改較多，可以採取操作類名方式更改元素樣式
4. class因為是個保留字，因此使用className來操作元素類名屬性
5. className會直接更改元素的類名，會覆蓋原先的類名
6. 修改元素的className更改元素的樣式時，如果想要保留原先的類名，可以採用多類名選擇器

this.className = "first second"

排他思想

<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>

<script>
    //1.獲取所有按鈕
    var btns = document.getElementsByTagName('button')
    //btn得到的是偽陣列，裡面的每一個元素btns[i]
    for(var i = 0 ; i < btns.length ; i++){
        btns[i].onclick = function(){
            //（1）先把所有的按鈕背景顏色去掉，幹掉所有人
            for(var i = 0 ; i < btns.length ; i++){
                btns[i].style.backgroundColor = ""
            }
            //（2）然後才設定當前的背景顏色，留下我自己
            this.style.backgroundColor = "yellow"
        }
    }
    //2.首先排除其他人，然後才設定自己的樣式，這種排除其他人的思想稱為排他思想
</script>

自定義屬性的操作

1. 獲取屬性值

• element.屬性 獲取屬性值
• element.getAttribute('屬性');

區別：

• element.屬性 獲取內建屬性值（元素本身自帶的屬性）
• element.getAttribute('屬性')； 主要獲得自定義的屬性（標準）我們自己定義的屬性

2.設定屬性值

• element.屬性 = '值' 設定內建屬性值
• element.setAttribute('屬性','值')； 主要針對於自定義屬性（標準）

3.移除屬性

• element.removeAttribute('屬性')；

H5自定義屬性

1. H5設定自定義屬性

   H5規定自定義屬性data-開頭作為屬性名並且賦值

   比如<div data-index = "1"></div>

   或者使用JS設定

   element.setAttribute('data-index',2)

2. H5獲取自定義屬性

   • 相容性獲取 element.getAttribute('data-index');

   • H5新增element.dataset.index 或者 element.dataset['index'] 只能獲取data-開頭的 ie11才開始支援

     注：如果自定義屬性裡面有多個-連線的單詞，獲取的時候採用駝峰命名法，如data-list-name,獲取 的時候就是element.dataset.listName

節點操作

1. 父級節點

node.parentNode

• parentNode 屬性可返回某節點的父節點，返回最接近的一個父節點
• 如果指定的節點沒有父節點就返回null

2. 子節點

parentNode.children(非標準)

parentNode.children是一個只讀屬性，返回所有的子元素節點。它只返回子元素節點，其餘節點不返回。

雖然children是一個非標準，但是得到了各個瀏覽器的支援，因此可以放心使用

3. 兄弟節點

node.nextSibling

返回當前元素的下一個兄弟節點，找不到則返回null，包含所有節點

node.previousSibling

返回當前元素的上一個兄弟節點，找不到則返回null，包含所有節點

4. 建立節點

document.createElement('tagName')

5. 新增節點

1.node.appendChild(child)

node 父級 ， child 子級。將一個節點新增到指定父節點的子節點列表末尾。類似於css裡面的after偽元素。

2.node.insertBefore(child,指定元素)

將一個節點新增到指定父節點的指定子節點前面。類似於css裡面的before偽元素。

6. 刪除節點

node.removeChild(child)

從DOM中刪除一個子節點，返回刪除的節點。

7. 複製節點

node.cloneNode()

返回呼叫該方法的節點的一個副本，也稱為克隆節點/拷貝節點。

注：

1. 如果括號引數為空或者為false，則是淺拷貝，即只克隆節點本身，不可隆裡面的子節點。
2. 如果括號引數為true，則是深度拷貝，會複製節點本身以及裡面所有的子節點。

三種動態建立元素的區別

• document.write ()
• element.innerHTML
• document.createElement ()

區別

1. document.write 是直接將內容寫入頁面的內容流，但是文件流執行完畢，則它會導致頁面全部重繪。

2. innnerHTML是將內容寫入某個DOM節點，不會導致頁面全部重繪

3. innerHTML建立多個元素效率更高（不要拼接字串，採取陣列形式拼接，結構稍微複雜。

4. createElement () 建立多個元素效率稍低一點點，但是結構更清晰

總結：不同瀏覽器下，innerHTML效率要比createElement高

註冊事件（繫結事件）

註冊事件有兩種方式：傳統方式和方法監聽註冊方式

傳統註冊方式

• 利用on開頭的事件，onclick等
• <button onclick = "alert('hello')"></button>
• btn.onclick = function (){ }
• 特點：註冊事件的唯一性
• 同一個元素同一個事件只能設定一個處理函式，最後註冊的處理函式將會覆蓋前面註冊的處理函式

方法監聽註冊方式

• w3c標準 推薦方式
• addEventListener () 它是一個方法
• IE9之前的IE不支援此方法，可使用attachEvent ()代替
• t特點：同一個元素同一個事件可以註冊多個監聽器
• 按註冊順序依次執行

addEventListener 事件監聽方式

eventTarget.addEventListener(type , listener[,useCapture])

該方法將指定的監聽器註冊到eventTarget（目標物件）上，當該物件觸發指定的事件時，就會執行事件處理函式。

該方法接收三個引數：

• type：事件型別字串，比如click、mouseover，注意這裡不要帶on
• listener：事件處理函式，事件發生時，會呼叫該監聽函式
• useCapture：可選引數，是一個布林值，預設是false。

例：

btn.addEventListener('click',function(){
	alert('hello');
})
//同一個元素，同一個事件可以新增多個偵聽器（事件處理程式）
btn.addEventListener('click',function(){
	alert('world');
})

attachEvent 事件監聽方式

eventTarget.attachEvent(eventNameWithOn , callback)

eventTarget.attachEvent () 方法將指定的監聽器註冊到eventTarget(目標物件)上，當該物件觸發指定的事件時，指定的回撥函式就會被執行。

該方法接收兩個引數：

• eventNameWithOn：事件型別字串，比如onclick、onmouseover，這裡要帶on
• callback：事件處理函式，當目標觸發事件時回撥函式被呼叫

注：IE8及早期版本支援

註冊事件相容性解決方案

function addEventListener (element , eventName , fn) {
           //判斷當前瀏覽器是否支援addEventListener方法
           if(element.addEventListener) {
               element.addEventListener(eventName , fn);//第三個引數預設是false
           } else if (element.attachEvent) {
               element.attachEvent('on' + eventName , fn);
           } else {
               //相當於element.onclick = fn
               element('on' + eventName) = fn;
           }
       }

相容性處理的原則：首先照顧大多數瀏覽器，再處理特殊瀏覽器

刪除事件

1. 傳統註冊方式

   eventTarget.onclick = null;

2. 方法監聽註冊方式

• eventTarget.removeEventListener(type , listener[ , useCapture]);

element.removeEventListener('click',fn)

• eventTarget.detachEvent(eventNameWithOn , callback);

element.detachEvent('onclick',fn)

DOM事件流

事件發生時會在元素節點之間按照特定的順序傳播，這個傳播過程即DOM事件流

DOM事件流分為3個階段：

1. 捕獲階段
2. 當前目標階段
3. 冒泡階段

注意

1. JS程式碼中只能執行捕獲或者冒泡其中的一個階段

2. onclick和attachEvent只能得到冒泡階段

3. addEventListener(type,listener[ , useCapture])第三個引數如果是true，表示在事件捕獲階段呼叫事件處理程式；如果是false（不寫預設就是false），表示在事件冒泡階段呼叫事件處理程式。

4. 實際開發中很少使用事件捕獲，更關注事件冒泡

5. 有些事件是沒有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave

6. 事件冒泡有時候會帶來麻煩，有時候又會幫助很巧妙的做某些事情

事件物件

eventTarget.onclick = function(event){}
eventTarget.addEventListener('click',function(event)){}
//event就是事件物件

​ 官方解釋：event物件代表事件的狀態，比如鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態

​ 簡單解釋：事件發生後，跟事件相關想一系列資訊資料的集合都放到這個物件裡面，這個物件就是事件物件event，它有很多屬性和方法。

比如：

1. 誰綁定了這個事件。
2. 滑鼠觸發事件的話，會得到滑鼠的相關資訊，如滑鼠位置。

注：這個event是個形參，系統幫我們設定為事件物件，不需要傳遞實參過去

當我們註冊事件時，event物件就會被系統自動建立，並依次傳遞給事件監聽器（事件處理函式）

事件物件相容性問題

1. 標準瀏覽器中是瀏覽器給方法傳遞的引數，只需要定義形參e就可以獲取到
2. 在IE6~8中，瀏覽器不會給方法傳遞引數，如果需要的話，需要到window.event中獲取查詢

解決

e = e || window.event

事件物件的常見屬性和方法

e.target與this 的區別

1. e.target 返回的是觸發事件的物件（元素）

2. this返回的是繫結事件的物件

   例：例如點選一個li標籤，事件繫結的是ul標籤，那麼this指向ul，e.target指向點選的那個物件，誰觸發了這個事件，點選的是li，e.target指向的就是li

事件委託（代理、委派）

事件委託的原理

不是每個子節點單獨設定事件監聽器，而是事件監聽器設定在其父節點上，然後利用冒泡原理影響設定每個子節點。（利用事件冒泡的優點）

例：給ul註冊點選事件，然後利用事件物件的target來找到當前點選的li，因為點選li，時間會冒泡到ul上，ul有註冊事件，就會觸發事件監聽器。

事件委託的作用

只操作了一次DOM，提高了程式的效能

常用的滑鼠事件

 //1.contextmenu禁用右鍵選單
 document.addEventListener('contextmenu',function(e){
 e.preventDefault();
 })
 //2.禁止選中文字 selectstart
 document.addEventListener('selectstart',function(e){
 e.preventDefault();
 })

滑鼠事件物件

常用的鍵盤事件

注：三個事件的執行順序是：keydown -- keypress -- keyup

鍵盤事件物件

注：onkeydown 和 onkeyup不區分字母大小寫，onkeypress區分字母大小寫