JavaScript 基礎第七天（DOM的開始）

1、引言

　　JavaScript的內容分爲三個部分，這三個部分分別是ECMAScript、DOM、BOM三個部分組成。所謂ECMAScript就是JavaScript和核心基礎語法，DOM是文檔對象模型，最後剩下的BOM則是瀏覽器對象模型。這三個部分相輔相成組成了如今的JavaScript。

 

2、導入

　　前面幾天咱們學習就是有關有ECMAScript即基礎語法部分，從今天開始咱們將開始接觸文檔對象模型，作好準備。let's Go！

 

3、重點內容

　　① 什麼是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;
    }

 

　　　　　　　須要注意的是在這裏還有一種方式是給時間設置監聽者，但這裏咱們先不作介紹。

4、總結

　　　　今天的內容就介紹這麼多，主要的理解方面仍是放在DOM的認識以及使用上。