前端應該知道的基本知識
前端時間在部門內進行分享，準備素材時偶然發現下面的一個現象，因為和當時分享的主題無關，就先記下來了，事後重新審視，並把一些思考記錄如下：
一、問題
HTML：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM-插入子節點</title> </head> <body> <h1>第0個標題</h1> <div id="app"></div> <script> //寫法1：分步呼叫 var h1 = document.createElement('h1'); var text = document.createTextNode('第1個標題'); h1.appendChild(text); //！！！ document.getElementById('app').appendChild(h1); //寫法2：鏈式呼叫 document.getElementById('app').appendChild(document.createElement('h1').appendChild(document.createTextNode('第2個標題'))); </script> </body> </html>
結果：
渲染後的HTML結構
為什麼？？？
二、原因
寫法1中
var text = document.createTextNode('第1個標題');text是Text型別，而appendChild()方法的返回值型別取決於入參的型別，即下面程式碼執行後
h1.appendChild(text);返回值的仍然是Text型別，所以寫法2的鏈式寫法（也不知道當時為啥想來這麼一招）
document.getElementById('app').appendChild(document.createElement('h1').appendChild(document.createTextNode('第2個標題')));
相當於
document.getElementById('app').appendChild(new Text('第2個標題'));所以第2個標題是文字節點，而不是h1元素。
三、引申
最初發現此問題，百思不解，又苦於谷歌時不知道如何描述，後來在一個學習群中得到了解答，不過也被鄙視了一下下。
痛定思痛，反思自己為什會在這個問題上迷失，最終得出的結論：對於底層DOM的api不熟。
在我開始接觸前端時，jQuery和各種前端框架早已大行其道，它們將繁瑣的底層DOM操作封裝的盡善盡美，讓我們在開發的時候爽到飛。當然也讓我們對DOM底層也生疏起來，甚至對於有些半路出家的前端而言根本不是生疏，因為從來沒有熟悉過。這是一種非常危險的現象。試想，現在如果讓我們拋棄所有庫和框架去實現一個元件，我們是否能夠依然遊刃有餘呢？我是沒有信心的。
所有我們不熟悉或者沒有掌握的知識皆可稱之為"知識盲區"，有知識盲區並不可怕，針對知識盲區去學習即可。
我感覺對自己職業的技能要求有一個全面的認識，有一個俯視視角才是最重要的。只有這樣，我們才會準確知道自己的知識盲區所處何處，以及發現更多的知識盲區。
以下是我結合本次內容，對前端技能樹的一個梳理：
1.前端技能樹
其中我始終堅信JavaScript才是前端人員的核心競爭力，它決定了一個前端人員在前端領域能走多遠和能達到的高度。
JavaScript是一門程式語言，與之緊密相關的三個領域：BOM、DOM、ECMAScript。
- BOM（Browser Object Model，瀏覽器物件模型），將瀏覽器抽象成物件，進而可以操作瀏覽器。
- DOM（Document Object Model，文件物件模型），將網頁抽象成物件，進而可以操作網頁。
- ECMAScript（European Computer Manufacturers Association，歐洲計算機制造商協會），JavaScript的標準，JavaScript是它的實現。我們對JavaScript語法的學習其實就是對此標準的學習，比如我們整天說的ES6。
2.BOM
BOM提供了獨立於內容而與瀏覽器視窗進行互動的物件，由於BOM主要用於管理視窗與視窗之間的通訊，因此其核心物件是window。
BOM由一系列相關的物件構成，並且每個物件都提供了很多方法與屬性，這些物件的例項又都存在於window物件中。我們平時最常用到的包括location、history、document，navigtor和screen很少用，瞭解即可。
JavaScript語法的標準化組織是ECMA，DOM的標準化組織是W3C，BOM缺乏標準，它最初是Netscape瀏覽器標準的一部分。
3.DOM
在DOM中，所有事物都是節點。DOM將HTML文件表達為樹結構，DOM是被視為HTML的節點樹。
節點對應的物件是Node，其他的具體節點物件全都是繼承自Node物件。
DOM 定義了訪問和操作HTML文件的標準方法。換言之，DOM 是關於如何獲取、修改、新增或刪除 HTML 元素的標準。
以下為不同型別節點物件提供的常用屬性和方法：
（1）Node
-
屬性
- atrributes
- childNodes
- firstChild
- lastChild
- nextSibling
- previousSibiling
- nodeType
- nodeName
-
方法
- appendChild()
- insertBefore()
（2）Document
-
屬性
- body
-
方法
-
建立
- createElement()
- createAttribute()
- createTextNode()
- createComment()
-
遍歷
- getElementById()
- getElementByTagName()
- getElementByClassName()
-
（3）Element
-
方法
-
遍歷
- getElementByTagName()
- getElementByClassName()
-
操作
- getAttribute()
- setAttribute()
-
（4）Attr
-
屬性
- name
- value
（5）Text
4.JavaScript與Node.js的關係
（1）JavaScript是一門程式語言，Node.js是JavaScript的執行環境
（2）JavaScript目前主要有兩種執行環境：
- 客戶端：瀏覽器
- 伺服器端：Node.js
（3）任何一種執行環境都要有解釋JavaScript的能力，此能力由JavaScript引擎提供，最著名的當屬V8引擎，Chrome瀏覽器和Node.js都是集成了V8引擎
（4）目前常見框架與兩者的關係：
- Angular、React、Vue是用JavaScript寫的前端框架，編譯後可以直接在瀏覽器中執行
- Express、Koa是用JavaScript寫的伺服器端框架，可以直接在Node.js中執行
- Webpack、Gulp、Grunt等是執行在Node.js中的構建框架
所以，如果以後再有人問你：用Node.js寫過什麼東西？直接鄙視他！