91网首页-91网页版-91网在线观看-91网站免费观看-91网站永久视频-91网站在线播放

雖然目前的開發(fā)場景基本都是使用 React/Vue/Angular 等框架，但是對(duì)于一些基礎(chǔ)的 DOM 操作，還是需要了解學(xué)習(xí)。

曾經(jīng)我們討論過這樣一個(gè)問題：Vue 這些開發(fā)框架，用它們渲染頁面，真的就比不用開發(fā)框架快嗎？

其實(shí)這個(gè)問題很好回答的，開發(fā)框架只是優(yōu)化了項(xiàng)目的開發(fā)效率，對(duì)于瀏覽器的渲染速度，其實(shí)并沒有想象中的那么快。

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

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

廢話太多了，咱們進(jìn)入正題~~

DOM 查詢

DOM 查詢就是要找到 HTML 中的某個(gè)節(jié)點(diǎn)，方便對(duì)這個(gè)節(jié)點(diǎn)干一些不可描述的事~~

比如說給這個(gè) HTML 元素加點(diǎn)小料，給 HTML 元素?fù)Q個(gè)皮膚，讓 HTML 元素動(dòng)起來啥的。要干這些事的前提是要找對(duì) HTML 元素，找錯(cuò)了就亂套了~~

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

動(dòng)態(tài)集合 vs 靜態(tài)集合

顧名思義，動(dòng)態(tài)集合就是會(huì)根據(jù) HTML 內(nèi)容變化而變化，而靜態(tài)集合就是不管 HTML 怎么變，都是選擇器方法執(zhí)行的那一瞬間就確定了他的樣子。

<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')
  // 創(chuàng)建一個(gè)新的 li 元素
  const li = document.createElement('li')
  li.classList.add('item')
  // list 元素中新增一個(gè) li 元素
  document.querySelector('.list').appendChild(li)
  console.log('?? ~ item2:', item1); // NodeList(5)
  console.log('?? ~ item:', item2); // HTMLCollection(6)
</script>

節(jié)點(diǎn)關(guān)系

除了直接查找節(jié)點(diǎn)的方法外，還能通過獲取到的節(jié)點(diǎn)關(guān)系屬性，取到相對(duì)于的節(jié)點(diǎn)，比如：

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

firstChild 選擇第一個(gè)子內(nèi)容，可以是注釋、文本內(nèi)容、換行符等。
lastChild 選擇最后一個(gè)子內(nèi)容，可以是注釋、文本內(nèi)容、換行符等。
firstElementChild 選擇第一個(gè)元素節(jié)點(diǎn)。
lastElementChild 選擇最后一個(gè)元素節(jié)點(diǎn)。

nextSibling 選擇當(dāng)前節(jié)點(diǎn)后一個(gè)內(nèi)容，可以是注釋、文本內(nèi)容、換行符等。
previousSibling 選擇當(dāng)前節(jié)點(diǎn)前一個(gè)內(nèi)容，可以是注釋、文本內(nèi)容、換行符等。
nextElementSibling 選擇當(dāng)前節(jié)點(diǎn)后一個(gè)元素節(jié)點(diǎn)。
previousElementSibling 選擇當(dāng)前節(jié)點(diǎn)前一個(gè)元素節(jié)點(diǎn)。

<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); // 獲得所有的子內(nèi)容 [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); // 獲得第一個(gè) li.item
  const lastElementChild = document.querySelector('.list').lastElementChild
  console.log('?? ~ lastElementChild:', lastElementChild); // 獲最后一個(gè) 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); // 獲得第四個(gè) li.item
  const previousElementSibling = document.querySelector('.item:nth-child(3)').previousElementSibling
  console.log('?? ~ previousElementSibling:', previousElementSibling); // 獲得第二個(gè) li.item
</script>

轉(zhuǎn)自https://www.cnblogs.com/linx/p/18947426