JavaScript 操作 DOM

HTML

Hypertext Markup Language），中文為「超文字標示語言」，是一種用來組織架構並呈現網頁內容的程式語言。網頁內容的組成，可能包含了段落、清單、圖片或表格…等。

JavaScript 操作 DOM 的一些方法

DOM：文件物件模型(Document Object Model)，瀏覽器幫 HTML 的元素節點轉換成 JavaScript 可以操作的物件。

選取元素

Code

1	let element = document.querySelector('<element-name>');

新增元素節點

Code

1	document.createElement("div");

e.g.

Code

<body>
  <h1>學校每位老師的名字</h1>
  <ul class="school">
    <li>王老師</li>
  </ul>
</body>

let el = document.querySelector(".school"); // 選取 ul 的這個 class
let dataLen = data.length; //資料長度
for (let i = 0; i < dataLen; i++) {
  var str = document.createElement("li"); // 新增元素 li
  str.textContent = data[i].teacher; // li 內的字串要顯示老師的名字
  el.appendChild(str); // 增加子節點為 str 的內容
}

在某元素後面加入元素

Code

1	.appendChild()

移除該元素

Code

1	.removeChild()

改變元素裡面的文字內容

Code

1	.innerText()

改變元素文字及標籤內容

Code

1	.innerHTML()

ps. 使用上要注意，有時會有安全性上的問題

新增元素節點樣式

Code

1	.classList.add('樣式');

刪除元素節點樣式

Code

1	.classList.delete('樣式')

監聽元素事件

Code

element.addEventLister('事件名稱', function(e){
    // do something
},<boolean>)
true => 捕獲 ; false => 冒泡，不加參數的話，預設值是 false

e.g. click 事件(e.target 點擊到的元素)

Code

<div id="test"></div>  

<script>
document.getElementById("test").addEventListener("click", function( event ) {
    // 在 “clicked div”顯示點擊次數
    event.target.innerHTML = "click count: " + event.detail;
  }, false);
</script>

DOM 事件傳遞機制

捕獲

根節點開始往下傳遞子節點然後到 target

冒泡

從 target 往上到子節點一路逆向傳回去根節點

DOM 事件傳遞的順序，先捕獲 -> 自身 -> 冒泡。

取消事件傳遞

Code

1	加在哪邊，事件傳遞就停在那，不向上(或下)級傳遞

el.addEventListener(‘click’, (e) => {
// e.eventPhase 回傳一個整數值以代表目前事件於事件流中的傳遞階段
console.log(‘el’, e.eventPhase);
e.stopPropagation();
}, true)

Code

1	#### 取消預設行為 ```e.preventDefault()

取消瀏覽器的預設行為

Code

// 超連結使用(不會新開分頁或是跳轉）
el_link.addEventListener('click', (e) => {
  e.preventDefault();
}, false)
// <form> 的 submit - 阻止送出表單
// <input> 的 keypress 事件 - 阻止輸入按鍵

事件傳遞應用

事件代理(Delegation)
利用 DOM 事件的冒泡特性，將子層元素的監聽事件綁定在父層元素上，好處有：
1.如果有很多子元素，就不用一一綁定監聽事件。
2.動態新增進來的子元素，因為也是會冒泡到上層，就不怕沒綁定到監聽。

元素操作範例

印出 9*9

Code

(function() {
    const chart = document.querySelector('#chart');  
    for (let i = 2; i <= 9; i++) {        
      const DIV = document.createElement('div'); // 新增 DIV 節點
      DIV.classList.add('col-md-4');   // 新增 DIV 樣式
      chart.appendChild(DIV);   // id=chart 的元素增加子節點 DIV
      // chart.append  將字串插入到網頁元素
      const UL = document.createElement('ul');
      UL.classList.add('chart-list', 'list-unstyled', 'bg-light');
      DIV.appendChild(UL);  
      let str = `<li class="chart-num">${ i }</li>`;// 2 ~ 9 // 組開頭數字 2~9 字串
      //console.log('外層for', str);
      for (let j = 1; j <= 9; j++) {    
        str += `<li class="h4">${ i } x ${ j } = ${ i*j }</li>`; // 2 x 1 ~ 9 x 9
      //console.log('內層for', str);
      }             
      //console.log('結果', str);
      UL.innerHTML = str;      // 將字串插入到網頁元素
    }  
  }());  //立即呼叫函式 IIFE

印出正方形

Code

function square(size){
    const chart = document.querySelector('#chart1');
    for (let i = 1; i <= size; i++) {  // 印出第i列
      for (let j = 1; j <= size; j++) {  // 第i列有size個*
        const sp = document.createElement('span');
        sp.classList.add('col-md-4')
        chart.appendChild(sp);  // 增加 span 元素
        let str = `*`;
        sp.innerHTML = str;     // 新增元素內容
        }
        const Br = document.createElement('br');
        chart.appendChild(Br);   // 增加斷行元素
    } 
};

印出斜一邊的三角形

Code

function sidetriangle(size) {
  const chart = document.querySelector('#chart2');
  for (let i = 1; i <= size; i++) {  // 印出第i列
    for (let j = 1; j <= i; j++) {   // 第i列有i個*
      const sp = document.createElement('span');
        sp.classList.add('col-md-4')
        chart.appendChild(sp);  // 增加 span 元素
        let str = `*`;
        sp.innerHTML = str;     // 新增元素內容
    }
      const Br = document.createElement('br');
      chart.appendChild(Br);   // 增加斷行元素
  }
};

參考：
MDN
DOM 的事件傳遞機制：捕獲與冒泡
 https://yakimhsu.com/project/project_w10_review_DOM&EventListener.html

HTML