前端时间在部门内进行分享，准备素材时偶然发现下面的一个现象，因为和当时分享的主题无关，就先记下来了，事后重新审视，并把一些思考记录如下：
一、问题
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类型，因为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写过什么东西？直接鄙视他！
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。