前端應該知道的基本知識

時間 2019-12-10

標籤前端應該知道基本知識简体版

原文原文鏈接

前端時間在部門內進行分享，準備素材時偶然發現下面的一個現象，由於和當時分享的主題無關，就先記下來了，過後從新審視，並把一些思考記錄以下：html

1、問題

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>

結果：node

渲染後的HTML結構編程

爲何？？？api

2、緣由

寫法1中瀏覽器

var text = document.createTextNode('第1個標題');

text是Text類型，而appendChild()方法的返回值類型取決於入參的類型，即傳入什麼類型的參數，此函數的執行結果就是什麼類型，下面代碼執行後前端框架

h1.appendChild(text);

返回值的仍然是Text類型，由於text是Text類型，因此寫法2的鏈式寫法（也不知道當時爲啥想來這麼一招）服務器

document.getElementById('app').appendChild(document.createElement('h1').appendChild(document.createTextNode('第2個標題')));

至關於app

document.getElementById('app').appendChild(new Text('第2個標題'));

因此第2個標題是文本節點，而不是h1元素。框架

3、引伸

最初發現此問題，百思不解，又苦於谷歌時不知道如何描述，後來在一個學習羣中獲得瞭解答，不過也被鄙視了一下下。

痛定思痛，反思本身爲什會在這個問題上迷失，最終得出的結論：對於底層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()