瞭解一下JavaScript中的DOM編程

時間 2019-12-08

標籤瞭解一下 javascript dom 編程欄目 JavaScript 简体版

原文原文鏈接

如何在HTML中使用JavaScript

<script>元素

引入方式

內嵌JavaScript代碼

所謂內嵌JavaScript代碼，與內嵌樣式表的用法相似，就是將JavaScript代碼經過<script>元素直接編寫在HTML頁面的內部。
通常不建議使用HTML頁面與JavaScript代碼不分離的樣式。html

外聯JavaScrript文件

所謂外聯JavaScript文件，相似於外聯樣式表的用法，將JavaScript代碼編寫在獨立的JavaScript文件中，再經過HTML頁面的<script>元素引入。
代碼示例java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>如何使用JavaScript</title>
    <!--
        <script></script>元素
        * 做用 - 引入/嵌入腳本語言
        * 屬性
          * type="text/javascript" - (新)表示當前使用的是JavaScript語言
          * language="JavaScript" - (舊)表示當前使用的是JavaScript語言
          * src屬性 - 指定JavaScript文件的路徑
        * 注意 - HTML5容許不指定任何屬性(什麼語言)
     -->
    <script src="01.js" type="text/javascript" language="JavaScript">
        // 瀏覽器窗口加載完畢以後，再執行指定代碼
        window.onload = function(){
            // JavaScript代碼編寫在這
        }
    </script>
</head>
<body>
<button id="btn">按鈕</button>
<!-- 將JavaScript代碼編寫在對應HTML元素的後面 -->
<script>
    // JavaScript語言編寫在HTML頁面中 - 沒有有效分離
    console.log('這是一段JavaScript代碼.');
</script>
<!--
    瀏覽器內置集成了引擎/解釋器
    * HTML/CSS引擎/解釋器
    * JavaScript引擎/解釋器
    建議：
    * <script></script>元素儘可能少出現
    * <script></script>元素編寫在一塊兒
 -->
</body>
</html>

引入位置

在<head>元素內部

<head>
<script>
    window.onload = function() {
        var username = document.getElementById('username');
        console.log(username);
    }
</script>
</head>
<body>
    <input type="text" id="username" value="輸入你的用戶名">
</body>

經過添加window.onload事件解決這個問題。網絡

在<body>元素內部

DOM是什麼

DOM是個縮寫，全稱是DocumentObjectModel，被釋爲文檔對象模型。
1.D表示Document，就是DOM將HTML頁面解析爲一個文檔。同時提供了document對象
2.O表示Object，就是DOM將HTML頁面中每個元素解析爲一個對象。
3.M表示Modle，就是DOM中表示各個對象之間的關係。設計

DOM的標準

因爲DOM的標準規範是由W3C組織起草並定義的，因此W3C對DOM的定義時目前最權威的解釋。
DOM是一個獨立於任何語言和平臺的接口，容許任何語言或腳本動態地訪問和更新HTML文檔的內容、結構和樣式。該HTML頁面能夠進一步處理，而且該處理的結果能夠被合併到所呈現的HTML頁面中。code

DOM的做用

DOM被設計用於解析HTML頁面文檔，方便JavaScript語言經過DOM訪問和操做HTML頁面中的內容。
DOM是由W3C組織定義標準規範，而且由各大瀏覽器廠商支持。嚴格意義上講，DOM並不是屬於JavaScript語言。
咱們以前因此能夠在JavaScript語言中使用DOM，是由於各大瀏覽器將DOM的標準規範內容封裝成了JavaScript語言所支持的形式。
對DOM中的對此昂，咱們只有調用的權限，沒有修改的權限，也說明了這個問題。
瀏覽器加載並運行HTML頁面後，會建立DOM結構。因爲DOM中的內容被封裝了JavaScript語言中的對象，因此咱們可使用JavaScript語言經過DOM結構來訪問和操做哦HTML頁面中的內容。htm

DOM樹結構

DOM能夠訪問和更新HTML頁面中的內容、結構和樣式，式由於DOM將HTML頁面解析爲一個數結構。
樹結構之間的關係無非就是跟選擇器的父級關係很是類似
分爲三個層級關係：
祖先和後代的關係
父級與子級的關係
兄弟之間的關係（必須具備相同父級）對象

示例圖；

節點是什麼

節點（Node）本來是網絡術語，表示網絡中的鏈接點。一個網絡是由一些節點構成的集合。
在DOM樹結構中，節點也是很重要額一個概念。簡單來講，節點做爲DOM樹結構中的鏈接點，最終構成了完整的DOM樹結構。

節點之間的關係

DOM中的M標識Model（模型），也能夠用來表示DOM節點樹結構中節點之間的關係。在DOM節點樹結構中，主要具備如下三層關係：1.父級與子級：若是將HTML頁面中某一個袁旭做爲父級的話，那包含在該元素內的第一層全部元素均可以成爲該元素的子級。2.祖先與後代：若是將HTML頁面中的某一個元素做爲祖先的話，那包含在該元素內的全部元素（除子級以外的）均可以成爲該元素的後代。3.兄弟關係：具備相同父級元素的兩個或幾個元素之間就是兄弟關係。DOM訪問和更新HTML頁面中的內容，主要依靠DOM節點樹結構中的以上三種節點關係完成。