[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標簽、空格和換行

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

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

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

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

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

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

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

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

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

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

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/100506.html

上一篇：遮罩