查找HTML元素

1.document.getElementById('idName'):通過元素"id":選擇元素。
2.document.getElementsByClassName('className'):通過元素"class"選擇元素。
3.document.getElementsByTagName('tagName'):通過標籤來選擇元素。
4.document.querySelector('selector'):通過 CSS 選擇器選擇元素中的第一個選項。
5.document.querySelectorAll('selector'):通過CSS選擇器選擇元素中的所有選項。

範例:

<div id="test">
    <p>這是一個範例。</p><br>
</div>

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

如何增加或移除文檔元素

1.appendChild():創建新元素需在以儲存的元素添加(添加到尾部)。
2.insertBefore():添加到起始位置。
3.removeChild():移除元素需知道該元素的父元素。
4.replaceChild():替換HTML DOM中的元素。

範例

<div id="test">
    <p>這是一個範例。</p><br>
</div>
<button onclick="addNewElement()">添加新元素</button>

function addNewElement() {
    // 創建一個新的段落元素
    var test_p = document.createElement("p");
    
    // 設置新段落的內容
    test_p.textContent = "這是新添加的段落。";
    
    var test = document.getElementById("test");
    
    // 使用appendChild()將新段落添加到test元素中
    test.appendChild(test_p);
}

常見的EventListener

1.click:當元素被點擊時觸發。

element.addEventListener("click", function() {
  //點擊執行的操作
});

2.mouseover 和 mouseout:當屬標移動到元素時觸發mouseover事件，移開時觸發mouseout事件

element.addEventListener("mouseover", function() {
  //當鼠標移入觸發動作
});

element.addEventListener("mouseout", function() {
  //當鼠標移出觸發動作
});

3.keydown 和 keyup :當鍵盤按鍵被按下(keydown)或放開(keyup)時觸發。

element.addEventListener("keydown", function(event) {
});

element.addEventListener("keyup", function(event) {
});

4.change:通常用於監視下拉表單，單選或多選框。

inputElement.addEventListener("change", function() {
});

參考網址
https://www.runoob.com/js/js-tutorial.html