摘要：所有我们不熟悉或者没有掌握的知识皆可称之为知识盲区，有知识盲区并不可怕，针对知识盲区去学习即可。只有这样，我们才会准确知道自己的知识盲区所处何处，以及发现更多的知识盲区。节点对应的对象是，其他的具体节点对象全都是继承自对象。
前端时间在部门内进行分享，准备素材时偶然发现下面的一个现象，因为和当时分享的主题无关，就先记下来了，事后重新审视，并把一些思考记录如下：
一、问题HTML：
DOM-插入子节点
第0个标题
结果：
渲染后的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.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
属性
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写过什么东西？直接鄙视他！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/108527.html
摘要：什么是先贴官网英文中文。所有的操作必须指明到最底层的，并且返回值为标量，以确保响应结果的结构明白无误。对于前端来说，在查询的时候基本都要了解上面说的这几个概念，具体应用可参见我的这篇文章如何利用开发个人博客。 本文主要结合GitHub GraphQL API，从前端使用者的角度来谈GraphQL，没有GraphQL项目的同学可以拿GitHub GraphQL API练手，具体代码可参见...
摘要：众所周知，前端近几年闹了一场革命。这些问题反应了什么现象确实前端很火，引来了一批批新人。前端小白们如火如荼的学习着现在前端流行的新技术栈。写在最后所以啊，在目睹了很多白痴问题后，我终于发出了一声呐喊，答题救不了前端新人。 众所周知，前端近几年闹了一场革命。前端在编程领域也掀起了学习潮。至少在中国，从2013年下半年至今，在搜索指数上，有着爆炸式的增长。可以看下数据：百度指数，Googl...
摘要：众所周知，前端近几年闹了一场革命。这些问题反应了什么现象确实前端很火，引来了一批批新人。前端小白们如火如荼的学习着现在前端流行的新技术栈。写在最后所以啊，在目睹了很多白痴问题后，我终于发出了一声呐喊，答题救不了前端新人。 众所周知，前端近几年闹了一场革命。前端在编程领域也掀起了学习潮。至少在中国，从2013年下半年至今，在搜索指数上，有着爆炸式的增长。可以看下数据：百度指数，Googl...
摘要：背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多，投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗，待遇工 背景 个人背景 就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习 前端方向，自学，vue技术栈 时间背景 大概是在11月9日准备...
阅读 2194·2021-11-25 09:43
阅读 1058·2021-11-24 09:39
阅读 489·2021-11-23 09:51
阅读 2165·2021-09-07 10:18
阅读 1666·2021-09-01 11:39
阅读 2661·2019-08-30 15:52
阅读 2446·2019-08-30 14:21
阅读 2748·2019-08-29 16:57
