1.DOM介紹
1.1 DOM概念
文檔對象模型（Document Object Model），它定義了訪問和處理HTML文檔的標準方法。如今咱們主要接觸到的是HTML DOM。
HTML文檔中的每一個成分都是一個節點。HTML文檔中的全部節點組成了一個文檔樹（節點樹）。HTML文檔中的每一個元素、屬性、文本等都表明着樹中的一個節點。樹起始於文檔節點，並由此繼續延伸枝條，直處處於這棵樹最低級別的全部文本節點爲止。學習DOM，就是學習一些操做頁面元素的API（方法）。下圖表示一個文檔樹。
1.2 DOM的組成
DOM是由節點組成的。節點又分爲標籤節點、屬性節點、文本節點。
1.3 DOM的用途
經過JavaScript，咱們能夠重構整個HTML頁面文檔。能夠添加、移除、改變或重排頁面上的項目。要改變頁面的某個東西（即動態改變），JavaScript就須要得到對HTML文檔中全部元素進行訪問的入口。這個入口，連同對HTML元素進行添加、移動、改變或移除的方法和屬性，都是經過文檔對象模型（DOM）來得到的。
2.獲取頁面元素的三種方式
document.getELementById(idStr);
document.getElementsByTagName(tagStr);
document.getElementsByClassName(classStr); //不經常使用
3.事件
3.1 什麼是事件
事件就是文檔或瀏覽器中發生的某些特定的
交互瞬間。可分爲
觸發（發生的什麼事，作的什麼操做）和
響應（獲得或達到的什麼效果）兩個階段。
3.2 事件的三要素
a，事件源 //要註冊事件的對象
b，事件名稱 //要註冊哪一種事件，click、mouseover等等
c，事件處理程序 // 要執行的函數
3.3 註冊事件的三種方式
a，行內式
1 <div id="box" style="width: 100px; height: 100px; "></div> 2 <input type="button" value="點擊切換顏色" onclick="toggle();"/> 3 <script> 4 var box = document.getElementById("box"); 5 function toggle() { 6 box.style.backgroundColor = "#f00"; 7 } 8 </script>
b，內嵌式--on
1 <div id="box" style="width: 100px; height: 100px; " id="box"></div> 2 <input type="button" value="點擊切換顏色" id="btn"/> 3 <script> 4 var box = document.getElementById("box"); 5 var btn = document.getElementById("btn"); 6 btn.onclick = function () { 7 box.style.backgroundColor = "#f00"; 8 } 9 </script>
c，內嵌式--addEventListener
addEventListener(type, listener, useCapture);
//type，事件名稱（注意不帶on）
//listener，時間的監聽者--事件處理函數
//useCapture，是否捕獲，true（捕獲） false（冒泡）
1 <input type="button" value="button" id="btn"/> 2 <script> 3 var btn = document.getElementById("btn"); 4 btn.addEventListener("click", function () { 5 alert("我說：哈哈哈"); 6 },false); 7 btn.addEventListener("click", function () { 8 alert("她說：23333"); 9 }, false); 10 //兩次事件都會執行，這是區別於on方式的 11 </script>
還有一個是attachEvent，區別主要分爲事件名稱的區別和this的區別，放在代碼塊裏解釋
|
1
2
3
4
5
6
|
//事件名稱的區別
// addEventLisener中第一個參數type是click、load，不帶on
// attachEvent中一個參數type是onclick、onload
//this的區別
// addEventLisener：事件處理程序會在當前對象的做用域運行，所以事件處理程序的this就是當前對象
// attachEvent：事件處理程序是在全局做用域下運行,所以this就是window
|
補充1：註冊事件的性能問題
可能會屢次調用匿名函數，佔內存。不妨把函數寫在事件以外
補充2：移除事件的兩種方式
1，如：element.onlick = null;
2，如：removeEventListener （IE9之前detachEvent， 若是註冊的時候使用的是匿名函數，則沒法移除）
3.4 經常使用的一些事件
onclick, ondblclick, onchang, onfocus, onnblur, onmouseover, onmouseout, onkeyup, onkeydown, onload, onunload, onsubmit等等
3.5 事件中的this
事件中的this始終指代當前觸發事件的對象
4.獲取標籤內容和設置標籤內容
第一種方式，innerText
第二種方式，innerHTML
二者的區別：1，二者均可以得到頁面元素之間的內容
2，innetText只會獲取文本信息，而innerHTML會將標籤之間的標籤獲取到，並會原樣輸出
3，innerText在火狐早期版本不支持，早期火狐只支持textContent，新版本都已兼容
4，innerText設置帶有標籤內容的時候，會正常輸出；innerHTML會將裏面的標籤渲染成HTML標籤顯示（轉義）
爲此封裝兼容性函數，進行能力檢測
1 //得到頁面標籤之間文本內容的兼容性寫法 2 function getInnerText(obj) { 3 if (obj.innerText) { 4 retrun obj.innerText; 5 } else { 6 return obj.textContent; 7 } 8 } 9 //設置頁面標籤之間的文本內容的兼容性寫法 10 function setInnerText(obj, value) { 11 if(obj.innerText) { 12 obj.innerText = value; 13 } else { 14 obj.textContent = value; 15 } 16 }
5.動態操做頁面元素的屬性及修改樣式
5.1 給元素添加類名以改變樣式
5.2 用JS改變標籤的單屬性值
<input type="button" value="按鈕1" id="btn" aa="本身設置的類名"> <script> var btn = document.getElementById("btn"); btn.value = "按鈕2"; //設置屬性，改變了原來的屬性值 btn.bb = "本身設置的屬性"; //其實是添加不上去的 </script>
5.3 修改元素背景色
5.4 動態改變元素的寬高
5.5 改變元素的位置（定位）
5.6 改變元素的層級
5.7 改變元素的透明度
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 div { 6 width: 200px; 7 height: 200px; 8 background-color: rebeccapurple; 9 position: absolute; 10 } 11 </style> 12 </head> 13 <body> 14 <input type="button" id="btn" value="button"> 15 <div id="box"></div> 16 <script> 17 var btn = document.getElementById("btn"); 18 var box = document.getElementById("box"); 19 btn.onclick = function () { 20 box.style.backgroundColor = "blue"; //5.3 21 box.style.width = " 400px"; //5.4 22 box.style.top = "200px"; //5.5 23 box.style.zIndex = "1"; //5.6 24 box.style.opacity = .5; //5.7 25 }; 26 </script> 27 </body>
6.自定義屬性
getAttribute 獲取自定義屬性
setAttribute 設置自定義屬性
removeAttribute 移除自定義屬性
下面是一段tab切換的css樣式和js代碼
1 <style> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 ul { 7 list-style: none; 8 } 9 .box { 10 width: 400px; 11 height: 300px; 12 border: 1px solid #ccc; 13 margin: 100px auto; 14 } 15 .hd { 16 height: 45px; 17 } 18 .hd span { 19 display: inline-block; /*將行內元素轉換成行內塊元素，寬高才起做用*/ 20 width: 90px; 21 background-color: pink; 22 line-height: 45px; 23 text-align: center; 24 cursor: pointer; 25 } 26 .hd span.current { 27 background-color: purple; /*紫色*/ 28 } 29 .bd li { 30 height: 255px; 31 background-color: purple; 32 display: none; /*設置隱藏*/ 33 } 34 .bd li.current { 35 display: block; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="box" id="box"> 41 <div class="hd"> 42 <span class="current">體育</span> 43 <span>娛樂</span> 44 <span>新聞</span> 45 <span>綜合</span> 46 </div> 47 <div class="bd"> 48 <ul> 49 <li class="current">我是體育模塊</li> 50 <li>個人娛樂模塊</li> 51 <li>我是新聞模塊</li> 52 <li>我是綜合模塊</li> 53 </ul> 54 </div> 55 </div> 56 <script> 57 var box = document.getElementById("box"); 58 var spans = box.getElementsByTagName("span"); 59 var lis = box.getElementsByTagName("li"); 60 for (var i = 0; i < spans.length; i++) { 61 spans[i].setAttribute("index", i);//設置自定義屬性index 62 spans[i].onclick = function () { 63 for (var j = 0; j < spans.length; j++) { 64 spans[j].removeAttribute("class"); 65 lis[j].removeAttribute("class"); 66 } 67 this.setAttribute("class", "current"); 68 //var index = this.getAttribute("index");//設置一個變量來得到自定義屬性 69 //lis[index].setAttribute("class", "current"); 70 lis[this.getAttribute("index")].setAttribute("class", "current"); 71 }; 72 } 73 </script>
7.節點
7.1 節點的類型
|
a.標籤節點
|
b.屬性節點
|
c.文本節點
|
7.2 節點的組成
|
節點類型nodeType
|
節點名稱nodeName
|
節點值nodeValue
|
7.3 節點的層次
父節點--parentNode
子節點--childNodes
標準的DOM屬性，獲取子標籤之外，還會獲取文本節點，IE8中會忽略空白節點
--children
不是標準的DOM屬性，可是全部的瀏覽器都支持，只會返回元素節點
兄弟節點--nextSibling
下一個兄弟節點，多是非元素節點，IE8中是元素節點
--nextElementSiblings
火狐，谷歌支持，IE8及以前的瀏覽器不支持
--previousSibling
--previousElementSiblings
第一個和最後一個節點--firstChild
--firstElementChild
--lastChild
--lastElementChild
注：選擇節點時，因爲瀏覽器不一樣，存在不少兼容性問題，咱們在選擇以前須要進行能力檢測。
7.4 節點操做
|
克隆元素（標籤）節點
|
cloneNode()
|
參數爲True，深度克隆，克隆當前對象的一切子節點；爲false，淺克隆，只會克隆標籤，不包含文本信息
|
|
移除節點
|
removeChild
|
|
|
追加節點
|
appendChild
|
父節點.appendChild(子節點)
|
|
插入節點
|
insertBefore
|
|
|
得到屬性節點
|
getAttributeNode
|
|
|
追加節點
|
appendChild
|
父節點.appendChild(子節點)
|
8.動態建立元素
| 方法1、documenet.write(); |
寫在函數裏的話，會沖掉以前的元素，因此通常不用
|
|
| 方法2、innerHTML |
innerHTML比較方便，但要注意儘可能不要頻繁的拼接字符串
字符串具備不可變性，會重複開闢內存空間，必定要注意優化
能夠考慮用數組代替
|
|
| 方法3、document.creatElement() |
如：appendChild()
removeChild()
insertBefore()
replaceChild()
|