DOM (U 'ᴗ' U)✧　看到DOM 都會想念 兜姆！
早安 我是SONYKO ♡

第 12 天 來介紹什麼是兜姆 。

☞　Let's 　DOM ！！

୨୧　Document Object Model ( 簡稱：DOM )

網路上搜尋：DOM　JavaScript
會出現像上面這樣的樹狀圖，熟悉HTML 的人應該都知道上面這些都是HTML 標籤。
所以DOM 跟 HTML 相關囉？ 沒錯 (U 'ᴗ' U) 你真聰明 ✧

那麼在介紹 DOM 之前，我們要先複習一下 HTML 。
我按照樹狀結構打在 HTML 上，我們來看看這些標籤在哪：

就不一一列出哪個標籤在哪一行了歐。
　

୨୧　DOM 簡單來說就是...

• 今天我們在文字編輯器寫一段 Code → 存檔 → 網頁開啓時、
  瀏覽器會去編譯你寫的 Code，把你寫的 Code 編譯成瀏覽器 & 其他網頁都可以看懂的項目。
• 瀏覽器在編譯時會先解析你的Code、把他變得像結構樹。( 會變得像上面圖片那樣 )
• 變成結構樹之後我們才能用 JavaScript 去選取 HTML 標籤 。

ʚɞ 如果你想知道整個原理，可以跟KURO大大取經 ʚɞ

୨୧　選取HTML 標籤可以幹嘛 r

我在生這篇文章前問同學：「 欸 DOM怎麼解釋啊？」
同學：「 嗯 ... 就很像css選擇器啊 」

CSS 選擇器可以選取 HTML 的 class 或 id 去修改網頁樣式。

那如果說 DOM 就像 CSS 選擇器、意思就是 ——
JS 也可以選取 HTML 的class 或 id 去修改網頁上的東西 (U 'ᴗ' U)！

不知道大家有沒有用過 jQuery ？
jQuery 是JS 的函式庫 ，他簡化 JS 的語法、
讓我們可以很輕鬆的去動態修改 HTML 和 CSS ，做出各種絢麗的動畫效果。

jQuery 範例

你可能會看不懂 JS 的部分在幹嘛，
簡單解釋一下其中一段：

$('.i5s').click(function(){
  $('.phone').css('width','250px');
  $('.screen').css('height','410px');
  $('.phoneName').text($(this).text());
});

↑　

1. 按下去 ( click ) 那個 class 叫 " i5s " 的東西，會執行函式。
2. 函式包含三個動作：
   • 修改 class 叫 phone 的元素 的 css ，把寬改成 250 px 。
   • 修改 class 叫 screen 的元素 的 css，把高改成 410 px 。
   • 修改 class 叫 phoneName 元素的文字，改叫 i5s 。

上面這段 Code 在做的事情就是 「 透過 JS 選取 HTML 的 class ，動態修改它 」。

那所以我們為什麼要學 DOM ？

因為今天我們要用 原生JavaScript 去做跟上面差不多的事情，
為了要正確選取我們想操作的地方 (U 'ᴗ' U) 這樣～ ♪

୨୧　所以 JS 可以透過選取 DOM 來：

( 把看不懂的中文塗掉 )

　

୨୧　DOM 選取方法

兜姆兜姆～ 兜姆兜姆兜姆！(被退訂閱)
我們知道 DOM 是什麼了，那我們要來練習怎麼選取他惹！
　
　

1.　我們要選取到 HTML 的 class & id

要選到 class 跟 id 我們才能對他毛手毛腳。
像前面的 jQuery 範例一樣，選取 class 後去變更他的 css 。

(U 'ᴗ' U) 這是我的 H T M L：

<h1 class = "dom"> title </h1>
<p id = "dom_id"></p>
<ul class="list"></ul>

(U 'ᴗ' U) 這是我的 J S ( 選取語法 )：

// 我建立一個變數 a ，去選取 h1 的 class 
var a = document.querySelector('.dom')

// 我建立一個變數 b ，去選取 p 的 id
var b = document.getElementById('#dom_id')

// 我建立一個變數 c ，去選取 ul 的 class
var c = document.querySelector('.list')

＊ 備註：選取 id 也可以用 document.querySelector(' # id ')

2.　選取到他之後，你可做這些事：

Codepen範例

• 修改文字節點（ 拿上面的 變數a 來操作 ）

  a.textContent = " sonyko超可愛 "
  // h1 內的文字會變成 sonyko超可愛
  

  　

• 新增 & 刪除 class

  /* 一樣使用 變數a 當範例 */
  
  // 新增一個 class
  a.classList.add('class_name')
  
  // 刪除一個 class
  a.classList.remove('class_name')
  
  // 切換一個 class 
  a.classList.toggle('class_name')
  

• 增加屬性

  a.setAttribute('style','font-size : 50px')
  

  屬性是什麼？ 來複習一下吧 。

  如果我們的HTML 有一個 標籤，我想要用JS 新增圖片給他
  就可以使用這個 setAttribute 。

   picture1.setAttribute('src','https://圖片網址')
  

  　

• 賦予HTML 値
  如果我今天想 按下按鈕後，顯示我的列表 就可以把列表的HTML 結構寫在JS 上。

  (U 'ᴗ' U) 這是我的 H T M L：

  <ul class="list"></ul>
  

  var c = document.querySelector('.list')
  c.innerHTML = `
  	<li> 列表內容1 </li>
  	<li> 列表內容2 </li>
  	<li> 列表內容3 </li>`
  

  　

  可能會有人不知道 innerHTML 和 textContent 差在哪裡

  innerHTML 是能夠 「插入整個結構」。
  textContent 是「插入文字」。

  附張圖片你就知道了：
  
  
  　
  　

• 取得 input 裡面的値( value )

  這個很重要 (U 'ᴗ' U)
  要做表單驗證、要做計算機 etc... 都會用到。　

  HTML：

  <input type="text" id="input_dom"> 
  

  JS：

  var input_dom = document.querySelector('#input_dom')
  var inputValue = input_dom.value   //　這個就是 input 的値
  

(U 'ᴗ' U) 更多DOM 操作，請參閱 w3c ♡
今天的DOM 介紹就到這邊，明天來講監聽～ ♫　

じゃあね。

୨୧ SONYKO 的前端日語小教室 ୨୧

　音檔