[JavaScript] 常用DOM操作總結

最近在學習JavaScript，寫下人生第一篇隨筆總結一下DOM的相關操作。

一、查找節點

getElementById：根據ID查找元素

var element = element.getElementById(id)
// id：目標元素ID的字元串
// 返回一個元素對象

getElementsByClassName：根據類名查找元素

var elements = element.getElementsByClassName(classNames)
// classNames：目標元素類名的字元串，多個類名用空格分開
// 返回一組元素對象（HTMLCollection）

getElementsByTagName ：根據標簽查找元素

var elements = element.getElementsByTagName(tagName)
// tagName：目標元素標簽名的字元串
// 返回一組元素對象（HTMLCollection）

getElementsByName ：根據元素的name屬性查找

var elements = element.getElementsByName(name) 
// name：目標元素name屬性的值
// 返回一組元素對象（NodeList）

querySelector ：使用選擇器查找單個元素

var element = element.querySelector(selectors)
// selectors：目標元素的CSS選擇器字元串
// 返回第一個滿足指定選擇器組的元素

querySelectorAll ：使用選擇器查找一組元素

var elementList = element.querySelectorAll(selectors)
// selectors：目標元素的CSS選擇器字元串
// 返回一組滿足指定選擇器組的元素（non-live的NodeList）

二、創建節點

document.write：向文檔流寫入

document.write(text)
// text: 要寫入文檔的文本的字元串

document.write需要向文檔流中寫入內容，所以在已完成載入的文檔上調用此方法會清空該文檔的內容。

createElement：創建元素節點

var element = document.createElement(tagName)
// tagName: 要創建元素的類型的字元串
// 返回創建的元素對象

MDN文檔上介紹此方法還有一個可選參數options，瞭解不多就不寫上了。

createTextNode：創建文本節點

var text = document.createTextNode(text)
// text：要放入文本節點的內容
// 返回創建的文本節點

cloneNode：克隆一個節點

var dupNode = node.cloneNode(deep)
// node：將要被克隆的節點
// deep：可選。是否採用深度克隆
// 返回調用該方法的節點的一個副本

deep參數可傳入true或false。如果為true，則該節點的所有後代節點也都會被克隆；如果為false，則只克隆該節點本身。

三、插入和刪除節點

appendChild：在父節點末尾插入新節點

parentNode.appendChild(newNode)
// parentNode: 新插入節點的父節點
// newNode: 要追加給父節點（通常為一個元素）的節點

insertBefore：在某個子節點前插入新節點

parentNode.insertBefore(newNode, referNode)
// parentNode: 新插入節點的父節點
// newNode: 用於插入的節點
// referNode: 新節點將要插在這個節點之前

removeChild：刪除子節點

parentNode.removeChild(childNode)
// parentNode: 要移除節點的父節點
// childNode: 要移除的子節點

四、修改節點屬性

setAttribute：設置元素的屬性值

element.setAttribute(name, value)
// name：屬性名的字元串
// value：屬性的值

getAttribute：獲取元素的屬性值

var attribute = element.getAttribute(name)
// name：目標屬性名的字元串
// 返回目標屬性值的字元串

removeAttribute：刪除元素某個屬性

element.removeAttribute(name)
// name：要刪除的屬性名的字元串

element.attribute：讀寫HTML元素的屬性

element.style.property：讀寫HTML元素的樣式

element.className：讀寫元素的類名

五、修改節點內容

element.innerHTML：讀寫元素的HTML內容，包括HTML標簽，保留空格和換行

element.innerText：讀寫元素的文本，去除HTML標簽、空格和換行

六、節點間關係

1.父子關係

node.parentNode：返回指定的節點在DOM樹中的最近的父節點

node.childNodes：返回指定節點的子節點的集合（NodeList），包含元素節點和文本節點等

node.children：返回指定節點的子元素節點的集合（HTMLCollection）

node.firstChild：返回指定節點的第一個子節點，可能為元素節點或文本節點等

node.lastChild：返回指定節點的最後一個子節點，可能為元素節點或文本節點等

node.firstElementChild：返回指定節點的第一個子元素節點

node.lastElementChild：返回指定節點的最後一個子元素節點

2.兄弟關係

node.previousSibling：返回指定節點的前一個兄弟節點，可能為元素節點或文本節點等

node.nextSibling：返回指定節點的下一個兄弟節點，可能為元素節點或文本節點等

node.previousElementSibling：返回指定節點的前一個兄弟元素節點

node.nextElementSibling：返回指定節點的下一個兄弟元素節點