前端应该知道的基本知识

前端时间在部门内进行分享,准备素材时偶然发现下面的一个现象,因为和当时分享的主题无关,就先记下来了,事后重新审视,并把一些思考记录如下:
一、问题
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写过什么东西?直接鄙视他!

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据