JavaScript和HTML DOM的區別與聯繫

javascriptphp

JavaScript 是因特網上最流行的瀏覽器腳本語言。很容易使用！你必定會喜歡它的！html

JavaScript 被數百萬計的網頁用來改進設計、驗證表單、檢測瀏覽器、建立cookies，以及更多的應用。java

HTML DOMnode

HTML DOM 是 W3C 標準（是 HTML 文檔對象模型的英文縮寫，Document Object Model for HTML）。編程

HTML DOM 定義了用於 HTML 的一系列標準的對象，以及訪問和處理 HTML 文檔的標準方法。數組

經過 DOM，能夠訪問全部的 HTML 元素，連同它們所包含的文本和屬性。能夠對其中的內容進行修改和刪除，同時也能夠建立新的元素。瀏覽器

HTML DOM 獨立於平臺和編程語言。它可被任何編程語言諸如 Java、JavaScript 和 VBScript 使用。服務器

聯繫：cookie

經過 JavaScript，您能夠重構整個 HTML 文檔。您能夠添加、移除、改變或重排頁面上的項目。

要改變頁面的某個東西，JavaScript 就須要得到對 HTML 文檔中全部元素進行訪問的入口。這個入口，連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性，都是經過文檔對象模型來得到的（DOM）。
Javascript主要是利用HTML DOM去得到、改變、建立HTML元素，從而達到美化頁面、操做頁面元素的目標。所以，在Javascript中最多見的就是各類各樣的HTML DOM元素以及它們各自的屬性。除了這些DOM元素外，Javascript有本身的對象，例如數組。

簡單說，能夠認爲Javascript主要是操縱HTML DOM。二者是不同的。
Javascript是語言，DOM是能夠在各類語言中（不只js，php也有的）動態修改文檔的模型。

下面單獨拉出JavaScript與DOM的關係給你們詳解

JavaScript與瀏覽器的工做

1.瀏覽器獲取並加載你的頁面，從上至下解析它的內容。

　遇到JavaScript時，瀏覽器會解析代碼，檢查它的正確性，而後執行代碼。

　瀏覽器還會創建一個HTML頁面的內部模型（DOM）。

2.JavaScript繼續執行，使用DOM檢查頁面、完成修改、從頁面接受事件，或者要求瀏覽器從Web服務器獲取其它數據。

JavaScript如何與頁面交互？

JavaScript是代碼，HTML是標記，徹底不一樣的東西

怎麼讓它們交互呢？

答案是使用文檔對象模型（Docunment Object Model，簡稱DOM）。

DOM的妙處在於：它可以在全部瀏覽器上提供一種一致的方式，經過代碼訪問HTML的結構和內容。

　　一、在瀏覽器加載一個頁面時，瀏覽器會解析HTML，並建立文檔的一個內部模型，其中包含HTML標記的全部元素。

　　二、JavaScript能夠與DOM交互（JavaScript使用DOM建立或刪除元素等等）

　　　　document是一個反映HTML的對象，經過調用document的方法改變DOM的狀態，也就是改變HTML頁面

　　三、JavaScript修改了DOM時，瀏覽器會隨着動態更新頁面。

自制DOM

材料：格式正確的HTML5頁面，WEB瀏覽器

作法：

　一、在最上面建立一個document節點

　二、取HTML頁面的最頂層元素，在這裏就是<HTML>元素，把它做爲document的子節點加到DOM中

　三、對於當前元素中嵌套的每個元素，將該元素做爲當前元素的子節點增長到DOM

　四、對於剛增長的元素，執行第三步，重複工做，直處處理完全部元素

HTML頁面以下　　

 
          <!DOCTYPE html>  
         
          <html lang= 
          "helloworld" 
          >  
         
          <head>  
         
          <title>DOM</title>  
         
          <meta cherset= 
          "utf-" 
          >  
         
          <script src= 
          "dom.js"  
          ></script>  
         
          </head>  
         
          <body>  
         
          <h1>My Dom</h1>  
         
          <div id= 
          "entry" 
          >  
         
          <h1>hello</h1>  
         
          <p>  
         
          Today, I am making a dom!!!  
         
          </p>  
         
          </div>  
         
          </body>  
         
          </html>

獲得的DOM以下圖

____________________________________________________________________________________________________________________

文檔對象模型（Document Object Model，DOM）是一種用於HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法，能夠改變文檔的內容和呈現方式。咱們最爲關心的是，DOM把網頁和腳本以及其餘的編程語言聯繫了起來。

下面是來自w3c的解釋：

DOM 是 W3C（萬維網聯盟）的標準。

DOM 定義了訪問 HTML 和 XML 文檔的標準：

「W3C 文檔對象模型（DOM）是中立於平臺和語言的接口，它容許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。」

W3C DOM 標準被分爲 3 個不一樣的部分：

核心 DOM - 針對任何結構化文檔的標準模型
XML DOM - 針對 XML 文檔的標準模型
HTML DOM - 針對 HTML 文檔的標準模型

編者注：DOM 是 Document Object Model（文檔對象模型）的縮寫。

什麼是 XML DOM？

XML DOM 定義了全部 XML 元素的對象和屬性，以及訪問它們的方法。

什麼是 HTML DOM？

HTML DOM 是：

HTML 的標準對象模型
HTML 的標準編程接口
W3C 標準

HTML DOM 定義了全部 HTML 元素的對象和屬性，以及訪問它們的方法。

換言之，HTML DOM 是關於如何獲取、修改、添加或刪除 HTML 元素的標準。

下面說的dom實際上指的是html dom。

腳本開發人員能夠經過文檔對象的屬性、方法和事件來掌控、操縱和建立動態的網頁元素。每個網頁元素（一個HTML標籤）都對應着一個對象（object，所謂「對象」，用白話說就是「東西」。object這個詞在臺灣一般翻譯成「物件」）。網頁上的標籤是一層層嵌套的，最外面的一層是<HTML>，文檔對象模型也這樣一層層嵌套着，可是一般被理解成一棵樹的形狀。樹根是window或document對象，至關於最外層的標籤的外圍，也就是整個文檔。樹根之下（這棵樹的圖一般是倒着畫，就好像遺傳譜系或者家譜那樣。樹根就是惟一的共同祖先）是子一級的對象，子對象也有它本身的子對象，除了根對象之外，全部的對象都有本身的父對象，同一對象的子對象之間就是兄弟的關係。

在這種由「父子兄弟」組成的「單性繁殖家族圖譜樹」框架結構中，每一個網頁元素均可以被確切地定位。文檔對象模型把整張網頁組織成這樣的一個樹狀的結構，樹結構中的每個元素都被視爲一個節點（node）。包括JavaScript在內的各類編程語言均可以經過文檔對象模型來訪問和改變網頁的各類細節。

萬維網協會（World Wide Web Consortium，W3C）已經給文檔對象模型制定了一系列標準，而且正在制定更多的相關標準。當代的瀏覽器除支持其中的一部分標準以外，還支持某些早在W3C標準制定之前就流行了的歷史既成的編程接口。也就是說如今瀏覽器使用的技術歷史由來紛繁複雜，有些人們廣泛使用的DOM技術並沒有標準可依。

咱們將深刻全部通用DOM的細節（包括IE瀏覽器中「不同凡響」的某些技術），以全面掌握面向實踐的技術。

DOM和JavaScript

咱們用JavaScript對網頁進行的全部操做都是經過DOM進行的。DOM屬於瀏覽器，而不是JavaScript語言規範裏的規定的核心內容，因此若是你下載一個JavaScript語言的參考幫助文檔來查的話，就連婦孺皆知的document.write方法也找不到。

下面這段代碼的做用是用一個提示框逐個顯示網頁中全部連接的網址，代碼中被標爲紅色的部分就是DOM。
var anchorTags = document.getElementsByTagName("a");
for (var i = 0; i < anchorTags.length ; i++)
{
alert("Href of this a element is : " + anchorTags[i].href + "/n");
}

這樣一來哪些是核心JavaScript，哪些是DOM，各自起什麼做用，就能夠一目瞭然了。

var anchorTags =
建立了一個名爲 anchorTags 的 JavaScript 變量。

document.getElementsByTagName("a")
Document接口是 DOM1核心（DOM1 Core）規範中定義的第一個接口，而 document 是實現了Document接口的一個宿主對象。document掌控着網頁裏的全部東西。
DOM1核心爲Document 接口定義了 getElementsByTagName() 方法。這個方法返回一個節點列表（NodeList），也就是一種DOM特有的包含節點的數組，包含了全部符合匹配參數條件的標籤，按照在文檔中出現的順序排列。因而anchorTags變量如今就成了一個節點列表。

;
分號是JavaScript裏的語句結束符號。

for (var i = 0; i <
這是編程語言裏典型的「for循環」。聲明瞭循環變量i，逐個處理anchorTags節點列表裏的每個節點。這也是JavaScript的東西。

anchorTags.length
DOM1 核心定義了NodeList接口的 length 屬性。這個屬性返回一個整數，就是節點列表裏包含的節點數目。提及來JavaScript 的數組也有一個 length屬性。

; i++) {
典型的JavaScript變量增1運算。

alert(
alert() 是一個DOM方法，彈出一個提示框，顯示傳遞給該方法的參數（字符串）。話說這個東西是通稱 0級DOM（DOM level 0）或DOM0的一些歷史既成的編程接口當中的一員。DOM0 是一套「被某些瀏覽器所支持」的編程接口（事實上，市場上不存在不支持DOM0的瀏覽器，只有在某些軟件愛好者的收藏品中才能見獲得），不屬於任何DOM標準規範。

"Href of this a element is : " +
一個字符串字面量和一個字符串連接符。JavaScript的東西。

anchorTags[i].href
href 是 DOM1 HTML 規範中定義的 HTMLAnchorElement 接口的屬性，返回連接（<a>）元素的href屬性的值。

在此咱們用了像anchorTags[i]這樣的用法，這和JavaScript裏訪問第i個數組項的語法是同樣的。語言中性（language-neutral，與具體語言無關）的所謂「DOM方式」訪問某個節點列表中的一個項目的辦法是使用在NodeList接口中定義的item() 方法：anchorTags.item(1).href。可是大多數JavaScript實現程序都容許你使用這種簡單的相似於數組的語法，而這也是大多數人實際在用的方式。

+ "/n");
又一個字符串鏈接。在字符串的末尾加入一個回車符。

}