js（八）——DOM之DOM API

DOM

DOM的概念

文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標誌語言的標準編程接口。在網頁上，組織頁面（或文檔）的對象被組織在一個樹形結構中，用來表示文檔中對象的標準模型就稱爲DOM。Document Object Model的歷史可以追溯至1990年代後期微軟與Netscape的“瀏覽器大戰”，雙方爲了在JavaScript與JScript一決生死，於是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，既有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網頁使用非微軟平臺及瀏覽器無法正常顯示。DOM即是當時蘊釀出來的傑作。

DOM又稱爲文檔樹模型

 

• 文檔：一個網頁可以稱爲文檔

• 節點：網頁中的所有內容都是節點（標籤、屬性、文本、註釋等）

• 元素：網頁中的標籤

• 屬性：標籤的屬性

模擬文檔樹結構

 

DOM經常進行的操作

• 獲取元素

• 動態創建元素

• 對元素進行操作(設置其屬性或調用其方法)

• 事件(什麼時機做相應的操作)

獲取頁面元素

爲什麼要獲取頁面元素

例如：我們想要操作頁面上的某部分(顯示/隱藏，動畫)，需要先獲取到該部分對應的元素，才進行後續操作

根據id獲取元素

var div = document.getElementById('main');
console.log(div);
​
// 獲取到的數據類型 HTMLDivElement，對象都是有類型的
// HTMLDivElement <-- HTMLElement <-- Element  <-- Node  <-- EventTarget

注意：由於id名具有唯一性，部分瀏覽器支持直接使用id名訪問元素，但不是標準方式，不推薦使用。

根據標籤名獲取元素

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}

根據name獲取元素*

<div name="hobby"></div>

var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

根據類名獲取元素

<div class="main"></div>

var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

根據選擇器獲取元素

var text = document.querySelector('#text');
console.log(text);
​
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

• 總結

掌握
    getElementById()
    getElementsByTagName()
瞭解
    getElementsByName()
    getElementsByClassName()
    querySelector()
    querySelectorAll()