《JavaScript權威指南》學習筆記 第六天 開始學習DOM了。

昨天學習了window對象的一些方法。window對象主要是針對目前視窗的操作。window對象提供了一些列API來幫助我們了解目前視窗的資訊。例如history對象可以讓我們擷取浏覽曆史。nvaigator對象能夠讓我們或者浏覽器以及系統的一些資訊。location對象能夠讓我們獲得網址欄URL的參數。screen對象能夠讓我們獲得目前使用者的螢幕大小等等，以及建立新頁面的方法open，銷毀頁面的方法close。

說了這麼這麼多，終于到了我們今天的DOM對象。DOM對象是 Document Object Model（文檔對象模型）的縮寫。下面就跟随着我的學習筆記來輕松愉悅的了解下DOM吧。

正文

一、 DOM架構

犀牛書這裡講的很不錯，還給出了配圖。圖檔來自網絡。

這裡一個小方框就是一個節點（想象一下大樹的分叉點，就能了解這個名稱了），也就是Node對象。

還需要上犀牛書中的另外一張節點類型圖。

代表HTML元素的是Element節點，代表文本的Text節點，Document和Element是這裡面比較重要的兩個DOM類。其中Document代表一個HTML或者XML文檔，Element類型代表該文檔中的一個元素。要區分HTML Document、HTML Element 與Document 、Element的差別。其中前者指的是HTML中的文檔與元素。而後者指的是可能是HTML也可能是XML。

說的不那麼繞的話的就是前者範圍小，特制HTML文檔與元素，後者範圍大，可以代表HTML也可以代表xml，累死我了，好繞。

二、Document 與 Element 的操作。

重申一下，Document指的是文檔對象，而Element指的是目前文檔對象中的元素。而所謂的操作精簡為四個字：增删改查。

1. 查

• 選取Element（元素）

  選取元素可以通過四種方式。

• 通過ID選擇
• 通過标簽名字選擇
• 通過制定的name選擇（很少用）
• 通過css類
• css 選擇器

下面這個代碼非常不錯，十分适合做項目的時候直接拿去用。

• 通過id選擇對象

  //通過ids擷取對象

  function getElements(){

  var elements = {};

  for(var i=0;i<arguments.length;i++){

  var id = arguments[i];

  var ele = document.getElementById(id);

  if(ele == null){

  Error("No Elements with id"+id);

  }

  elements[id] = ele;

  }

  return elements;
             

  }

• 通過名字來選取元素.

  這個因為不經常用到就跳過去了：document.getElementsByName();

• 通過标簽名選擇對象。

  document.getElementsByTagsName();
             

當然也有一些快捷的元素選擇方式，如

document.forms.roverliang;
    //這裡的roverliang是一個表單的id。
           

• 通過css類選取元素。

  document.getElementsByClassName()；
             

對于IE8及之前版本會有相容問題。

• 通過css類選取資料

  實用的就這個了吧。用法和css3的選擇器是一樣的。

  document.querySelectorAll();
             

今天夜已經深了，明天繼續看看文檔結構的周遊。也就是nodeList周遊，學學爬爬文檔樹。

轉載于:https://www.cnblogs.com/roverliang/p/5017969.html