雖然目前的開發場景基本都是使用 React/Vue/Angular 等框架，但是對于一些基礎的 DOM 操作，還是需要了解學習。

曾經我們討論過這樣一個問題：Vue 這些開發框架，用它們渲染頁面，真的就比不用開發框架快嗎？

其實這個問題很好回答的，開發框架只是優化了項目的開發效率，對于瀏覽器的渲染速度，其實并沒有想象中的那么快。

目前的前后端分離的開發模式，大致分為兩種：一是瀏覽器端運行 Vue 等單頁應用框架，由前端發起接口請求渲染頁面從而實現前后端分離；二是在服務端運行 node.js ，由 node.js 發起接口請求渲染頁面，從而實現前后端分離。這兩種開發模式都繞不開的一個問題是：都要請求一次接口，http 通信都是很耗時的，相比于古老的后端渲染來說，其實已經算很慢了。

那么就有一個問題：為何 node.js 不直接寫 SQL 查詢數據庫？嘿。。這個問題嘛就涉及到方方面面了，比如全棧開發和前端開發的價格那可不一樣，會 JS 的前端和會 SQL 的前端又不一樣了，前端踩過線去干后端的事這就矛盾來了...

廢話太多了，咱們進入正題~~

DOM 查詢

DOM 查詢就是要找到 HTML 中的某個節點，方便對這個節點干一些不可描述的事~~

比如說給這個 HTML 元素加點小料，給 HTML 元素換個皮膚，讓 HTML 元素動起來啥的。要干這些事的前提是要找對 HTML 元素，找錯了就亂套了~~

/* 
通過 ID 選擇
查找頁面上 id="header" 的第一個元素
比如：
<div id="header"></div>
<section id="header"></section>
<header id="header"></header>
只要是 ID  為 header 的元素，都能選擇，但是只會找第一個
*/
const header = document.getElementById("header");
/*
通過類名選擇（返回動態集合）
查找頁面上 class="btn" 的所有元素
比如：
<button class="btn"></button>
<a class="btn"></a>
<div class="btn"></div>
*/
const buttons = document.getElementsByClassName("btn"); 
/*
通過標簽名選擇
與 getElementsByClassName 類似，只是選擇頁面上所有的 img 元素
*/
const images = document.getElementsByTagName("img");
/*
通過 CSS 選擇器（靜態集合）
此方法可以使用 CSS 選擇器來獲取頁面上的元素
比如可以使用 .item:nth-child(3) 選擇頁面上 class="item" 的第三個元素
*/
const firstButton = document.querySelector(".btn:first-child");
const allButtons = document.querySelectorAll(".btn");

動態集合 vs 靜態集合

顧名思義，動態集合就是會根據 HTML 內容變化而變化，而靜態集合就是不管 HTML 怎么變，都是選擇器方法執行的那一瞬間就確定了他的樣子。

<ul class="list">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
  <li class="item">4</li>
  <li class="item">5</li>
</ul>
<script>
  const item1 = document.querySelectorAll('.item')
  const item2 = document.getElementsByClassName('item')
  // 創建一個新的 li 元素
  const li = document.createElement('li')
  li.classList.add('item')
  // list 元素中新增一個 li 元素
  document.querySelector('.list').appendChild(li)
  console.log('?? ~ item2:', item1); // NodeList(5)
  console.log('?? ~ item:', item2); // HTMLCollection(6)
</script>

節點關系

除了直接查找節點的方法外，還能通過獲取到的節點關系屬性，取到相對于的節點，比如：

parentNode 用于選擇父節點。
childNodes 用于選擇所有子節點，包括所有的子內容（比如：注釋、空格、文本內容等）。
children 僅選擇元素節點內容。

firstChild 選擇第一個子內容，可以是注釋、文本內容、換行符等。
lastChild 選擇最后一個子內容，可以是注釋、文本內容、換行符等。
firstElementChild 選擇第一個元素節點。
lastElementChild 選擇最后一個元素節點。

nextSibling 選擇當前節點后一個內容，可以是注釋、文本內容、換行符等。
previousSibling 選擇當前節點前一個內容，可以是注釋、文本內容、換行符等。
nextElementSibling 選擇當前節點后一個元素節點。
previousElementSibling 選擇當前節點前一個元素節點。

<ul class="list">1122
  <!-- 注釋 -->
  <li class="item">1</li>
  <li class="item">2</li>
  321<li class="item">3</li>123
  <li class="item">4</li>
  <li class="item">5</li>
</ul>
<script>
  const parentNode = document.querySelector('.item:nth-child(3)').parentNode
  console.log('?? ~ parentNode:', parentNode); // 獲得 ul.list 
  const childNodes = document.querySelector('.list').childNodes
  console.log('?? ~ childNodes:', childNodes); // 獲得所有的子內容 [text, comment, text, li.item, text, li.item, text, li.item, text, li.item, text, li.item, text]
  const children = document.querySelector('.list').children
  console.log('?? ~ children:', children); // 獲取所有的 .item 元素 [li.item, li.item, li.item, li.item, li.item]
  const firstChild = document.querySelector('.list').firstChild
  console.log('?? ~ firstChild:', firstChild); // 獲得文本 11122
  const lastChild = document.querySelector('.list').lastChild
  console.log('?? ~ lastChild:', lastChild); // 獲得最后的換行符 \n
  const firstElementChild = document.querySelector('.list').firstElementChild
  console.log('?? ~ firstElementChild:', firstElementChild); // 獲得第一個 li.item
  const lastElementChild = document.querySelector('.list').lastElementChild
  console.log('?? ~ lastElementChild:', lastElementChild); // 獲最后一個 li.item
  const nextSibling = document.querySelector('.item:nth-child(3)').nextSibling
  console.log('?? ~ nextSibling:', nextSibling); // 獲得文本 123
  const previousSibling = document.querySelector('.item:nth-child(3)').previousSibling
  console.log('?? ~ previousSibling:', previousSibling); // 獲得文本 321
  const nextElementSibling = document.querySelector('.item:nth-child(3)').nextElementSibling
  console.log('?? ~ nextElementSibling:', nextElementSibling); // 獲得第四個 li.item
  const previousElementSibling = document.querySelector('.item:nth-child(3)').previousElementSibling
  console.log('?? ~ previousElementSibling:', previousElementSibling); // 獲得第二個 li.item
</script>

轉自https://www.cnblogs.com/linx/p/18947426