前端最最最最基础的面试题

小鹿小陆
216 阅读27分钟

HTML

1.请简单介绍下你对HTML语义化的理解。

语义化就是正确的标签做正确的事情。让合适的标签在合适的位置上出现。

开发的好处：方便后期维护

搜索引擎的好处：方便seo优化

2.你做过的项目都在哪些浏览器上测试过，这些浏览器的内核是什么？

Chrome webkit

Firefox Gecko

IE Trident

Opear presto

Safari webkit

国内：

谷歌 360 腾讯体系

3.Quirks模式是什么，和Standards模式有什么区别。

怪异盒和标准模式

4.img标签的alt属性和title属性有什么区别。

Title：鼠标悬浮,提示的文字

Alt 图片加载失败

5.你能描述一下渐进增强和优雅降级的不同吗？

6.请说一下src和href属性的区别。

Href是引入文档资源，建立链接关系

Src是下载外部资源

7. 谈谈从前端角度出发，如何做好seo优化。

  1. 设置好关键字

    1. alt title
    2. keywords description img

  2. a标签

  3. txtt-indent

8.在HTML中常用的语义化标签有哪些。

header footer main aside article ul li ol li h1 - h6

9.请说说你所知道的HTML中video标签的属性。

Loop

Controls

Muted

10.如果你需要同时兼容低版本浏览器和正常的浏览器，你需要怎么办？

保证标签都有效果

保证布局不混乱

高版本注重展示效果，低版本注重基本功能

11.如果一个HTML文档并没有设置文档声明头，会发生什么？

怪异模式 降级处理

12.在HTML中如何设置视口。

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

13.如果在一个网页中引入一个icon图标。

 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

14.script标签的async属性和defer属性有什么作用。

  1. 阻塞gtml

    • 什么都不加阻塞
    • asnyc可能阻塞
    • deffer 不可能阻塞

  2. 阻塞js

    • 什么都不加 阻塞
    • asnyc 不阻塞
    • 可能阻塞

CSS

1.请说一下你所知道的CSS3选择器。

  1. css2

    • id class 标签 *
    • 组合：后代选择器，子元素选择器，兄弟选择器

  2. 属性选择器

    • div[title]
    • div[title = 'abc']
    • div[title* = 'abc' ]

  3. 伪类选择器

    • first-child
    • last-child
    • nth-child

2.rgba和opacity有什么区别。

  • rgba除了设置不透明度 还能设置颜色 opacity只能设置不透明度
  • rgba不会影响内容 opacity会影响内容

3.请说一下你所常用的伪类选择器。

  • :hover
  • :link
  • :active
  • :firsr-child

4.在css中如何计算选择器的权重。

首先需要判断是否继承，如果是继承就看谁离目标元素近，越近权重越大。

其次看id,class,标签名选择器的个数，可以把id选择器当做数字100，类选择器当做数字10，标签名选择器当成数字1，然后计算，数字越大，权重越大。

5.请解释一下标准盒子模型和怪异盒子模型的区别，如何切换盒子模型。

  • box-sizing: border-box; 怪异盒子模型
  • box-sizing: content-box; 标准盒子模型

6.元素设置了浮动之后，会带来哪些变化(浮动有什么特点)？

  • 元素会脱标
  • 块级元素不会默认占满父元素的100%
  • 不再独占一行可以和其他元素并排显示
  • 可以设置宽度和高度（任何元素都可以）
  • 不在文档流中占据位置
  • 没有脱离文本流（文字环绕内容元素）

7.如何清除浮动带来的影响。

  1. .clearfix:: after { content: ''; clear: both; visibilty: hidden;height: 0;  }

  2. <div style="overflow:hidden">

8.定位有哪几种，分别有什么特点。

  1. 定位分类：

    • 相对定位
    • 绝对定位
    • 固定定位
    • 粘性定位

  2. 特点

    相对定位

    • 不脱离标准文档流
    • 以自身的位置进行位移
    • 可以作为其他定位元素的参考元素

绝对定位

  • 脱离标准文档流

  • 位移需要参考元素

    • 如果没有参考元素，则以body为参考

      • left right 左右
      • top首屏左上角
      • bottom首屏左下

    • 如果有参考元素，则以参考元素为参考

      • 只有父元素或者祖先元素 身上设置了绝对定位、相对定位、固定定位的元素才可以做参考
      • 设置了static没效果

9. z-index是做什么的，在使用的时候有什么需要注意的地方。

在网页中的层级关系。(如果一个元素没有设置定位，那么就不能使用z-index设置层级关系)

注意：

  • 必须设置了绝对定位、相对定位、固定定位、粘性定位 才可以使用z-index
  • 如果两个子元素发生了重叠，那么真正决定层级关系的是父元素的z-index

10.请简单说一下margin塌陷这种情况。

两个块级元素上下排列，这两个 元素的margin会发生重叠，取最大值。

11.如果想要让一个子元素在父元素中进行位移，该如何通过margin移动，如果使用的是padding，有什么需要注意的地方。

  • 子元素在父元素中移动位置，可以通过margin,但是父元素必须设置border。
  • 设置padding进行移动，那么一定要设置一个box-sizing。

12.在css3中如何设置一个盒子的内部阴影。

<style>
.box{
    width:100px;
    height:100px;
    background-color: #FFF;
    box-shadow: 0 0 10px red;
}
</style>
​
<body>
    <div class='box'></div>
</body>

13.使用transform位移和使用position进行位移有什么区别。

  • position会触发回流。
  • transform进行位移(translate), gpu加速

14.请说一下你对响应式网页的理解，什么样的网站适合采用响应式开发。

  • 响应式网页就是一套代码能够让程序适配不同宽度的屏幕设备。

  • 是一种解决方案，不是单指某项技术。

  • 实现响应式的方式有很多，比如百分比布局、栅格布局。。。。

    • 以大屏幕为基准进行开发，逐渐缩小屏幕
    • 通过媒体查询引入不同的css，比如768以上使用pc端布局的css，以下使用phone端布局css。
    • pc端布局使用px+媒体查询。
    • 移动端布局使用rem / vw+媒体查询。

  • 响应式网页开发并不适合页面结构过于复杂的网站，比如电商，例如淘宝京东等等 。比较适合页面布局简约的企业站。

  • 问题：如果我就想要一个同时适配移动端和pc端的电商网站该怎么办？

    • 分开做，做两套。
    • 用户访问网站的时候，判断用户的屏幕宽度，然后跳转到不同的域名，打开不同的项目。
    • 比如用户屏幕宽度较窄，是移动端设备的宽度范围，那么就表转到m.xxx.com，也就是移动端项目。

15.请说一下%、em、rem、vw这几个单位。

px：绝对单位，页面按精确像素展示

em如果没有对行内文本设置尺寸，参考浏览器默认尺寸

rem 参考的是html根元素font-size的值

vw 参考浏览器的窗口 PC端相对于浏览器的可视区域 移动端就是布局视口

16.如何在网页中嵌入一个自定义字体。

使用 font-face

17.请简单介绍一下精灵图，以及你为什么使用精灵图。

  • 多张小图合在一起
  • Background-position
  • 为什么使用精灵图
  • 减少http请求次数

18.你是否使用过animation,请简单对animation做一个介绍，以及说一下你所知道的一些属性。

  • 它可以仅仅通过css不需要js配合就能实现一些动画效果，让元素动起来。属于css3的系列属性。

  • 属性

    • 调用关键帧
    • 设置过度效果
    • 动画速度

19.order属性有什么作用，请说说看。

在不改变代码结构的前提下，能改变元素渲染顺序。

20.在移动端的场景下，如何使用flex设置一个头尾固定，中间滚动的布局效果。

html,body{
    height:100%;
}
body{
    display:flex;
    flex-direction: column;
}
main{
    flex:1;
    overflow-y:auto
}

21.link和@import有什么区别。

link是标签。不仅可以加载CSS文件，还可以定义RSS、rel连接属性

@import 是CSS的语法，只能导入样式表

link和html一同加载 import引入的CSS在页面价载完毕后加载

link的权重高于@import

22.让元素消失的方法有几种

  • display:none
  • visibility:hidden
  • rgba(0,0,0,0)
  • opacity: 0
  • width:0 ,height:0
  • transfrom:scale(0)

23.css3中有哪些新特性

  • 新的选择器

  • 新的布局方案

    • flex
    • grid

  • 动画与过度

  • 阴影

  • 渐变

  • 圆角

  • border

  • background新的属性

  • 嵌入字体

  • 颜色属性

  • ....

24. 简单说说什么是线性渐变

  • 渐变的特性

    • 从一个放行到另一个方向，呈线性

  • 角度或者方向

    • 默认是从上到下
    • 可以改变方向
    • 可以改变角度

  • 起始颜色和结束颜色

25.单行文本和多行文本的溢出隐藏

  • text-overflow:规定当文本溢出时，显示省略符号来代表被修剪的文本

  • wi-hite-space:设置文字在一行显示，不换行

    单行文本溢出效果

div{
    white-spase: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

多行文本溢出隐藏：

  • 动态计算使用after伪元素+定位 + 渐变(图片) + content
  • JS动态计算

26.块级元素和行内元素有什么区别，如何进行转换

  • 块级元素

    • 独占一行（默认会沾满父元素宽度的百分百）
    • 可以设置宽高

  • 行内元素

    • 和其他行内或者行内块并排显示(行内元素的宽度为内容的总宽度，高度为行高)
    • 行内元素是不能设置宽度和高度的。

相互转换：display

27.inline-block有什么特点，设置之后如何解决它存在的问题。

  • 可以设置宽度和高度
  • 可以和其他的行内样式或行内元素并排显示

两个行内块之间大概存在3px的间隙空白折叠

28.css中有哪些属性可以继承

和文本、字体相关的

29.如何用css画出一个三角形

<style>
  .box {
      display: inline-block;
      border: 60px solid lavender;
      border-color: red transparent transparent transparent;
  }
</style>
</head>
<body>
    <div class="box">
​
    </div>
</body>

30.网页开发的时候，为什么要初始化css

  • 去除标签的多余的默认样式。
  • 抹平不同浏览器之间的标签显示差异。
  • 预定义一些css

31.li与li之间的空白是什么造成的，如何解决。

空白间隙可以将元素脱标，就解决了

32.一个元素同时设置了左浮动和绝对定位，会有什么效果，display的结果是什么。

  • 浮动会失效
  • display会变成bolck

JavaScript

1.JavaScript是弱类型语言还是强类型语言？强类型语言和弱类型语言之间有什么区别。

  • 弱类型

  • 区别

    • 强类型在声明的过程中需要标明类型
    • 类型一旦确定就不能修改类型，也不能存储其他类型的值。

2.JS是在浏览器上是由哪几个部分组成。

  • ES核心语言
  • DOM
  • BOM

3.什么是JS的宿主环境，JS常见的宿主环境有哪些。

  • JS运行环境

  • 宿主环境

    • 浏览器
    • node

4.在一个网页中如何使用JS脚本，有几种方式，你觉得哪种方式更为合适。

  • 在网页中嵌套script标签
  • 引入外部文件
  • 标签属性值中标注js

5.JS中声明变量的方式有几种，各有什么特点

  • 三种

  • let const var

  • 区别

    • var和let const的区别

      • var声明的变量存在变量提升。
      • 声明的变量可以是全局变量、局部变量。
      • var 声明的变量可以重新声明、重新赋值。
      • let 和 const 声明的变量不存在变量提升。
      • 定义的变量永远只能是块级变量。
      • let 、const声明的变量不能重新声明(暂时性死区)，let声明的变量可以重新赋值，const不行
      • var全局下声明的变量会默认被挂载到window上，let、const不会。

6.JS中的数据类型包括哪些，有什么区别。

  • 基础数据类型(简单数据类型)

    • String、Number、Boolean、Null、Undefined、Symbol

  • 引用数据类型(对象数据类型/复杂数据类型)

    • Function、Array、Object、Set、Map...

8.JS中如何判断数据类型

  • typeof
  • instanceof
  • Object.protoType.toString.call()
  • constructor

9.0.1 + 0.2 是否等于0.3，如何解决这个问题

  • 不等于
  • 解决方案：都扩大10倍，然后在缩小10倍

10.JS中超过了Number表示的最大限制的数值，会变成什么

  • Infinity
  • -Infinity

11.你知道NaN吗，有什么特点，一般会出现在什么时候，如何判断一个变量是否是NaN。

  • 和任何人都不相等，包括自己。和任何人计算都等于NaN
  • 其他类型转换为Number失败的时候，都会变为NaN。
  • isNaN()

12.==和===的区别

  • 值相等，全等
  • == 会自动类型转换， === 不会

13.什么是逻辑短路，请简单介绍下，该如何利用逻辑短路实现需求。

  • 使用逻辑运算符&&或者||时，容易出现逻辑短路。
  • 比如，true || 不执行
  • false && 不执行
  • 比如给一个参数设置默认值就可以用到逻辑短路

14.in在JS中有什么作用

判断给定内容是否是对象当中的一个属性。如果在对象的原型上也会返回true。

15.typeof在判断类型的时候，有什么需要注意的地方。

  • typeof null ==> object typeof undefined ==> undefined
  • typeof function() {} ==> function
  • typeof []==> object

16.delete在js中是做什么的，使用的时候需要注意的内容

  • delete原本是用来删除对象的属性
  • 但是因为数组是一种特殊的对象，delet也可以删除数组元素
  • 必然形成稀疏数组

17.定义一个函数有几种方式？有什么区别

  • function fn (){}

    • 函数提升

  • const fn = () =>{}

    • 不能变量提升

  • new Function()

18.在函数中，如何获取函数的参数。如何获取形参的长度，如何获取实参的长度。

  • arguments
  • arguments.callee.length （形参个数）
  • arguments.length
  • rest ---> es6

19.请分别讲讲，在ES5中和ES6中，你都是如何设置可选参数的。

// es5
function fn1(a,b){
    a = a || 0
    b = b || 0
}
// es6
function fn2(a=0, b=0){}
​
// ts
function fn3(a:number,b?:number=0) {}

20.JS中有作用域一般有哪些

  • 全局
  • 块级
  • 局部

21.什么是高阶函数

高阶函数是指能够接受一个或者多个函数作为参数，并/或返回一个新的函数的函数。在JavaScript中，函数被视为一等公民，因此我们可以将他们传递给其他函数并从其他函数中返回他们。

22.++a和a++的区别

++a是先递增在赋值

a++是先赋值在运算

var a = 1
var b = ++a
console.log(a,b) // 2,2
​
var c = 1
var d = c++
console.log(c,d) // 2,1

23.use strict 是什么意思，有什么作用，使用的时候需要注意什么

"use strict"是一种严格模式（Strict Mode）的声明，可以放在脚本文件或函数的开头。它的作用是启用JavaScript的严格模式，以帮助开发者编写更加安全、高效的代码。

使用严格模式有以下好处：

  1. 错误检查更加严格：严格模式会对一些通常会被忽略或默默失败的错误进行报错，如未声明的变量、重复声明的变量、不允许对只读属性进行赋值等，从而减少代码中的错误。
  2. 禁止使用一些不安全的语法：严格模式下，一些被认为是不安全的语法或特性会被禁止使用，例如禁止使用this关键字指向全局对象，在函数中使用eval时不会在其所在作用域中创建新的变量等，有助于提高代码的可读性和安全性。
  3. 提高性能优化：严格模式下，编译器可以对代码进行更多优化，使得性能更高。例如在非严格模式下，允许对未声明的变量进行隐式全局变量的创建，可能会导致性能下降。

使用严格模式时需要注意以下几点：

  1. "use strict"是一个引导编译器进入严格模式的指示，需要放在脚本文件或函数的开头，否则可能会导致无效。
  2. 严格模式是以函数为单位的，如果在脚本文件中使用严格模式，则整个脚本文件都会被视为严格模式，如果只在某个函数中使用，则只有该函数会被视为严格模式。
  3. 一些老旧的JavaScript代码可能不适用于严格模式，因为严格模式下对一些语法和行为有更严格的要求。在使用严格模式之前，需要对现有代码进行仔细的测试和验证。

24.break、continue、return 分别有什么作用，都用在什么地方。

  • break语句用于立即终止循环或跳出代码块，跳出循环后会执行循环之后的代码，还可以结束switch语句
  • continue语句用于终止本次循环迭代，跳过剩余代码，进行下一次循环迭代。
  • return语句用于将结果或值从函数中返回，并终止函数的执行。

25.请简单介绍下try..catch..finally语句。

try{
    代码主体
} catch(err) {
    出错了会执行这里面的代码
    错误信息在err内
} finally {
    不管有没有出错都会执行这里面的代码
}

26.说出几个不会改变原数组的方法

slice

concat

filter

map

map

27.如何遍历一个数组

  • for
  • while
  • do...while
  • foreach
  • map
  • fillter
  • for of

28. 数组可以使用字符key吗，如果使用 了会怎么样

  • 可以使用
  • length将会失效，可能会生成数组空位

29.数组的length是可写，如果可写，修改length容易导致什么问题

  • 可写
  • 数组内容丢失，或者生成空位

30.有几种方式可以创建数组。

  • []
  • new Array
  • Object create([])
  • split

31.请说说JS中对象这个数据类型的特点。

  • key:value 键值对形式
  • 无序
  • key值是string或者symbol

32.如何访问一个对象的原型

  • Object.getPrototyOf()
  • obj.__ proto __

33.如何判断一个属性是自身自由属性还是从原型上继承过来的

  • hasOwnProperty
  • Object.keys() === > 判断是否在数组中

34.如何遍历对象

  • for in
  • Object.keys

35.请问正则中如何匹配所有的数字、非数字。

  • \d
  • \D
  • [0-9]

36.什么是正则的贪婪模式，如何避免贪婪模式

正则的贪婪模式是指正则表达式在匹配时尽可能多地匹配符合条件的字符。默认情况下，正则表达式会尽可能匹配更多的字符，即使用贪婪模式。

37.如何获取指定范围的随机数

const randomInt = Math.floor(Math.random() * (max - min + 1)) + min;

38.如何获取时间戳

  • Data.now()
  • const d = new Data(); d.getTime()

39.如何获取指定时间的时间戳

可以使用JavaScript的Date对象来获取指定时间的时间戳。以下是几种常见的方法：

  1. 使用Date对象的getTime()方法：
const specifiedDate = new Date('2023-08-16 12:00:00');
const timestamp = specifiedDate.getTime();
console.log(timestamp); // 输出时间戳，单位是毫秒
  1. 使用Date对象的方法：valueOf()或getTime()：
const specifiedDate = new Date('2023-08-16 12:00:00');
const timestamp = specifiedDate.valueOf();
console.log(timestamp); // 输出时间戳，单位是毫秒
​
// 或者
const timestamp = specifiedDate.getTime();
console.log(timestamp); // 输出时间戳，单位是毫秒
  1. 使用Date.now()方法获取当前时间的时间戳，然后进行运算：
const specifiedDate = new Date('2023-08-16 12:00:00');
const timestamp = Date.now(); // 获取当前时间的时间戳
const specifiedTimestamp = timestamp - specifiedDate.getTime();
console.log(specifiedTimestamp); // 输出指定时间的时间戳，单位是毫秒

以上方法中，getTime()、valueOf()和Date.now()都能够返回时间戳，单位是毫秒。你可以根据自己的需求选择适合的方法来获取指定时间的时间戳。

40.正则表达式一般用来干什么的

  • 字符串匹配查找

    • 用户名，密码，邮箱匹配
    • 爬虫
    • 表情

41.正则中表示或的方式有哪些

  • |
  • [123]

42.JS中的数据类型转换分成几种。分别发生在什么样的场景下。

  • 两种(强制类型转换、自动类型转换(隐式类型转换))
  • 强制：我想把A类型变成B类型
  • 隐式：if () + - * / ==

43.将一个字符串转换为数字的方式有哪些。

Number() parseInt parseFloat + - * /

44.parseInt()和Number()的区别。

parseInt()和Number()都是JavaScript中用于将字符串转换为数字的方法，但它们在处理字符串和返回结果方面有一些区别。

  1. parseInt()函数：

    • 适用场景：主要用于将字符串转换为整数。

    • 转换规则：

      • 从字符串的开头开始解析，直到遇到非数字字符为止。
      • 忽略前导空格。
      • 如果第一个非空格字符是正号或负号，也会被解析。

    • 返回结果：

      • 返回解析后的整数或NaN（当无法解析为数字时）。

    • 示例：

      console.log(parseInt("42")); // 输出 42
console.log(parseInt("3.14")); // 输出 3
console.log(parseInt("10px")); // 输出 10
console.log(parseInt("abc")); // 输出 NaN

  2. Number()函数：

    • 适用场景：它可以将字符串转换为整数或浮点数。

    • 转换规则：

      • 忽略前导空格和尾部空格。
      • 如果字符串中包含数字和其他字符，则返回NaN。

    • 返回结果：

      • 返回解析后的数字或NaN（当无法解析为数字时）。

    • 示例：

      console.log(Number("42")); // 输出 42
console.log(Number("3.14")); // 输出 3.14
console.log(Number("10px")); // 输出 NaN
console.log(Number("abc")); // 输出 NaN

注意事项：

  • 当传递空字符串或只包含空格字符的字符串时，parseInt()会返回NaN，而Number()会返回0。
  • parseInt()可以接收第二个参数，用于指定进制（如二进制、八进制、十六进制）进行解析，而Number()仅支持十进制解析。
  • 当处理十进制（包括整数和浮点数）时，Number()通常更推荐使用，因为其规则更加简单和明确。
  • 如果需要将字符串转换为整数或浮点数，请根据具体的需求选择合适的方法。

45.JS中绑定事件的方式有哪些。

  • onclick
  • addEventListener

46.如何给一组元素绑定事件。

  • 事件委托
  • 循环

事件委托（Event delegation）是一种在Web开发中常用的技术，它通过将事件处理程序绑定到它们的共同父元素上，以便处理子元素上触发的事件。而不是将事件处理程序直接绑定到每个子元素上。

当使用事件委托时，事件首先冒泡到父元素，然后在父元素上触发相应的处理程序。通过捕获事件冒泡的机制，我们可以在父元素上捕获到所有子元素触发的事件，并根据需要执行相应的操作。

47.说说你常用的event属性

  • clentX clentY
  • offsetWidth offsetHeight
  • offsetLeft offsetTop
  • target

48.如何获取网页中鼠标的坐标

clentX clentY

49.什么是事件冒泡，如何阻止事件冒泡

事件冒泡（Event Bubbling）和事件捕获（Event Capturing）是指在页面中的DOM元素触发事件后，事件传播到其父元素或子元素的过程。

事件冒泡（Event Bubbling）： 事件冒泡是从最内层的元素开始，先触发该元素上的事件，然后逐级向上冒泡触发父元素的事件，直到根元素。也就是说，事件会从子元素传递到父元素，逐级往上传递，按照DOM树的结构，最终触发根元素的事件。

事件捕获（Event Capturing）： 事件捕获是与事件冒泡相反的过程，即从根元素开始，先触发根元素的事件，然后逐级向下捕获触发子元素的事件，直到最内层的元素。也就是说，事件会从根元素向下捕获到子元素，逐级往下传递，按照DOM树的结构，最终触发最内层元素的事件。

在现代的浏览器中，事件的默认传播方式是事件冒泡。但是，可以通过addEventListener()方法的第三个参数来指定事件的传播方式，如：

  • useCapture参数为true时，表示采用事件捕获方式；
  • useCapture参数为false时（默认值），表示采用事件冒泡方式。

事件冒泡和事件捕获提供了一种机制，可以在元素层次结构中的不同层级上处理同一个事件。开发者可以根据实际需求，在事件的冒泡或捕获阶段中选择性地处理事件，以实现需要的效果。

50.如何阻止元素的默认行为

使用event.preventDefault()方法： 在事件处理程序中，可以使用event对象的preventDefault()方法来阻止元素的默认行为。例如，在点击链接时阻止链接的跳转行为 event.preventDefault();

document.getElementById("myLink").addEventListener("click", function(event) {
  event.preventDefault();
});

51.DOMContentLoaded和load事件有什么区别。

HTML 页面的生命周期包含三个重要事件：

  • DOMContentLoaded —— 浏览器已完全加载 HTML，并构建了 DOM 树，但像 <img> 和样式表之类的外部资源可能尚未加载完成。
  • load —— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。
  • beforeunload/unload —— 当用户正在离开页面时。

每个事件都是有用的：

  • DOMContentLoaded 事件 —— DOM 已经就绪，因此处理程序可以查找 DOM 节点，并初始化接口。
  • load 事件 —— 外部资源已加载完成，样式已被应用，图片大小也已知了。
  • beforeunload 事件 —— 用户正在离开：我们可以检查用户是否保存了更改，并询问他是否真的要离开。
  • unload 事件 —— 用户几乎已经离开了，但是我们仍然可以启动一些操作，例如发送统计数据。

52.什么是BOM和DOM包含哪些对象

BOM是Browser Object Model的缩写，中文名为浏览器对象模型。BOM提供了访问和操作浏览器窗口的方法和接口。

DOM是Document Object Model的缩写，中文名为文档对象模型。DOM提供了访问和操作文档内容的标准方法和接口。

BOM对象包括：window对象、document对象、location对象、navigator对象、screen对象和history对象

DOM对象包括：document对象、body元素、head元素、title元素、meta元素、link元素、img元素、input元素、select元素、textarea元素和button元素等 。

53.BOM和DOM的关系

BOM中包含DOM

54.如何获取url中的信息

您可以使用JavaScript中的window.location对象来获取URL中的信息。例如，要获取URL中的查询字符串，您可以使用window.location.search属性。以下是一个示例代码，它将返回URL中的查询字符串：

var url = window.location.href;
var queryString = url.split("?")[1];
console.log(queryString);

55.什么是文档碎片，使用文档碎片有什么好处

DoocumentFragment

文档碎片是一种虚拟的DOM节点，存在于内存中，跟实际的DOM节点之间没有关系。当我们需要给一个节点中插入多个子节点的时候，完全可以将多个子节点先插入到文档碎片中，所有子节点都放到文档碎片中后，再将文档碎片一次性添加到需要插入的位置，这样避免了回流大大减少DOM操作，提高性能 。

56.在JS中如何获取一个网页元素，有哪几种方式

  • id
  • class
  • 标签名
  • name
  • 选择器

57.children和childNodes有什么相同点和不同点。

在js中节点包含：

  • 文本
  • 注释
  • 换行
  • 空格
  • 标签
  • 属性
  • ...

children获取的是子元素，childNodes获取的是子节点

<ul>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
</ul>
​
<script>
    const lis = document.querySelector('ul').childNodes
    console.log(lis)
</script>

58. 如何在JS中获取和设置属性，有哪几种方式

  • getAttribute()
  • setAttribute()
  • dataset()
  • window.getComoutedStyle()

a8d82939baad8a0a71fea9ade385d36

59.在JS中如何实现对节点的增删改查。

在JavaScript中，可以通过以下方法实现对节点的增删改查：

  1. 增加节点：

    • 创建新节点：使用createElement()方法创建一个新的元素节点；
    • 添加子节点：使用appendChild()或insertBefore()方法将新节点添加到指定位置。

  2. 删除节点：

    • 删除子节点：使用removeChild()方法删除指定子节点；
    • 删除父节点：使用remove()方法删除指定父节点。

  3. 修改节点：

    • 修改属性值：使用setAttribute()方法修改指定属性的值；
    • 修改文本内容：使用textContent或innerText属性修改节点的文本内容。

  4. 查询节点：

    • 通过ID查找：使用getElementById()方法根据ID查找节点；
    • 通过类名查找：使用getElementsByClassName()方法根据类名查找节点；
    • 通过标签名查找：使用getElementsByTagName()方法根据标签名查找节点；
    • 通过CSS选择器查找：使用querySelector()和querySelectorAll()方法根据CSS选择器查找节点。

以下是一些示例代码：

// 创建新节点
var newNode = document.createElement("div");
newNode.innerHTML = "这是一个新节点";
document.body.appendChild(newNode);
​
// 添加子节点
var parentNode = document.getElementById("parent");
var childNode = document.createElement("p");
childNode.innerHTML = "这是一个子节点";
parentNode.appendChild(childNode);
​
// 删除子节点
parentNode.removeChild(childNode);
​
// 修改属性值
var element = document.getElementById("elementId");
element.setAttribute("class", "newClassName");
​
// 修改文本内容
var element = document.getElementById("elementId");
element.textContent = "新的文本内容";
​
// 查询节点
var elements = document.getElementsByClassName("className");
var elements = document.querySelector("#elementId");
var elements = document.querySelectorAll(".className");

60.如何克隆一个节点

在JavaScript中，可以使用cloneNode()方法来克隆一个节点。cloneNode()方法返回调用该方法的节点的一个副本。如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。如果括号参数为true，则是深拷贝，即会克隆该节点及其所有后代节点 。

以下是一些示例代码：

// 克隆当前节点
var clonedNode = node.cloneNode(true);
​
// 浅拷贝当前节点
var shallowCloneNode = node.cloneNode();

61.如何对数据进行序列化和反序列化

JSON.stringify()方法可以将JavaScript对象转换成JSON字符串。这个方法与JSON.parse()方法正好相反，可以将JSON字符串解析成JavaScript对象。

以下是一些示例代码：

// 将JavaScript对象序列化为JSON字符串
var obj = {name: "Tom", age: 20};
var jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出："{"name":"Tom","age":20}"
​
// 将JSON字符串解析为JavaScript对象
var parsedObj = JSON.parse(jsonString);
console.log(parsedObj); // 输出：{name: "Tom", age: 20}

62.什么是同源策略，非同源策略会怎么样

两个域名，当协议，域名，端口号其中有一个不一样就是非同源，非同源会触发跨域请求

63.常用的解决跨域问题的方案

  • jsonp
  • cors白名单
  • 代理
  • websocket
  • ....

64.在js中什么是作用域，作用域有哪几种

在js中作用域就是代码生效的范围，在es6中作用分为全局作用域，局部作用域和块级作用域这三种

怎么创建作用域：

function {} IIFE

65.什么是变量提升和函数提升

在js解析代码之前，会通读一遍代码，在这个过程中，js将函数和通过var声明的变量提升到当前作用域最顶端，这样就可以在声明代码之前去使用。这就是变量提升和函数提升。注意当我们使用函数表达式创建函数时候，这时候也会发生函数提升，只不过是将函数体和生命变量提升了赋值的等号还有没提升，所以函数表达式声明的函数不能再定义之前使用。

avatar
文章
阅读
粉丝