DOM的介紹
一 . DOM 介紹
什麼是DOM javascript
DOM：文檔對象模型。DOM 爲文檔提供告終構化表示，並定義瞭如何經過腳原本訪問文檔結構。目的其實就是爲了能讓js操做html元素而制定的一個規範。css
DOM就是由節點組成的html
解析過程 java
HTML加載完畢，渲染引擎會在內存中把HTML文檔，生成一個DOM樹，getElementById是獲取內中DOM上的元素節點。而後操做的時候修改的是該元素的屬性.node
DOM 數(一切都是節點) ios
上圖可知，在HTML當中，一切都是節點：（很是重要）數組
-
元素節點：HMTL標籤。瀏覽器
-
文本節點：標籤中的文字（好比標籤之間的空格、換行）app
-
屬性節點：：標籤的屬性。ide
整個html文檔就是一個文檔節點。全部的節點都是Object。
DOM能夠作什麼
● 找對象(元素節點)
● 設置元素的屬性值
● 設置元素的樣式
● 動態建立和刪除元素
● 事件的觸發響應: 事件源 , 事件 , 事件的驅動程序
DOM節點的獲取
DOM節點的獲取方式其實就是 獲取事件源的方式.
操做元素節點,必須首先找到該節點,有三種方式獲取DOM節點 :
<div id="box1" class="box"></div>
<script>
//方法一 : 經過 id 獲取單個標籤
var div1 = document.getElementById("box1");
// 方法二 : 經過 標籤名 獲取標籤數組 ,有 s
var arr1 = document.getElementsByTagName("div");
// 方法三 : 經過 類名 獲取標籤數組,因此有 s
var arr2 = document.getElementsByClassName("box");
</script>
由於 方法二 / 方法三 獲取的是標籤數組,那麼要先遍歷以後再使用.
特殊狀況 : 數組中的值只有1個 , 即便如此,這個值也是包在數組裏的,因此這個值獲取方法 :
<div id="box1" class="box"></div> // 獲取數組中的第一個元素 var arr1 = document.getElementsByTagName("div")[0]; //獲取數組中的第一個元素 var arr2 = document.getElementsByClassName("box")[0];
<div id="div1">
<div class="div2">i am div2</div>
<div name="yuan">i am div2</div>
<div id="div3">i am div2</div>
<p>hello p</p>
</div>
<script>
var div1=document.getElementById("div1");
////支持;
// var ele= div1.getElementsByTagName("p");
// alert(ele.length);
////支持
// var ele2=div1.getElementsByClassName("div2");
// alert(ele2.length);
////不支持
// var ele3=div1.getElementById("div3");
// alert(ele3.length);
////不支持
// var ele4=div1.getElementsByName("yuan");
// alert(ele4.length)
</script>
DOM訪問關係的獲取
DOM的節點並非孤獨的,所以能夠經過DOM節點之間的相對關係對他們進行訪問.以下 :
節點的訪問關係,是以屬性的方式存在的.
JS中的 父子兄 訪問關係 :
節點樹種的節點彼此擁有層級的關係 :
父(parent),子(child),兄(sibling) 等來描述這些關係.父節點擁有子節點.同級的子節點被稱爲同胞(兄弟或者姐妹).
獲取父節點
調用者就是節點.一個節點只有一個父節點.調用方法 :
<div id="father">
<div id="laoda"></div>
<div id="laoer"></div>
</div>
<script>
var oLaoda = document.getElementById('father');
var.a = oLoda.parentNode // 獲取父節點
</script>
節點.parentNode // 調用父節點 nextsibling // 下一個節點(包括標籤/空文檔/換行節點) nextElementsibling // 下一個元素節點(標籤) 綜合屬性 : 下一個兄弟節點 = 節點.nextElementSibling || 節點.nextSibling previousSibling // 前一個節點(包括標籤/空文檔/換行節點) previousElementSibling // 前一個元素節點(標籤) 綜合節點 : 前一個兄弟節點 = 節點.previousElementSibling || 節點.previousSibling 節點本身.parentNode.children[index]; //隨意獲得兄弟節點 firstChild // 第一個子元素節點(標籤) firstElementChild //第一個子元素節點(標籤) lastChild / lastElementChild //最後一個子元素節點 children / childNodes // 獲取因此的子節點 ***** 子節點數組 = 父節點.children; //獲取全部節點。用的最多。
注意 : nodeType ==1 表示的是元素節點(標籤) . 元素就是標籤
★★★★★★ DOM 節點的操做
節點的訪問關係都是屬性
節點的操做都是屬性(方法)
建立節點
格式以下 :
新的標籤(元素節點) = document.createElement("標籤名");
//例如 :
var tag = document.creatElement("input");
tag.setAttribute("type","text");
示例 : 好比咱們要建立一個一個 li 標籤,或者是建立一個不存在的 abcd 標籤:
<script type="text/javascript">
var a1 = document.createElement("li");
var a2 = document.createElement("abcd");
console.log(a1);
console.log(a2);
console.log(typeof a1);
console.log(typeof a2);
</script>
結果 :
插入節點
插入節點的方式有兩種,分別有不一樣的含義 :
方式一 :
父節點.appendChild(新的子節點); // 父節點的最後插入一個新的子節點
方式二 :
父節點.insertBrfore(新的子節點,做爲參考的子節點); // 在參考點錢插入一個新的節點 // 若是參考節點爲 null(空),那麼他將在父節點最後插入一個子節點
刪除節點
父節點.removeChild(子節點); // 用父節點刪除子節點,必需要指定刪除那個子節點
若是想刪除本身這個節點 :
node1.parentNode.ramoveChild(node1);
複製節點(克隆節點)
要複製的節點.cloneNode(); 要複製的節點.cloneNode(true);
括號內帶不帶參數,效果是不同的 :
不帶參數 / 帶參數 false : 值複製節點自己,不復制子節點.
帶參數 true : 即複製節點自己,也複製其全部的子節點.
替換節點
父節點.replaceChild(newnode,某個節點)
節點屬性操做
1. 獲取本節點的值 : innerText innerHTML
2. attribute 操做
elementNode(元素節點).setAttribute(name(屬性名),value(新的屬性值)) //設置節點屬性值 elementNode.getAttribute(屬性名) <-------------->elementNode.屬性名(DHTML) elementNode.removeAttribute(「屬性名」); //刪除節點屬性
3 . value 獲取當前選擇的value值
1 . input
2 . select (selectedindex)
3 . textarea
4 . innerHTML 給節點添加 html 代碼 :
該方法不是 w3c 的標準, 可是主流瀏覽器支持
tag.innerHTML = "<p>要顯示的內容</p>";
5 . 關於 class 操做
elementNode.className
elementNode.classList.add
elementNode.classList.remove
6 . 改變 css 樣式 :
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
.style.fontSize=48px
二 . 關於DOM的事件操做
JavaScript的組成
JavaScript 基礎分紅三部分 :
(1) . ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。
(2) . DOM：文檔對象模型，操做網頁上的元素的API。好比讓盒子移動、變色、輪播圖等。
(3) . BOM：瀏覽器對象模型，操做瀏覽器部分功能的API。好比讓瀏覽器自動滾動。
事件
JS是以事件驅動爲核心的一門語言。
事件三要素
事件的三要素：事件源、事件、事件驅動程序。
好比，我用手去按開關，燈亮了。這件事情裏，事件源是：手。事件是：按開關。事件驅動程序是：燈的開和關。
再好比，網頁上彈出一個廣告，我點擊右上角的X，廣告就關閉了。這件事情裏，事件源是：X。事件是：onclick。事件驅動程序是：廣告關閉了。
因而咱們能夠總結出：誰引起的後續事件，誰就是事件源。
總結以下：
-
事件源：引起後續事件的html標籤。
-
事件：js已經定義好了（見下圖）。
-
事件驅動程序：對樣式和html的操做。也就是DOM。
代碼書寫步驟以下：（重要）
-
（1）獲取事件源：document.getElementById(「box」); //相似與ios語言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
-
（2）綁定事件： 事件源box.事件onclick = function(){ 事件驅動程序 };
-
（3）書寫事件驅動程序：關於DOM的操做
代碼舉例：
<body>
<div id="box1"></div>
<script type="text/javascript">
// 一、獲取事件源
var div = document.getElementById("box1");
// 二、綁定事件
div.onclick = function () {
// 三、書寫事件驅動程序
alert("我是彈出的內容");
}
</script>
</body>
事件類型
onclick 當用戶點擊某個對象時調用的事件句柄。
ondblclick 當用戶雙擊某個對象時調用的事件句柄。
onfocus 元素得到焦點。 練習：輸入框
onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
onchange 域的內容被改變。 應用場景：一般用於表單元素,當元素內容被改變時觸發.（三級聯動）
onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress 某個鍵盤按鍵被按下並鬆開。
onkeyup 某個鍵盤按鍵被鬆開。
onload 一張頁面或一幅圖像完成加載。
onmousedown 鼠標按鈕被按下。
onmousemove 鼠標被移動。
onmouseout 鼠標從某元素移開。
onmouseover 鼠標移到某元素之上。
onmouseleave 鼠標從元素離開
onselect 文本被選中。
onsubmit 確認按鈕被點擊。
針對事件的三要素
1. 獲取事件源 的方式(DOM節點的獲取)
var div1 = document.getElementById("box1"); //方式一：經過id獲取單個標籤 var arr1 = document.getElementsByTagName("div1"); //方式二：經過 標籤名 得到 標籤數組，因此有s var arr2 = document.getElementsByClassName("hehe"); //方式三：經過 類名 得到 標籤數組，因此有s
2 . 綁定事件的方式 :
方式一 : 直接綁定匿名函數
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//綁定事件的第一種方式
div1.onclick = function () {
alert("我是彈出的內容");
}
</script>
方式二 : 先單獨定義函數,在綁定
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//綁定事件的第二種方式
div1.onclick = fn; //注意，這裏是fn，不是fn()。fn()指的是返回值。
//單獨定義函數
function fn() {
alert("我是彈出的內容");
}
</script>
注意上方的註釋.綁定的時候,寫 fn 而不是寫 fn() , fn 表明的是整個函數, fn()表明的是返回值
方式 三 : 行內綁定
<!--行內綁定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
function fn() {
alert("我是彈出的內容");
}
</script>
注意第一行代碼，綁定時，是寫的"fn()"，不是寫的"fn"。由於綁定的這段代碼不是寫在js代碼裏的，而是被識別成了字符串。
3 . 事件驅動程序 :
<style> #box { width: 100px; height: 100px; background-color: pink; cursor: pointer; //把鼠標變成小手的模樣 } </style> </head> <body> <div id="box" ></div> <script type="text/javascript"> var oDiv = document.getElementById("box"); //點擊鼠標時，本來粉色的div變大了，背景變紅了 oDiv.onclick = function () { oDiv.style.width = "200px"; //屬性值要寫引號 oDiv.style.height = "200px"; oDiv.style.backgroundColor = "red"; //屬性名是backgroundColor，不是background-Color } </script>
上方代碼的注意事項：
- 在js裏寫屬性值時，要用引號
- 在js裏寫屬性名時，是
backgroundColor，不是CSS裏面的background-Color。記得全部的像css屬性的text-*，line-*、backgroun-*等在js中都寫成駝峯
onload 事件
當頁面加載（文本和圖片）完畢的時候，觸發onload事件。
舉例：
<script type="text/javascript"> window.onload = function () { console.log("小馬哥"); //等頁面加載完畢時，打印字符串 } </script>
有一點咱們要知道：js的加載是和html同步加載的。所以，若是使用元素在定義元素以前，容易報錯。這個時候，onload事件就能派上用場了，咱們能夠把使用元素的代碼放在onload裏，就能保證這段代碼是最後執行。
建議是：整個頁面上全部元素加載完畢在執行js內容。因此，window.onload能夠預防使用標籤在定義標籤以前。
示例 : 當鼠標懸停在img上時，更換爲另一張圖片；鼠標離開時，還原爲原本的圖片。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//window.onload頁面加載完畢之後再執行此代碼
window.onload = function () {
//需求：鼠標放到img上，更換爲另外一張圖片，也就是修改路徑（src的值）。
//步驟：
//1.獲取事件源
//2.綁定事件
//3.書寫事件驅動程序
//1.獲取事件源
var img = document.getElementById("box");
//2.綁定事件(懸停事件：鼠標進入到事件源中當即出發事件)
img.onmouseover = function () {
//3.書寫事件驅動程序(修改src)
img.src = "image/jd2.png";
// this.src = "image/jd2.png";
}
//1.獲取事件源
var img = document.getElementById("box");
//2.綁定事件(懸停事件：鼠標進入到事件源中當即出發事件)
img.onmouseout = function () {
//3.書寫事件驅動程序(修改src)
img.src = "image/jd1.png";
}
}
</script>
</head>
<body>
<img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
</body>
</html>