前端时间在部门内进行分享，准备素材时偶然发现下面的一个现象，因为和当时分享的主题无关，就先记下来了，事后重新审视，并把一些思考记录如下：一、问题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.BOMBOM提供了独立于内容而与浏览器窗口进行交互的对象，由于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属性atrributeschildNodesfirstChildlastChildnextSiblingpreviousSibilingnodeTypenodeName方法appendChild()insertBefore()（2）Document属性body方法创建createElement()createAttribute()createTextNode()createComment()遍历getElementById()getElementByTagName()getElementByClassName()（3）Element方法遍历getElementByTagName()getElementByClassName()操作getAttribute()setAttribute()（4）Attr属性namevalue（5）Text4.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写过什么东西？直接鄙视他！