作为前端必备知识点，怎么能不会DOM节点操作呢，今天我们来学一下DOM节点操作吧~
学习参考：
https://www.cnblogs.com/yinshuige/p/5812095.html
https://zhuanlan.zhihu.com/p/148070585
https://blog.csdn.net/alex_wen2014/article/details/101962054
https://blog.csdn.net/qq_42127861/article/details/82145842

一、什么是DOM？

DOM就是文档对象模型，是针对于xml但是扩展用于HTML的应用程序编程接口，定义了访问和操作HTML的文档的标准。
文档对象模型( DOM, Document Object Model )主要用于对HTML和XML文档的内容进行操作。DOM描绘了一个层次化的节点树，通过对节点进行操作，实现对文档内容的添加、删除、修改、查找等功能。

DOM树有两种，分别为节点树和元素树。

• 节点树：把文档中所有的内容都看成树上的节点；
• 元素树：仅把文档中的所有标签看成树上的节点。

一. 为什么要使用正则表达式呢？

通过使用正则表达式，可以：

1. 测试字符串内的模式。
   例如，可以测试输入字符串，以查看字符串内是否出现电话号码模式或信用卡号码模式。这称为数据验证。

2. 替换文本。
   可以使用正则表达式来识别文档中的特定文本，完全删除该文本或者用其他文本替换它。

3. 基于模式匹配从字符串中提取子字符串。
   可以查找文档内或输入域内特定的文本。

正则表达式(regular expression) 描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

例如，创建一个正则表达式：

let re = /ab+c/
// 或者
let re = new RegExp("ab+c", 'g')//ab+c/g
/* 
g 是全局搜索; 
i 不区分大小写;
m 多行搜索; 
s 允许 . 匹配换行符; 
u 使用unicode码的模式进行匹配; 
y 执行“粘性”搜索,匹配从目标字符串的当前位置开始，可以使用y标志。*/

EventLoop详解

什么是进程与线程？

相信大家经常会听到 JS 是单线程执行的，但是你是否疑惑过什么是线程？
讲到线程，那么肯定也得说一下进程。本质上来说，两个名词都是 CPU 工作时间片的一个描述。

• 进程描述了 CPU 在运行指令及加载和保存上下文所需的时间，放在应用上来说就代表了一个程序。
• 线程是进程中的更小单位，描述了执行一段指令所需的时间。

把这些概念拿到浏览器中来说，当你打开一个 Tab 页时，其实就是创建了一个进程，一个进程中可以有多个线程，比如渲染线程、JS 引擎线程、HTTP 请求线程等等。当你发起一个请求时，其实就是创建了一个线程，当请求结束后，该线程可能就会被销毁。

Webpack引入原因

1.在网页中会引用哪些常见的静态资源？

• JS
  .js .jsx .coffee .ts（TypeScript 类 C# 语言）
• CSS
  .css .less .sass .scss
• Images
  .jpg .png .gif .bmp .svg
• 字体文件（Fonts）
  .svg .ttf .eot .woff .woff2
• 模板文件
  .ejs .jade .vue【这是在webpack中定义组件的方式，推荐这么用】

2.网页中引入的静态资源多了以后有什么问题？？？

• 网页加载速度慢， 因为 我们要发起很多的二次请求；
• 要处理错综复杂的依赖关系（比如bootstrap依赖于jQuery）

3.如何解决上述两个问题

• 合并、压缩、精灵图、图片的Base64编码
• 可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系；

webpack是一个js打包工具，不一个完整的前端构建工具。它的流行得益于模块化和单页应用的流行。webpack提供扩展机制，在庞大的社区支持下各种场景基本它都可找到解决方案。

圣杯布局和双飞翼布局

圣杯布局和双飞翼布局一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》。 比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。

圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样：

• 圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，
• 双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。

总结一下左边固定，右边自适应的两栏布局的七种方法。其中有老生常谈的float方法,BFC方法，也有CSS3的flex布局与grid布局。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。
常用的宽度自适应的方法通常是利用了block水平的元素宽度能随父容器调节的流动特性。另外一种思路是利用CSS中的calc()方法来动态设定宽度。还有一种思路是，利用CSS中的新型布局flex layout与grid layout。

首先创建基本的HTML布局和最基本的样式。

<div class="wrapper" id="wrapper">
  <div class="left">
    左边固定宽度，高度不固定 </br> </br></br></br>高度有可能会很小，也可能很大。
  </div>
  <div class="right">
    这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</br>
    基本的样式是，两个div相距20px, 左侧div宽 120px
  </div>
</div>

同源与同源策略

我们知道，同源指的是协议、域名、端口号全部相同。同源策略（Same Origin Policy）是一种约定，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能都可能会受到影响。浏览器引入同源策略主要是为了防止XSS，CSRF攻击。
Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略是处于对用户安全的考量的，如果缺少了同源的限制，那又怎么能够确定别人的网站始终对你是友好的呢。

针对非同源的情况制定了一些限制条件:

1. 无法读取不同源的cookie、LocalStorage、indexDB。
2. 无法获得不同源的DOM。
3. 不能向不同源的服务器发送Ajax请求。

在浏览器中，script、img、iframe、link等标签都可以跨域加载资源，而不受同源策略的限制。事实上，在大多数情境下，我们经常是需要借用非同源来提供数据的，所以这就要用到跨域方面的技术了。

实现两个类 A 和 B, 且B类继承自A类，B类的实例可以调用A类的方法

1. 借用构造函数继承：

用.call()和.apply()将父类构造函数引入子类函数；
call() 方法：B.call(A, args1,args2);即A对象调用B对象的方法；
apply() 方法：用作 this 的对象和要传递给函数的参数的数组 B.apply(A, arguments);即A对象应用B对象的方法

function A(propertyA){
    this.propertyA=propertyA;
    this.fn1 = function(){

    };
}
function B(propertyB){
    A.call(this,args1,args2);//A.apply(this,[])
    this.propertyB = propertyB;
}
var b1 = new B("大毛");　　
b.fn1();

在说明如何判断一个对象为数组类型前，我们先巩固下js的数据类型，
js一共有六大数据类型：number、string、object、Boolean、null、undefined。

var str="string";
console.log(typeof str); //string
var num=1;
console.log(typeof num); //number
var bn=false;
console.log(typeof bn); //boolean
var a;
console.log(typeof a); //undfined
var obj = null;
console.log(typeof obj); //object
var doc = document;
console.log(typeof doc);//object
var arr = [];
console.log(arr); //object
var fn = function(){};
console.log(typeof fn); //function  

除了前四个类型外，null、对象、数组返回的都是object类型；对于函数类型返回的则是function，再比如typeof(Date)，typeof(eval)等。

接下来进入正题，js判断数组类型的方法。

ES5

String.fromCharCode()

该方法的参数是一系列Unicode码点，返回对应的字符串

charAt()

该方法返回指定位置的字符，参数是从0开始编号的位置

str.charAt(index)  

index 为必须参数，类型为number（0到str.length-1之间，否则该方法返回 空串）另外：str.charAt()即不带参数和str.charAt(NaN)均返回字符串的第一个字符