[想試試看JavaScript ] HTML DOM

13th鐵人賽

夯特

2021-09-15 16:05:00

1099 瀏覽

我們知道寫程式有個階段就是一個輸入、運算處理、輸出
網頁是由HTML、CSS、Javascript三個語言所組成
HTML 裝著要呈現在網頁上的資料，例如:文字、圖片
CSS 可以修改資料的樣式，例如:修改文字顏色、修改圖片大小、一些網頁動畫
Javascript 可以對網頁做動態地修改，例如:點擊按鈕將商品加入購物車、更客製化的網頁動畫

其中 Javascript 就會有很多運算的部分需要學習。
通常 HTML、CSS 都是寫死的，也就是一開始就要設定好，按到網頁的哪顆按紐，就會發生什麼事情。
而 Javascript 就可以比較有彈性，例如可以根據使用者點了哪個商品，就將那個商品加入購物車。
加入購物車這個功能，其實就是自動偵測我們點了那些商品，並且自動在網頁的購物車頁面畫出我們點了什麼商品。
所以購物車頁面，並不是寫死的，而是透過 Javascript 自動在網頁上畫出來的。

那麼 Javascript 要如何自動修改網頁、在網頁上自己畫東西出來呢?

可以透過 HTML DOM 來修改網頁。

DOM ( Document Object Model)

DOM(Document Object Model，文件物件模型)，就是將 HTML 以樹狀結構來表現的模型，組合起來的樹狀圖，我們稱之為「DOM Tree」

聽起來很複雜，可以把他當作類似物件的東西。因為網頁裡面包含了很多複雜的資料，所以我們只要使用 DOM 裡面提供的方法(也就是函式)，就可以更改網頁的資料。
用起來的感覺就像這樣

window.document.body.innerHTML="Hello World";

這個指令可以將網頁全部的畫面改成 "Hello World"
這個指令就是使用 innerHTML 這個方法將資料"Hello World"放進 document.body 這個地方
感覺就像我們使用方法修改了 document.body 這個物件。

那來一個簡單的練習
可以使用其他編譯器來練習，或者使用JS Bin這個網站
https://jsbin.com/

準備一個 HTML 檔案，使用 button 標籤寫一個按紐叫做 Change

<html>
<head>
<script>
    
</script>
</head>
<body>
 <button>Change</button>
</body>
</html>

接著我希望在我點擊這個按鈕就可以對網頁做一些修改，我希望點下這個按鈕之後就可以啟動函式。

我準備一個 change 函式

<html>
<head>
<script>
    function change(){
        window.document.body.innerHTML="Hello World";
    }
</script>
</head>
<body>
 <button>Change</button>
</body>
</html>

我想修改的地方是 window.document.body
我修改的方法是 innerHTML
我要放的值是 "Hello World"
執行這個程式碼後，網頁畫面就會變成 "Hello World"

那麼我們希望按下按鈕後就啟動函式，我們需要使用「事件處理」
在 button 標籤，建立一個 click 事件
<button onclick="change();">Change</button>

<html>
<head>
<script>
    function change(){
        window.document.body.innerHTML="Hello World";
    }
</script>
</head>
<body>
 <button onclick="change();">Change</button>
</body>
</html>

這樣就設定好了可以再按下按紐時啟動 change() 函式
這樣我們在網頁中按下 button 標籤，也就是 change 按鈕，畫面就會變成 Hello World

另一個範例

<html>
<head>
<script>
    function change(){
        
    }
</script>
</head>
<body>
 <div>
     Today is good day.
 </div>
 <button onclick="change();">Change</button>
</body>
</html>

現在我有一段文字 Today is good day.
我希望按下按鈕後，可以替換裡面的文字，將 good 替換成 bad。

我可以用一個標籤將我想替換的範圍包圍起來
並且給這段標籤加上 id 屬性，給一個值 word
Today is <span id="word">good</span> day.

<html>
<head>
<script>
    function change(){
        
    }
</script>
</head>
<body>
 <div>
     Today is <span id="word">good</span> day.
 </div>
 <button onclick="change();">Change</button>
</body>
</html>

接著我就可以用 HTML DOM 提供的方法，去選取到我想修改的地方
我使用 document.getElementById() 方法，將 id 的值當作參數放進去
就會選取到我想修改的地方
我將我選取到的標籤放進變數裡

var target=window.document.getElementById("word");

接著我就可以使用 innerHTML 修改文字內容，將 good 替換成 bad

target.innerHTML="bad";

整段程式碼看起來就會像這樣

<html>
<head>
<script>
    function change(){
        var target=window.document.getElementById("word"); // 使用 id word 獲取 span 標籤
        target.innerHTML="bad"; // 修改 span 標籤內文
    }
</script>
</head>
<body>
 <div>
     Today is <span id="word">good</span> day.
 </div>
 <button onclick="change();">Change</button>
</body>
</html>