本篇文章主要總結了常用的dom操作，方便平時查閱。
--------------------------------圖片來自參考連結2
每個載入瀏覽器的 HTML 文件都會成為 Document 物件。
對 DOM 操作，我們使用最多的就是通過 document 物件。
document 物件是一個內建物件，我們可以通過它的許多屬性和方法來獲取和操作 dom 。
由上圖可以看出：
<html> = document.documentElement；
<body> = document.body；
<head> = document.head；
document = node.ownerDocument；//隨意一個節點，可通過該屬性獲取 document 物件；
複製程式碼文件常用操作
1、element 物件查詢
document.getElementById(id);           //返回對擁有指定id的第一個物件進行訪問
document.getElementsByName(name);      //返回帶有指定名稱的節點集合
document.getElementsByTagName(tagname);   //返回帶有指定標籤名的物件集合 
document.getElementsByClassName(classname); //返回帶有指定class名稱的物件集合
document.querySelector(selectorName) //返回符合CSS選擇器的第一個物件
document.querySelectorAll(selectorName) //返回符合CSS選擇器的物件集合
document.createElement(name) //建立一個html元素
複製程式碼接下來，我們先複習一些基本的概念：
節點（node） 是 DOM 層次結構中任何型別物件的通用名稱。node 可以是內建 DOM 元素之一，例如document或document.body，也可以是HTML中指定的HTML標記，例如或
，也可以是文字節點（系統將一個文字塊儲存在另一個元素中）。
簡而言之，node 是任何DOM物件。
元素（element） 是特定型別的 node，可以在HTML中使用HTML標記直接指定，並且可以具有id或類等屬性。
所以 node 具備的屬性與方法， element 由於繼承自 node，也相應具備了這些屬性與方法。
2、element 家族遍歷
myElement.children //只得到 element 子節點集
myElement.firstElementChild
myElement.lastElementChild
myElement.previousElementSibling
myElement.nextElementSibling
複製程式碼由於 element 繼承自 node ， 所以以下屬性也具備：
myElement.childNodes
myElement.firstChild
myElement.lastChild
myElement.previousSibling
myElement.nextSibling
myElement.parentNode
myElement.parentElement
複製程式碼3、element 屬性操作
element.attributes //返回該元素所有屬性節點的一個實時集合是個類陣列物件
element.getAttributeNames() //返回一個Array，該陣列包含指定元素（element）的所有屬性名稱
element.getAttribute(attributeName);
element.setAttribute(attributeName, value);
element.hasAttribute(attributeName);
element.removeAttribute(attributeName);
element.hasAttributes(); // 是否有屬性設定
複製程式碼除此之前，還有四個概念較為常見：innerHTML、outerHTML、innerText 、outerText，以圖作為說明：
------------------來自參考連結1
4、element樣式操作
4.1、element 類操作
element.className //返回一個字串
element.classList //返回一個類陣列
複製程式碼className 是可讀寫屬性，可以使用
element.className += 'fool'
來增加類名，或者通過正規表示式來刪除或更改類名：
element.className = element.className.replace(/^bold$/, '');
classList 也提供了一些方法來操作元素的類名：
element.classList.add() //增加一個 class。
element.classList.remove() //移除一個 class。
element.classList.contains() //檢查當前元素是否包含某個 class。
element.classList.toggle() //將某個 class 移入或移出當前元素。
element.classList.item() //返回指定索引位置的 class。
element.classList.toString() //將 class 的列表轉為字串。
複製程式碼4.2、獲取樣式方法
- window.getComputedStyle 方法返回的物件是隻讀的，可以用於檢查元素的樣式（包括由一個
<style>元素或一個外部樣式表設定的那些樣式）。
window.getComputedStyle(myElement) //返回的style是一個實時的 CSSStyleDeclaration 物件，當元素的樣式更改時，它會自動更新本身。返回值只讀。
複製程式碼-
Element.getBoundingClientRect 方法返回元素的大小及其相對於視口的位置。可以用這個方法來獲取元素的位置。
element.getBoundingClientRect（）.top element.getBoundingClientRect（）.left 複製程式碼 -
讀取元素的行內樣式，可以直接使用：
element.style //用來讀寫該元素的行內樣式資訊 複製程式碼
4.3、其他 element 操作方法
element.matches(cssSelector) //表示當前元素是否匹配給定的 CSS 選擇器
element.scrollIntoView(Boolean) //讓當前的元素滾動到瀏覽器視窗的可視區域內。
複製程式碼5、Dom 更改
element.appendChild(element);
element.removeChild(element);
element.replaceChild(element1, element2);
parentElement.insertBefore(newElement, referenceElement); //插入子元素
複製程式碼6、有趣的事件
接下來要介紹的幾個方法，不算太為常見的事件操作，不過作者近期有用到，在這裡給大家作為了解，還是很有意思的~
- 觀察元素是否進入視視窗內：
io = new IntersectionObserver()
複製程式碼- 觀察元素屬性是否發生變化:
var observer = new MutationObserver();
複製程式碼這兩個方法就不展開講解了，有興趣的可以參考後面的參考連結相關文章~
7、參考連結
1、原生 JavaScript 的 DOM 操作彙總：harttle.land/2015/10/01/…
2、The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery)：www.sitepoint.com/dom-manipul…
3、Element物件：javascript.ruanyifeng.com/dom/element…
4、IntersectionObserver API 使用教程： www.ruanyifeng.com/blog/2016/1…
5、MutationObserver：developer.mozilla.org/zh-CN/docs/…