JavaScript與DOM的關係

時間 2019-11-18

原文原文鏈接

JavaScript與瀏覽器的工做

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

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

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

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

JavaScript如何與頁面交互？

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

怎麼讓它們交互呢？code

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

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

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

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

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

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

自制DOM

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

作法：

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

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

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

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

HTML頁面以下　　
 1 <!DOCTYPE html>
 2 <html lang="helloworld">
 3 
 4 <head>
 5     <title>DOM</title>
 6     <meta cherset="utf-8">
 7     <script src="dom.js" ></script>
 8 </head>
 9 
10 <body>
11     <h1>My Dom</h1>
12     <div id="entry1">
13         <h2>hello</h2>
14         <p>
15             Today, I am making a dom!!!
16         </p>
17     </div>
18 </body>
19 
20 </html>
獲得的DOM以下圖

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。