Hokou 已發佈 2019-10-21

JavsScript 的 DOM 介紹與操作

https://unsplash.com/photos/GUSPPE-NjH8
https://unsplash.com/photos/GUSPPE-NjH8

適合對象

已經有稍微接觸 HTML 和 JS 的人

DOM

  • DOM = Document Object Model (文件物件模型)
    • 簡單來說 DOM 可以利用 JS 來跟 HTML 文件進行互動
    • 因為瀏覽器載入網頁會建立 DOM 樹,會包含各種節點,每個節點都是物件
    • 程式碼會存取和變更這個 DOM 樹,然後改變就會反應在瀏覽器上(互動)
    • 參考WIKI的圖

DOM 觀念

  • DOM 既不屬於 HTML,也非 JS 的一部分,它是額外定義的一系列規則。

  • DOM 包含兩個領域

    • 建立 HTML 頁面模型:以 DOM 樹的方式建立
    • 存取和變更 HTML 頁面內容:屬於 API(應用程式介面)
  • DOM 樹主要包含4個類型節點

    • 文件節點:document
    • 標籤元件節點:htmlbodydiv 之類
    • 屬性節點:attribute
    • 文字節點:text

如何操作

  • 主要分為 2 步驟:存取元件後,去操作(變更)這些元件
    • 存取元件:選取一個元件 getElementById()querySelector()
    • 操作元件:操作 HTML 內容 innerHTMLtextContent

原始網頁如下

index.html

<body>
    <p id="id1" class="class1">我是id1,class1</p>
    <p id="id2" class="class1">我是id2,class1</p>
    <p id="id3" class="class2">我是id3,class2</p>
    <script src="JS/test.js"></script>
</body>

分別執行以下各段程式碼,確認修改結果
(或是直接開啟瀏覽器的 console 直接執行)

test.js

  • 使用 getElementById() 存取 id 元件,使用 textContent 操作元件

    var el1 = document.getElementById('id1');
    // 可以讓程式碼簡短,比較容易閱讀
    el1.textContent = 'id1被修改了';
    // 網頁顯示:id1被修改了
  • 使用 querySelector() 存取 id 元件,使用 innerHTML 操作元件

    • querySelector() 以 CSS 作為參數,所以使用 id 前面需要有 ##idname,使用 class 前面需要有 ..classname
      var el2 = document.querySelector('#id2');
      el2.innerHTML = 'id2被修改了';
      // 網頁顯示:id2被修改了
  • 使用 querySelector() 存取 class 元件,使用 innerHTML 操作元件

    • innerHTML 除了文字外,還可以改動屬性
      var el3 = document.querySelector('.class2');
      el3.innerHTML = '<b>class2</b>被修改了';
      // 網頁顯示:class2被修改了
      // class2 為粗體字

問題

  • 聽說可以使用 document.write() 直接操作就不用選什麼 id 了?

    • 沒錯,但建議在測試時使用,實際應用請了解正確用法再使用
  • 例如試著在 JS 檔案內與瀏覽器的 console 內分別執行 document.write('清空了!');

    • JS 檔案:原本 index.html 的內容下會增加 清空了!
    • console :網頁全部被清空,僅顯示 清空了!
  • 主要是 document.write() 如果在網頁載入完畢後才執行,會將原本辛苦載入的資料全部清空,因此要了解正確的使用方法才不會出現問題,也因此我們一般會使用 console.log() 之類的來測試

    • JS 不會清空是因為當時還在載入當中
    • console 會清空是因為在打指令前網頁已經載入完畢了
  • 簡單說明,詳細原理也還在學習當中,可以參考:HTML DOM write() Method

參考資料

結語

  • 簡單說明一下 DOM 的概念與如何操作
  • 為什麼不建議使用 document.write()

有問題歡迎詢問,下台一鞠躬

tags: w3hexschool JavaScript DOM

關於筆者

暱稱:Hokou

介紹:Web 初心者,有問題歡迎詢問 剛完成鐵人挑戰 https://ithelp.ithome.com.tw/users/20108856

文章列表 文章列表