一、引言 JavaScript的內容分為三個部分，這三個部分分別是ECMAScript、DOM、BOM三個部分組成。所謂ECMAScript就是JavaScript和核心基礎語法，DOM是文檔對象模型，最後剩下的BOM則是瀏覽器對象模型。這三個部分相輔相成組成了現在的JavaScript。 二、導入 ...
一、引言
JavaScript的內容分為三個部分，這三個部分分別是ECMAScript、DOM、BOM三個部分組成。所謂ECMAScript就是JavaScript和核心基礎語法，DOM是文檔對象模型，最後剩下的BOM則是瀏覽器對象模型。這三個部分相輔相成組成了現在的JavaScript。
二、導入
前面幾天我們學習就是有關有ECMAScript即基礎語法部分，從今天開始我們將開始接觸文檔對象模型，做好準備。let's Go！
三、重點內容
① 什麼是DOM：
DOM= Document Object Model，文檔模型對象，DOM可以以一種獨立於平臺和語言的方式訪問和修改一個文檔的內容和結構。換句話說，這是表示和處理一個HTML或XML文檔的常用方法。（我承認這是百度的）。我的理解是我們為了方便的去控制頁面上的元素先把頁面封裝成一個對象，因為和文檔有關所以叫做文檔對象。如果這樣還不好理解你可暫時把它理解成就是一個有很多枝葉的大樹就好了。我們學習DOM就是為了學習一些操作頁面元素的API。
② 節點：
既然我們把它理解成一棵樹那麼樹上就會有很多的枝葉，那麼這些枝葉又是什麼呢？這些枝葉我們稱作為節點，因為數量很多所以又包括元素、屬性、文本三部分。可以說在文檔上的一切基本都是節點。
③ 頁面元素的獲取：
我們想要操作頁面元素的API那首先是不是應該獲取呢？那獲取的方式又有什麼呢？
a.getElementById:
<input type="text" value="預設的文字" id="txt"/>
<input type="button" value="按鈕" id="btn"/>
<script>
// 第一種獲取頁面元素的方式 getElementById
var txt = document.getElementById("txt");
console.log(txt);
console.log(txt.value);
txt.value="這是修改後的文字";
var btn = document.getElementById("btn");
console.log(btn);
console.log(btn.value);
b.getElementByTagName:
<input type="text" value="123"/>
<input type="text" value="456"/>
<input type="text" value="789"/>
<input type="text" value="abc"/>
<input type="text" value="mmmm"/>
<input type="text" value="kkk"/>
<script>
// 獲得頁面元素的第二種方式 通過標簽名
var inputs = document.getElementsByTagName("input");
console.log(inputs);
for(var i=0;i<inputs.length;i++){
// console.log(inputs[i].value);
inputs[i].value = "aaaaa";
}
</script>
在這裡需要註意的是通過getElementByTagName獲得的內容是一個數組，即使只有一個元素也會是用數組表示。
c.getElementByClassName:
<div class="dv"></div>
<p class="dv"></p>
<div class="dv"></div>
<p class="dv"></p>
<span class="dv"></span>
<script>
// 第三種獲取頁面元素的方式
var eles = document.getElementsByClassName("dv"); //獲得的也是一組數據
console.log(eles);
這個方式不推薦使用因為在相容上會有一定的問題。
④ 事件：
我們在獲取了頁面的元素後就需要對元素進行一定的操作了，我們通過給指定元素設置指定方式的方法來進行一定的操作。那麼什麼事件呢？事件就是文檔或者瀏覽器視窗發生的一些特定的交互瞬間。 它分為兩個部分觸發和響應。
⑤ 事件的三要素：
a.事件源
b.事件名稱
c.事件處理程式
⑥ 註冊事件：
在指定方法前我們就需要註冊事件，註冊事件又分為以下的三種：
a.行內式：直接在對應的標簽上註冊事件。
<a href="images/2.jpg" id="a2" onclick="turn2();return false;"><img src="images/2-small.jpg" alt=""/></a>
b.內嵌式：利用匿名函數的方式
<a href="images/1.jpg" id="a1" ><img src="images/1-small.jpg" alt=""/></a>
<a href="images/2.jpg" id="a2" ><img src="images/2-small.jpg" alt=""/></a>
<br/>
<img src="images/placeholder.png" alt="" width="600" id="img"/>
<script>
var img = document.getElementById("img");
var a1 = document.getElementById("a1");
var a2 = document.getElementById("a2");
a1.onclick = function(){
img.src = this.href;
return false;
}
a2.onclick = function(){
img.src = this.href;
return false;
}
需要註意的是在這裡還有一種方式是給時間設置監聽者，但這裡我們先不做介紹。
四、總結
今天的內容就介紹這麼多，主要的理解方面還是放在DOM的認識以及使用上。
