共计 2854 个字符，预计需要花费 8 分钟才能阅读完成。
前端时间在部门内进行分享，准备素材时偶然发现下面的一个现象，因为和当时分享的主题无关，就先记下来了，事后重新审视，并把一些思考记录如下：
一、问题
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 写过什么东西？直接鄙视他！
