JavaScript 與瀏覽器的溝通 : DOM

在瀏覽器的 Javascript 引擎解讀 HTML、SVG 時，會將內容分析成一個個的 DOM
DOM簡單來說，把 document 轉換成 object ，便可以取得那些物件
圖片取自維基百科

如何選到想要的元素：

下面這些 function 都是放在 document 上面，所以都是以 document. 開頭

1. getElementsByTagName
   document.getElementsByTagName('div')

2. getElementsByClassName
   document.getElementsByClassName('class_name')

3. getElementById
   document.getElementById('id_name')

4. getElementsByName
   用 .getElementsByName('name') 來根據 name 這個屬性取得表單元素的值
   他是 NodeList 集合，意味它會隨著有相同元素的新元素 name 添加到文檔中或從文檔中刪除而自動更新。
   例子:

<input type="hidden" name="up">
<input type="hidden" name="down">

<script>
  var up_names = document.getElementsByName("up");
  console.log(up_names[0].tagName); // displays "INPUT"
</script>

以下算比較新出來的

1. querySelector ： 後面接的是 css 的選擇器，只會回傳匹配到的第一個元素
   document.querySelector('#id_name')
document.querySelector('div')
document.querySelector('.class_name')
document.querySelector('div > a')

2. querySelectorAll ： 會選到所有元素
   document.querySelectorAll('div') 所有的 div 都會被選到

改變元素的 CSS

舉例 ：

<div id = 'block'>
   hello~
</div>
<script>
   const element = document.querySelector('#block')
   element.style.background = 'red'
   element.style.padding = '10px'
</script>

錯誤寫法 ： element.style padding-top = '10px'

兩個方式改寫，第一種
element.style ['padding-top'] = '10px'
第二種 ：
element.style paddingTop = '10px'

改變元素的 Class

<style>
    .active {
        background: red;
    }  
</style>

<div id = 'block' >
    hello~
</div>

<script>
const element = document.querySelector('#block')
element.classList.add('active')
</script>

上面這段程式就會將 <div id = 'block' > 變成 <div id = 'block' class= 'active'>

刪除 class 名稱
element.classList.remove('active')

開關 ： 開會變關，關會變開，本來沒有 class_name 會新增，有的話會移除
element.classList.toggle('active')

改變內容：inner、outer 的 HTML 與 text

<div id = 'block' >
    yo
    <a>hello</a>
</div>

<script>
const element = document.querySelector('#block > a')
console.log(element.innerText)
</script>

//  innerText 就是印出裡面的文字
//  因此上面印出 hello

// 如果改成 :
const element = document.querySelector('#block')
console.log(element.innerHTML)

// innerHTML 就是把 id = block 標籤中的東西全部印出來 
//    yo
//    <a>hello</a>

// outerHTML 用法
const element = document.querySelector('#block')
console.log(element.outerHTML)
// 連自己都印出
<div id = 'block' >
    yo
    <a>hello</a>
</div>

結論 :
如果只要印裡面內容就用 innerText ，如果要把裡面標籤全部印出來就用 innerHTML
連自己的標籤都要印出就用 outerHTML 。
innerText 除了可以用來取得 HTML 元素之外，還會把元素的 HTML 標籤去除掉，但 innerText 並非 W3C 所規定的標準寫法，而且僅適用於 IE 瀏覽器。

連樣式都改
例如 ： element.outerHTML = '<h1>hello!</h1>'

<div id = 'block' >
    yo
    <a>hello</a>
</div>

<script>
const element = document.querySelector('#block > a')
element.outerHTML = '<h1>hello!</h1>'
console.log(element.outerHTML)
</script>

結果:

插入與刪除元素：appendChild 與 removeChild

刪除
要刪掉元素前，要知道它的 parents 是誰，

<div id = 'block' >
    yo
    <a>hello</a>
</div>

const element = document.querySelector('#block')
element.removeChild(document.querySelector('a'))
// 只會印出 yo ，<a> 就會被刪掉了

插入

const element = document.querySelector('#block')
const item = document.createElement('div')
item.innerText = '123'
element.appendChild(item)

如果沒有想要它是個 element ，只是要新增純文字可以用
const item = document.createTextNode('123')

const element = document.querySelector('#block')
const item = document.createTextNode('123')
element.appendChild(item)

更多 :

• .appendChild()

• .removeChild()

• .replaceChild()

• .insertBefore()

• .hasChildNodes()