簡單聊聊DOM

時間 2019-12-05

標籤簡單聊聊 dom 欄目 HTML 简体版

原文原文鏈接

討論在HTML如何去使用JavaScript

HTML頁面內容：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--type：該屬性定義規定的文本類型，能夠爲css類型也能夠爲JavaScript類型等其餘類型
         language：和type屬性相似，這個屬性定義腳本使用的語言，該屬性不是標準規範
        src：定義引用外部腳本的URI
    -->
    <script type='text/javascript' src='01.js'></script>
</body>
</html>

內嵌javascript代碼：與內嵌樣式表的用法同樣，就是將javascript代碼經過<script>元素直接編寫在HTML頁面的內部，可是這種方式致使HTML頁面與javascript代碼不分離，不推薦使用html

HTML頁面內容：java

<button>這是一個按鈕</button>
<script>
    var btn=document.getElementsByTagName('button');
    console.log(btn);
</script>

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

HTML頁面內容：瀏覽器

<script src='js/index.js'></script>

JavaScript文件內容：網絡

var username=document.getElementById('username');
console.log(username);

在<head>元素內部:<script>元素默認是被定義在<head>元素的內部，可是，這種方式致使瀏覽器加載HTML頁面時先加載JavaScript代碼再加載HTML元素，若是JavaScript代碼中包含獲取或更新HTML元素的邏輯，會致使操做失敗
經過添加window.onload事件以解決這個問題：app

HTML頁面內容：dom

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

在<body>元素內部：<script>元素也能夠被定義在<body>元素中，但爲了保證瀏覽器窗口先加載HTML元素再加載JavaScript代碼邏輯，通常<script>元素定義在<body>元素中的最後設計

HTML頁面內容：

<button>這是一個按鈕</button>
<script>
    var btn=document.getElementsByTagName('button');
    console.log(btn);
</script>

DOM

D:document,就是dom將html頁面解析爲一個文檔，同時提供了document對象
O:object，就是dom將html頁面中每一個元素解析爲一個對象
M:model，就是dom中表示各個對象之間的關係

Dom的做用

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

節點

節點本來是網絡術語，表示網絡中的鏈接點，一個網絡是由一些節點構成的集合，在dom樹結構中，節點也是很重要的一個概念，簡單來講，節點做爲dom樹結構中的鏈接點，最終構成了完整的dom樹結構
經過節點概念，能夠將本來的dom樹結構改爲dom節點樹結構進行表示
dom中的m表示model，也能夠用來表示dom節點樹結構中節點之間的關係
在dom節點樹結構中，主要具備如下三層關係：
父級與子級關係
祖先與後代關係
兄弟關係