前端应该知道的基本知识

2019年9月3日 154次阅读 来源: yuyongyu

前端时间在部门内进行分享，准备素材时偶然发现下面的一个现象，因为和当时分享的主题无关，就先记下来了，事后重新审视，并把一些思考记录如下：

一、问题

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写过什么东西？直接鄙视他！

    原文作者：yuyongyu
    原文地址: https://segmentfault.com/a/1190000016492851
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞