課程目標

認識 DOM 樹基本觀念

能夠在 DOM 樹進行「新增」

學會基本的除錯技巧

課程內容

請打開這個網站,用這個網站來練習&寫作業:

https://jsfiddle.net

在學 JavaScript 的時候,你會聽到很多人在講「DOM 樹」這個名詞

什麼是「DOM 樹」?

其實只是,你在網頁上看到的東西,瀏覽器會在背後的 JavaScript 環境,維持一個對應的「DOM 樹」

比如說,當你寫這樣的 html(這邊先省略內容,只留結構)

<html>
  <head>
      <script></script>
  </head>
  <body>
    <div>
      <h1></h1>
      <p></p>
    </div>
  </body>
</html

瀏覽器會在背後創造一個這樣的資料結構

document
└── html
    ├── head
    │   └── script
    └── body
        └── div
            ├── h1
            └── p

很像是樹吧?這就是「DOM 樹」

記得之前用過的 document.getElementById 嗎? 這就是 DOM 最上面的 document 物件

所謂的「DOM 樹」其實就是一個「巢狀物件」。

「巢狀物件」的意思是,物件的屬性,又是另一個物件,然後這物件的屬性,又可以是另一個物件

用 JavaScript 來表示的話,類似這樣(只是概念喔,真實的物件不只是這樣,而是有一堆內建函式與屬性可以用)

var document = {
  name: 'document',
  children: [
    {
      name: 'html',
      children: [
        {
          name: 'head',
          children: [
            {
              name: 'script',
              children: []
            }
          ]
        },
        {
          name: 'body',
          children: [
            {
              name: 'div',
              children: [
                {
                  name: 'h1',
                  children: []
                },
                {
                  name: 'p',
                  children: []
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

在 DOM 中,被包起來的元素,稱為子元素;把別人包起來的元素,稱為父元素。就跟學 html 時的稱呼一樣

瀏覽器會確保用戶介面(User Interface,簡稱 UI)上看到的,跟環境中實際運行的 DOM 長得一模一樣

也就是說,你修改 UI 的內容,DOM 物件就會自動更新;你用 JavaScript 修改 DOM 物件的內容,UI 就會自動更新


來學學怎麼用 JavaScript 操作 DOM 樹吧!

如果原本 html 長這樣

<div id="app"></div>

只要加入這段程式碼

var heading = document.createElement('h1');
heading.textContent = '這是標題';

var para = document.createElement('p');
para.textContent = '這是段落文字';

var app = document.getElementById('app');
app.append(heading);
app.append(para);

利用 document 的內建函數 createElement 來動態創造新的元素

修改元素的屬性 .textContent 來設定文字內容

接著用 .append() 函數來讓元素吃下別的元素,也就是「把另一個元素收為子元素」,就跟收養子女一樣!

最後 html 就會變成這樣

<div id="app">
  <h1>這是標題</h1>
  <p>這是段落文字</p>
</div>

馬上貼到 jsfiddle 試試看,實驗一下、玩玩看!


在寫 html 的時候,出現巢狀結構是很常見的

操作 DOM 時,當然也可以自由創造巢狀結構

var elem1 = document.createElement('div');
elem1.textContent = 'level 1';

var elem2 = document.createElement('div');
elem2.textContent = 'level 2';

var elem3 = document.createElement('div');
elem3.textContent = 'level 3';

var app = document.getElementById('app');

app.append(elem1);
elem1.append(elem2);
elem2.append(elem3);

到 jsfiddle 試試看,就會清楚實際效果囉!


在開發的過程中,基本上會不斷打錯字、寫錯用法。程式跑不出結果,很正常

這種時候,有兩個常用的除錯方法,我們叫「debug 的方法」

第一個方法是 alert,你就把不確定的內容,給 alert 出來看看就對了,到處寫 alert 看一下變數內容,確定內容跟預期一樣,再接著繼續寫

第二個方法是 console.log(),把參數傳進去,接著打開瀏覽器的「開發者工具」,就會看到結果,通常會比 alert 內容更詳細、更方便除錯

除此之外,JavaScript 相關的各種錯誤訊息,都會在「開發者工具」出現。請去研究你所使用的瀏覽器,如何打開這個工具

var x = 123;
var y = 'hello';
var z = document.createElement('div');

console.log(x)
console.log(y)
console.log(z)

請打開瀏覽器的開發者工具,實際看一下上述範例的結果。

課後作業

假設你是一個健忘的人,你決定寫一個「待辦事項管理」應用程式,來幫助自己

這一課,先實作「新增事項」的功能


在上面,做一個文字輸入框,旁邊有一個「新增」按鈕

在下面,做一個展示待辦事項的清單,請使用這樣的結構,id 跟 css 之類的你可以自由決定

<ul>
  <li>
    <span>倒垃圾</span>
  </li>
  <li>
    <span>繳電話費</span>
  </li>
  <li>
    <span>採買本週食材</span>
  </li>
</ul>

點擊「新增」按鈕,會將新事項插入到清單最底部

請稍微替這個清單工具加一點 css 屬性,弄得漂亮一點,這樣的工具才讓人想用


除此之外,請練習一下 console.log 的用法,不然之後遇到錯誤,幾乎沒辦法除錯

請把作業內容中,出現的變數,隨便挑三個,用 console.log 印到開發者工具中,然後用瀏覽器看一下內容


做出以上功能,你就完成這次的課程目標了!


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!

按讚的人:

共有 39 則留言

作業繳交 https://jsfiddle.net/y97oenpv/13/

按讚的人:

交作業~ https://jsfiddle.net/birdie2019/m8doekjc/6/

按讚的人:

很好,順利完成!樣式弄得很漂亮!繼續保持!

其它補充:

其實可以不需要 items 陣列,就能完成任務了

我原本想得太複雜了 從新修改後~ https://jsfiddle.net/birdie2019/L40td21h/102/

交作業 https://jsfiddle.net/k5punhjs/

按讚的人:

交作業魯,在節點操作上總是很糊塗~希望課程上完後能改進 https://jsfiddle.net/ossianwork/Lb9fs4hr/204/

按讚的人:

繳作業~~ https://jsfiddle.net/igorrrrr/omf794er/17/

按讚的人:

交作業 https://jsfiddle.net/81ue_lan/2absqLm6/102/

按讚的人:

https://jsfiddle.net/johnny890118/escz54L7/216/ 交作業

按讚的人:

寫得很好,順利完成!

繳交作業 謝謝 https://jsfiddle.net/kushmuffin/8u3vwjo0/169/

按讚的人:

寫得很好,順利完成!

繳作業~ https://jsfiddle.net/tp655998/vj8s27kd/

按讚的人:

交作業,再麻煩站長了,謝謝! https://js-dolist.glitch.me

按讚的人:

寫得很好,順利完成!

https://jsfiddle.net/tsaii/2cu6n5s9/51/ 交作業~

按讚的人:

寫得很好,順利完成!

https://jsfiddle.net/t8ybr56x/4/ 作業練習~!

按讚的人:

寫得很好,順利完成!

https://jsfiddle.net/dfg312546/vL9bc2r0/88/ 交

按讚的人:

https://jsfiddle.net/ZooeyLai/f1zdcv4s/6/ 交作業~

按讚的人:

https://jsfiddle.net/wimp9487/gy9hrc8w/115/ 交作業!

按讚的人:

https://jsfiddle.net/hwuosfg4/1/

按讚的人:

作業繳交

https://jsfiddle.net/mb2902911/wj8L34qu/3/

按讚的人:

https://jsfiddle.net/B__rain/6d4g2xaf/109/

按讚的人:

交作業 https://jsfiddle.net/CryptoMars/a1ecfhdL/4/

按讚的人:

交作業了~ https://jsfiddle.net/3psnhLmq/1/

按讚的人:

交作業:https://jsfiddle.net/fxq0L4tn/19/

按讚的人:

繳交作業 https://jsfiddle.net/shnny/u7dxqe6m/69/

按讚的人:

2024.02.07 https://jsfiddle.net/v9ja2nuq/
不是忘記連結外部JS,就是設定CSS的時候習慣用class符號,結果沒選到東西,因為一樣的名稱是id🫠

按讚的人:

https://jsfiddle.net/Fanny60714/e8x6pvL5/86/

按讚的人:

作業繳交,謝謝! https://jsfiddle.net/p5z1k3eq/1/

按讚的人:

交作業: https://jsfiddle.net/max002215/51hpw2bv/41/

按讚的人:

https://jsfiddle.net/wenwu/bm3sg6h9/271/ 練習

按讚的人: