1. DOM節點訪問

1.1 直接獲取

document.getElementById("intro");//返回單個id為into的元素節點
document.getElementsByTagName("p");//返回所有標籤p的元素集合，也可以node.document.getElementsByTagName("p");//代表node的所有p子孫節點
document.getElementsByClassName("intro");//集合
document.getElementsByName("intro");//集合
document.getElementsByNameNS("intro");  //namespace
 

1.2 父子兄弟操作（dom的操作需要注意換行和空格，也可能是節點）

var chils= s.childNodes;  //得到s的全部子節點    坑：1.子節點還是子孫（瀏覽器） 2.空格換行可能是節點
var par=s.parentNode;   //得到s的父節點
var ns=s.nextSbiling;   //獲得s的下一個兄弟節點
var ps=s.previousSbiling;  //得到s的上一個兄弟節點
var fc=s.firstChild;   //獲得s的第一個子節點
var lc=s.lastChile;   //獲得s的最後一個子節點節點屬性

2.DOM屬性

2.1 innerHTML

3.修改DOM

appendChild(node)   把新的子節點新增到指定節點。
removeChild(node)   刪除子節點。
replaceChild(node)  替換子節點。
insertBefore(node)  在指定的子節點前面插入新的子節點。
createAttribute(name,value) 建立屬性節點。
createElement(tag)  建立元素節點。
createTextNode(tesxt)
 
   建立文字節點。
getAttribute(name)  返回指定的屬性值。
setAttribute(name,value)    把指定屬性設定或修改為指定的值。

4.事件

document.getElementById("myBtn").onclick=function(){displayDate()}; //是否可以給集合這樣直接新增事件
<h1 onclick="this.innerHTML='Ooops!'">點選文字!</h1>
<h1 onclick="changetext(this)">點選文字!</h1>
document.getElementById("myBtn").addEventListener("click", displayDate);

常用事件：
onload 和 onunload 事件：當用戶進入或離開頁面時，會觸發 onload 和 onunload 事件。
onchange 事件：onchange 事件常用於輸入欄位的驗證。
onmouseover 和 onmouseout 事件：onmouseover 和 onmouseout 事件可用於在滑鼠指標移動到或離開元素時觸發函式。
onmousedown、onmouseup 以及 onclick 事件：onmousedown、onmouseup 以及 onclick 事件是滑鼠點選的全部過程。首先當某個滑鼠按鈕被點選時，觸發 onmousedown 事件，然後，當滑鼠按鈕被鬆開時，會觸發 onmouseup 事件，最後，當滑鼠點選完成時，觸發 onclick 事件。