1.DOM介紹 1.1 DOM概念 文檔對象模型(Document Object Model),它定義了訪問和處理HTML文檔的標準方法。現在我們主要接觸到的是HTML DOM。 HTML文檔中的每個成分都是一個節點。HTML文檔中的所有節點組成了一個文檔樹(節點樹)。HTML文檔中的每個元素、屬性 ...
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的區別,放在代碼塊里解釋
//事件名稱的區別 // 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.文本節點 |
節點類型nodeType | 節點名稱nodeName | 節點值nodeValue |
克隆元素(標簽)節點 | cloneNode() | 參數為True,深度克隆,克隆當前對象的一切子節點;為false,淺克隆,只會克隆標簽,不包含文本信息 |
移除節點 | removeChild | |
追加節點 | appendChild | 父節點.appendChild(子節點) |
插入節點 | insertBefore | |
獲得屬性節點 | getAttributeNode | |
追加節點 | appendChild | 父節點.appendChild(子節點) |
方法一、documenet.write(); | 寫在函數里的話,會衝掉之前的元素,所以一般不用 | |
方法二、innerHTML | innerHTML比較方便,但要註意儘量不要頻繁的拼接字元串 字元串具有不可變性,會重覆開闢記憶體空間,一定要註意優化 可以考慮用數組代替 | |
方法三、document.creatElement() | 如:appendChild() removeChild() insertBefore() replaceChild() |