原生的 JavaScript 用法 -- Vanilla.js

在 網站技術的源頭 一文中我們曾經提到，React.js/ Vue.js/ Angular.js/ jQuery/ Ruby/ PHP/ Node.js 等都是網站技術，但這些技術都是建構在 HTML/CSS/JavaScript 這三個源頭技術之上的...

問題是當我們每次說這三個源頭技術時，都得講《HTML/CSS/JavaScript》的話，那有點太長了，於是有人開玩笑地幫這種《原生的JavaScript》技術取名為 Vanilla.js，您可以從下列文章中進一步了解 Vanilla.js 這個詞的起源。

• 精通 VanillaJS -- https://www.ithome.com.tw/voice/106182

強烈建議初學者學習 JavaScript 的時候，先從 Vanilla.js 開始學習，而不要一下就跨到 React.js/ Angular.js / Vue.js 這樣的複雜框架，否則一下要學習的東西太多，是會吃不消的。

早期很多《前端工程師》是從 jQuery開始入門的，但是我也建議大家先別學 jQuery，直接從 Vanilla.js 開始，因為原生的瀏覽器已經支援了和 jQuery 不相上下的 document.querySlector 與 querySelectorAll 查詢功能，所以我們不需要學 jQuery 也可以很方便的操控 html 文件，或修改任何節點的 css 屬性了。

以下這篇文章詳細介紹了用 querySlector 與 querySelectorAll 查詢節點的方法:

• 都 2017 年了，學學用原生 JS 來操作 DOM 吧 --https://jmln.tw/blog/2017-07-07-vanilla-javascript-dom-manipulation.html

您也可以從《菜鳥教程》的下列網址中學習到 querySlector 的用法。

• http://www.runoob.com/jsref/met-document-queryselector.html

不過《菜鳥教程》沒介紹 querySelectorAll 的用法，還好有個資訊更完整的 w3schools 網站有介紹，請參考下列連結

• https://www.w3schools.com/jsref/met_document_queryselectorall.asp

其中一個較能展示querySelectorAll功能的範例網址如下：

• https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_queryselectorall_multiple

您可以試試看，就會知道這種方式已經非常強大，所以我們其實不太需要 jQuery 了！