javascript中DOM部分基礎知識總結

本文轉載自查看原文 2016-08-28 20:15 2235 DOM/ JavaScript

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.文本節點

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.動態創建元素

方法一、documenet.write();	寫在函數里的話，會沖掉之前的元素，所以一般不用
方法二、innerHTML	innerHTML比較方便，但要注意盡量不要頻繁的拼接字符串字符串具有不可變性，會重復開辟內存空間，一定要注意優化可以考慮用數組代替
方法三、document.creatElement()	如：appendChild() removeChild() insertBefore() replaceChild()

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 javascript中BOM部分基礎知識總結 JavaScript基礎知識總結 Jquery源碼中的Javascript基礎知識（一） JavaScript基礎知識 JavaScript 基礎知識現代JavaScript 教程（JavaScript基礎知識）總結 javaScript知識體系（中）- DOM、BOM、其它內置對象-總結 Java基礎知識總結 PHP基礎知識總結 Java基礎知識總結