2024 前端面试题（GPT回答 + 示例代码 + 解释）No.1 - No.20

时间：2024-02-18 15:50:05

本文题目来源于全网收集，答案来源于 ChatGPT 和 博主（的小部分……）

格式：题目 h3 + 回答 text + 参考大佬博客补充 text + 示例代码 code+ 解释 quote + 补充 quote

目录 No.1 - No.20

    • 本文题目来源于全网收集，答案来源于 ChatGPT 和 博主（的小部分……）
      • 格式：题目 h3 + 回答 text + 参考大佬博客补充 *text* + 示例代码 ```code```+ 解释 quote + 补充 quote
      • 1. 简述一下你对 HTML 语义化的理解？
          • 补充：SEO表现
      • 2. 谈谈 Iframe ？
      • 3. 介绍一下 CSS 的盒子模型？
      • 4. 讲讲 css 选择器的优先级？
      • 5. 垂直居中几种方式？
      • 6. CSS link 与 @import 的区别和用法？
      • 7. 谈谈元素的隐藏方式及其区别（display:none visibility:hidden rgba opacity）
      • 8. relative和absolute分别是相对于谁进行定位的？
      • 9. 画一条0.5px的直线？（个人觉得似乎有点不妥？）
      • 10. 1rem、1em、1vh、1px、1rpx各自代表的含义？
      • 11. HTML5、CSS3 里面都新增了那些新特性？
        • HTML5 新特性：
        • CSS3 新特性：
      • 12. JS 数据类型有哪些? || JS 有哪些内置对象？
        • 原始数据类型（Primitive data types）：
        • 引用数据类型（Reference data types）：
      • 13. 基本数据类型和引用数据类型有什么区别？
        • 基本数据类型（Primitive data types）：
        • 引用数据类型（Reference data types）：
      • 14. innerHTML 和 innerText 和 documen.write 的区别
        • `innerHTML`：
        • `innerText`：
        • `document.write()`：
      • 15. JavaScript 由哪三部分组成：
      • 16. DOM 元素e的 e.getAttribute(propName)和 e.propName 有什么区别和联系？
        • 区别：
        • 联系：
      • 17. offsetWidth / offsetHeight, clientWidth / clientHeight, scrollWidth / scrollHeight 的区别?
      • 18. 检测浏览器版本版本有哪些方式？
      • 19. 元素节点、文本节点、属性节点的nodeType、nodeName、nodeValue分别是什么？
      • 20. HTTP 请求的时候 get 和 post 方式的区别？

1. 简述一下你对 HTML 语义化的理解？

HTML语义化是指在编写网页代码时，选择恰当的HTML标签来表达文档的结构和内容含义，而不是仅仅为了实现特定的样式效果。通过使用语义化的标签，我们可以提高代码的可读性、可维护性和可访问性，同时有助于搜索引擎更好地理解页面内容。

HTML 语义化是指在编写 HTML 代码时，使用恰当的标签来传达文档结构和内容的含义、目的和作用，而不仅仅是为了呈现某种样式或布局效果。它可以提高代码的可读性、可维护性和可访问性，有助于用户和搜索引擎等对网页进行更准确和有效的解读。

具体来说，HTML 语义化的特点包括：

  1. 使用恰当的标签：根据文档结构和内容的含义，选择适合的 HTML 标签来标记元素，如 <article>、<section>、<header>、<nav>、<aside>、<footer> 等。
  2. 按重要性排序：将页面中的内容按照重要性排序，先显示最重要的内容，后显示较不重要的内容，可以使用 <h1> 到 <h6> 标签表示标题的重要性。
  3. 避免滥用无语义的标签：尽量避免使用 <div> 和 <span> 等无语义的标签来布局，而是使用具有语义含义的标签来表达意图。
  4. 使用 alt 属性：对于图片等非文本内容，应该使用 alt 属性来提供替代文本，以便于屏幕阅读器等工具能够正确地解读和呈现。
  5. 表示关联关系：使用 <a> 标签来表示链接，同时利用 href 属性来指定链接地址，title 属性来提供额外信息，rel 属性来表示关联关系等。

HTML 语义化的优点包括：

  1. 增强可读性：使用语义化的标签可以使代码更加易读易懂，更符合人类阅读习惯，也有助于其他开发者快速理解和维护代码。
  2. 提高可访问性：语义化的 HTML 代码可以提高网站的可访问性，使得视障用户、搜索引擎等能够更准确地解读网页内容。
  3. 便于 SEO：搜索引擎会根据页面内容的语义结构来评估网站的质量，因此语义化的 HTML 代码能够提高网站的 SEO 效果。
  4. 方便维护：使用语义化的 HTML 代码可以使得代码更容易维护和修改，因为代码的结构和意图更加清晰和明确。

总之，HTML 语义化是一种良好的编程实践，有助于提高网站的质量、可访问性和可维护性，值得开发者在日常工作中积极应用。

补充：SEO表现

SEO（Search Engine Optimization，搜索引擎优化）表现指的是网站在搜索引擎中的排名和展示情况。一个网站的良好SEO表现意味着它在搜索引擎结果页面（SERP）中能够获得较高的排名，吸引更多的有意向访问者。
良好的SEO表现通常包括以下几个方面：

  1. 排名优化：网站在搜索引擎中的关键词排名靠前，特别是在重要关键词上获得较高位置。
  2. 流量增长：通过搜索引擎带来的有机流量增加，即用户通过搜索引擎输入相关关键词后点击进入网站的访问量增加。
  3. 点击率提升：搜索结果中网站的标题和描述吸引用户点击的概率增加，提高搜索结果的点击率。
  4. 页面曝光：网站的页面数量被搜索引擎索引的程度增加，提高网站在搜索引擎中的曝光度。
  5. 用户满意度：网站内容质量、页面加载速度、用户体验等因素得到优化，提升用户对网站的满意度和停留时间。

这些因素综合起来，可以帮助网站获得更多的有机流量和有效的访问，从而提升网站的知名度、品牌价值和业务转化率。SEO表现不仅仅关注排名，更注重如何通过优化网站内容、结构和用户体验等方面，为用户提供有价值的信息和良好的访问体验。

2. 谈谈 Iframe ？

Iframe是HTML中的一个标签，用于在网页中嵌入其他独立的HTML文档或外部内容。可以使用Iframe来实现在网页中嵌入视频、地图、表单等内容。比如，可以通过在Iframe的src属性中指定Bilibili视频或Baidu地图的URL来将它们嵌入到网页中。此外，也可以利用Iframe来在网页中实现广告展示、内嵌其他网站的内容等功能。对于Iframe的使用，要注意设置合适的尺寸、避免对页面布局产生混乱，以及关注对网页性能、安全性和可访问性的影响。在实际开发中，要根据具体的需求和最佳实践来灵活运用Iframe，并权衡其优缺点来达到最佳的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iframe Example</title>
</head>
<body>
    <h1>嵌入视频示例</h1>
    <p>以下是一个嵌入视频的示例：</p>
    <iframe width="560" height="315" src="https://www.bilibili.com/video/BV1V3411N7a2" frameborder="0" allowfullscreen></iframe>
</body>
</html>

Iframe（Inline Frame）是HTML中的一个标签，用于在一个网页中嵌入另一个独立的HTML文档。使用Iframe标签可以实现在当前页面内嵌入其他网页、广告、地图等内容。Iframe的优缺点如下：

  • 优点：
    可嵌入任何类型的文档：Iframe可以嵌入任何类型的文档，包括视频、音频、地图、表单等。这使得在一个网页中集成多种类型的内容变得更加容易。
    让网页加载更快：Iframe可以让网页的不同部分分别加载，这样可以提高网页的响应速度和性能。
    增强了页面的交互性：通过Iframe在网页中嵌入互动性的内容，例如视频、表单或游戏，可以增强网页的交互性和吸引力。
    提供了一定的隔离性：由于被嵌入的文档在Iframe中运行，因此可以提供一定的隔离性，防止外部脚本或代码对主页面造成影响。
  • 缺点：
    会导致网页布局混乱：如果Iframe的尺寸没有设置好，或者被嵌入的文档尺寸发生变化，可能会导致网页布局混乱。
    降低了网页的可访问性：Iframe中的内容对于搜索引擎不友好，可能会影响页面的SEO表现和可访问性。此外，屏幕阅读器等辅助技术也可能无法识别Iframe中的内容。
    可能会降低网页的安全性：通过Iframe嵌入的文档可能包含恶意脚本或代码，从而导致网页的安全性受到威胁。
    不利于网页的响应式设计：由于Iframe的尺寸固定，因此不容易进行响应式设计，这可能会对移动设备用户造成不便。

总的来说，Iframe是一种方便的HTML元素，可以在网页中嵌入其他类型的文档。但是，在使用它时需要权衡其优缺点，并谨慎考虑其对网站性能、安全性和可访问性的影响。

3. 介绍一下 CSS 的盒子模型？

CSS 盒子模型是指在网页布局中，将每个元素看作一个矩形的盒子，这个盒子包含内容、内边距、边框和外边距四个部分。具体来说，它包括内容区域、内边距、边框和外边距这四个部分。内容区域是盒子的实际内容，内边距是内容与边框之间的空间，边框用于界定内容区域的边界，而外边距则是盒子与相邻元素之间的空白区域。
在 CSS 中，盒子模型有两种标准：标准盒子模型和 IE 盒子模型。标准盒子模型计算元素的宽度和高度仅包括内容区域，不包括内边距、边框和外边距；而IE 盒子模型计算宽度和高度包括内容区域、内边距和边框，但不包括外边距。我们可以通过 box-sizing 属性来指定使用哪种盒子模型。

CSS 的盒子模型是指在 Web 页面中，每个元素（如文本、图像、块级元素等）都被看作是一个矩形的盒子，这个盒子包含内容、内边距、边框和外边距四个部分。这些部分的组合形成了元素在页面中所占据的空间。
盒子模型的四个部分如下：

  1. 内容区域（Content）：盒子的实际内容，例如文本或图像。
  2. 内边距（Padding）：内容区域与边框之间的空间，可以通过 CSS 属性设置。
  3. 边框（Border）：内边距之外的边框，用于界定内容区域的边界。
  4. 外边距（Margin）：盒子与相邻元素之间的空白区域，可以通过 CSS 属性设置。

在 CSS 中，可以通过设置不同的属性来控制盒子模型的各个部分，例如：

  • padding 属性用于设置内边距的大小；
  • border 属性用于设置边框的样式、宽度和颜色；
  • margin 属性用于设置外边距的大小。

盒子模型在页面布局和设计中起着重要作用，通过调整盒子模型的不同部分，可以控制元素之间的间距、边框样式以及元素的尺寸和位置。理解和熟练运用盒子模型是开发网页布局的基础之一。
在 CSS 中，盒子模型主要有两种标准：标准盒子模型（Content Box）和IE 盒子模型（Border Box）。它们在计算元素的宽度和高度时略有不同。

  1. 标准盒子模型（Content Box）：
  • 元素的宽度（width）和高度（height）仅包括内容区域，不包括内边距（padding）、边框（border）和外边距（margin）。
  • 计算公式：width/height = content width/height
  1. IE 盒子模型（Border Box）：
  • 元素的宽度（width）和高度（height）包括内容区域、内边距（padding）和边框（border），但不包括外边距（margin）。
  • 计算公式：width/height = content width/height + padding + border

在 CSS 中，可以通过 box-sizing 属性来指定使用哪种盒子模型：

  • box-sizing: content-box;：使用标准盒子模型（默认值）
  • box-sizing: border-box;：使用IE 盒子模型
    选择不同的盒子模型取决于布局需求和个人偏好。使用 IE 盒子模型可能更便于控制元素的尺寸，因为内边距和边框不会影响元素的实际宽度和高度，而使用标准盒子模型则更符合传统的 CSS 盒子模型定义。

4. 讲讲 css 选择器的优先级？

在 CSS 中，选择器优先级用于确定当多个选择器同时应用于同一个元素时，哪个选择器的样式规则将被应用。CSS 选择器优先级是根据选择器的特定性和重要性来计算的。
特定性是用于衡量选择器的权重的一个值，它是由选择器中各种组件的数量和类型来决定的。通常，选择器中包含的ID 选择器的数量越多，特定性就越高，因为 ID 选择器是最具体的选择器。其次是类选择器和属性选择器，再其次是标签选择器。
当特定性相等时，样式规则的顺序将起作用，后定义的规则将覆盖先定义的规则。但有一种情况例外，即使用!important声明的样式规则，它具有最高的优先级，可以覆盖其他所有规则。

大佬博客补充： 通配符 继承 浏览器默认属性

<-- CSS选择器优先级按照以下规则进行计算：-->

1. 内联样式（Inline Styles）：通过style属性直接添加到HTML元素中的样式具有最高的优先级。例如：-->
<p style="color: red;">这是一个红色的段落。</p>


2. ID选择器（ID Selectors）：使用#前缀定义的ID选择器具有较高的优先级。例如：
<style>
#myElement {
  color: blue;
}
</style>

3. 类选择器、属性选择器和伪类选择器（Class Selectors, Attribute Selectors, and Pseudo-Class Selectors）：类选择器、属性选择器和伪类选择器具有相同的优先级，它们通过.class、[attribute]或:pseudo-class来定义。
<style>
.myClass {
  color: green;
}
[type="text"] {
  font-weight: bold;
}
a:hover {
  text-decoration: underline;
}
</style>

4. 元素选择器和伪元素选择器（Element Selectors and Pseudo-Element Selectors）：元素选择器和伪元素选择器具有最低的优先级，它们通过元素名称或::pseudo-element来定义。例如：
<style>
h1 {
  font-size: 24px;
}
::first-letter {
  text-transform: uppercase;
}
</style>

5. 垂直居中几种方式？

在CSS中，有几种常见的方法可以实现垂直居中。一种常用的方法是使用Flexbox布局，通过设置父元素的display: flex; align-items: center; justify-content: center;，子元素就可以在垂直和水平方向上居中显示。
另一种方法是使用position和transform属性，可以将子元素相对于父元素进行绝对定位，并使用top: 50%; left: 50%; transform: translate(-50%, -50%);来使其在垂直和水平方向上居中。
此外，还可以使用Grid布局和表格布局来实现垂直居中。Grid布局可以通过设置父元素的display: grid; place-items: center;来实现居中，而表格布局可以使用display: table; vertical-align: middle;来实现垂直居中。

大佬博客补充：单行文本: line-height = height

<-- 在CSS中，实现垂直居中可以使用多种方式，以下是一些常见的方法：-->

1. 使用Flexbox布局：Flexbox是一种现代的布局方式，可以轻松实现元素的水平和垂直居中。通过设置父元素的display: flex;以及align-items: center; justify-content: center;，子元素就可以在垂直和水平方向上居中显示。
<style>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px; /* 需要有明确的高度 */
}
</style>

2. 使用Grid布局：类似于Flexbox，Grid布局也可以轻松实现元素的水平和垂直居中。通过设置父元素的display: grid; place-items: center;，子元素可以在垂直和水平方向上居中显示。
<style>
.container {
  display: grid;
  place-items: center;
  height: 300px; /* 需要有明确的高度 */
}
</style>

3. 使用position和transform：可以使用绝对定位和transform属性来实现垂直居中，这种方法适用于不知道高度的情况。
<style>
.container {
  position: relative;
  height: 300px; /* 父元素需要有明确的高度 */
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

4. 使用表格布局：可以将元素以表格的形式布局，然后使用vertical-align: middle;来实现垂直居中。
<style>
.container {
  display: table;
  height: 300px; /* 需要有明确的高度 */
}

.centered {
  display: table-cell;
  vertical-align: middle;
}
</style>

以上是一些常见的实现垂直居中的方法，每种方法都有其适用的场景，具体选择哪种方法取决于布局的需求和兼容性考虑。

6. CSS link 与 @import 的区别和用法？

Link 标签是 HTML 中的一个标签，用于将外部样式表链接到 HTML 文档。它支持并行加载，不会阻塞页面的渲染，并且可以定义多个 link 标签引入多个外部样式表，方便管理和维护。
@import 是 CSS 的指令，用于在 CSS 文件中引入外部样式表。它必须写在 CSS 文件的最前面，放在其他样式规则之前，并且会在页面加载时按顺序串行加载，可能导致页面加载速度较慢。
因此，一般情况下我们推荐使用 link 标签来引入外部样式表，因为它具有更好的性能表现和灵活性。而 @import 则适用于一些特殊需求，比如根据媒体查询条件加载不同的样式表。

大佬博客补充：link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持

CSS 中的 link 标签和 @import 指令都可以用来引入外部样式表，但它们有一些区别和不同的用法：

  1. Link 标签：
  • Link 标签是 HTML 中的一个标签，在 head 部分使用，用于将外部样式表链接到 HTML 文档。
  • 通过 link 标签引入的样式表会以并行方式加载，不会阻塞页面的渲染。
  • 可以定义多个 link 标签引入多个外部样式表，方便管理和维护。
    <link rel="stylesheet" type="text/css" href="styles.css">
  1. @import 指令：
  • @import 是 CSS 的一个指令，用于在 CSS 文件中引入外部样式表。
  • @import 必须写在 CSS 文件的最前面，放在其他样式规则之前。
    通过 @import 引入的样式表会在页面加载时按顺序串行加载，可能会导致页面加载速度较慢。
    @import url("styles.css");

主要区别：

  • Link 标签在 HTML 中使用，而 @import 是 CSS 的一部分，写在 CSS 文件中。
    -Link 标签支持并行加载，@import 会串行加载。
  • Link 标签没有特定的加载顺序要求，而 @import 必须写在 CSS 文件的最前面。

一般来说，推荐使用 link 标签来引入外部样式表，因为它具有更好的性能表现和灵活性。而 @import 则适用于一些特殊需求，比如根据媒体查询条件加载不同的样式表。

7. 谈谈元素的隐藏方式及其区别（display:none visibility:hidden rgba opacity）

首先，display: none可以完全移除元素并且不占据文档流中的位置。它对其他元素的布局没有影响，同时元素也不可见，无法与用户交互。

其次，visibility: hidden也可以隐藏元素，但仍然保留了元素在文档流中的位置。虽然元素不可见，但它仍然会影响其他元素的布局。

此外，我们还可以使用 rgba来设置元素的背景色为透明。通过将背景颜色的 rgba值的 alpha 通道设为 0，可以实现元素的隐藏。这种方式下，元素仍然占据位置，但不可见。与 visibility: hidden不同，元素可以与用户交互。

最后，opacity属性可以通过设置元素的透明度来隐藏元素。与前面的方法不同，opacity不会移除元素或改变其位置。元素仍然存在于文档流中，占据位置，但是变得透明不可见。与其他方式相比，opacity可以实现渐变效果的隐藏，同时仍然可以与用户交互。

示例测试代码：
<!DOCTYPE html>
<html>
<head>
  <style>
    #myButton {
      /* opacity: 0; */
      /* visibility: hidden; */
      display: none;
    }
  </style>
</head>
<body>
  <button id="myButton" onclick="alert('按钮被点击了！')">点击我</button>
  <script>
    document.getElementById('myButton').addEventListener('click', function() {
      alert('按钮被点击了！');
    });
  </script>
</body>
</html>

8. relative和absolute分别是相对于谁进行定位的？

position: relative定位是相对于元素自身在文档流中的位置进行定位。换句话说，元素的定位参考点是自身，通过设置 top、right、bottom 和 left 属性来调整元素的位置，但不会影响其他元素的布局。

position: absolute定位是相对于元素最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于最初包含它的块级容器（通常是 <body>元素）进行定位。这意味着绝对定位元素的定位参考点是最近的已定位祖先元素，通过设置 top、right、bottom 和 left 属性来调整元素相对于该祖先元素的位置。如果没有已定位的祖先元素，那么相对于最初包含它的块级容器进行定位。此时，绝对定位元素可能会影响其他元素的布局，因为它在正常文档流中不再占据位置。

9. 画一条0.5px的直线？（个人觉得似乎有点不妥？）

在屏幕上直接绘制出 0.5 像素宽度的直线是不可能的，因为屏幕的物理像素是一个固定大小的单元，无法以小于 1 像素的尺寸显示。 不过，在网页设计中，我们可以通过一些技巧来模拟出 0.5 像素宽度的效果。例如：

  1. 使用 CSS 的 transform 属性对元素进行缩放来达到这个效果。具体做法是创建一个 1px 宽度的线条，并将其水平缩放为原始宽度的一半，从而实现看起来像是 0.5px 宽度的线条。transform: scaleX(0.5);
  2. 使用 CSS 的 border 属性，并将线条颜色设置为半透明黑色。具体做法是创建一个高度为 1px 的 div 元素，并将其 border-top 属性设置为 1px 宽度、半透明黑色。 border-top: 1px solid rgba(0, 0, 0, 0.5);

10. 1rem、1em、1vh、1px、1rpx各自代表的含义？

  • 1rem：表示相对于根元素（通常是 元素）的字体大小。例如，如果根元素的字体大小为 16 像素，那么 1rem 等于 16 像素。
  • 1em：表示相对于当前元素的字体大小。例如，如果某个元素的字体大小为 14 像素，那么 1em 等于 14 像素。
  • 1vh：表示相对于视口高度的百分比。视口高度是指浏览器窗口可见区域的高度。例如，如果视口高度为 800 像素，那么 1vh 等于 8 像素（即 800 * 1%）。
  • 1px：表示一个像素单位。像素是屏幕上最小的显示单元。实际显示效果会因设备像素密度（DPI/PPI）而有所不同。
  • 1rpx：是微信小程序中的单位，表示相对于屏幕宽度的适配像素。它是微信小程序框架提供的一种相对单位，用于实现在不同设备上的屏幕适配。（个人补充）

需要注意的是，rem 和 em 是相对单位，其大小取决于父元素或根元素的字体大小。而 vh 和 px 是绝对单位，其大小固定不变。可以根据需要选择适合的单位来进行布局和样式设计。

11. HTML5、CSS3 里面都新增了那些新特性？

HTML5 新特性：
  1. 语义化标签：包括 <header>、<footer>、<nav>、<article>、<section>等，使得页面结构更清晰明了。
  2. 新的表单元素：如 <input type="date">、<input type="email">、<input type="url">等，简化了表单设计。
  3. 音频和视频支持：通过 和 元素，实现在网页中嵌入音频和视频内容。
  4. Canvas 绘图：提供了一个使用 JavaScript 进行绘图的 API，用于动态生成图形、动画等。
  5. 本地存储：包括 Web Storage（localStorage 和 sessionStorage）和 IndexedDB，用于在客户端存储数据。
  6. Web Workers：允许在后台运行脚本，以提高多线程处理能力。
  7. WebSocket：实现了浏览器与服务器之间全双工通信的功能。
  8. Geolocation API：提供了获取用户地理位置信息的能力。
CSS3 新特性：
  1. 选择器：新增了许多新的选择器，如属性选择器、伪类选择器等，增强了样式选择的灵活性。
  2. 盒子模型：引入了 box-sizing 属性，可以更方便地控制盒子模型的尺寸。
  3. 阴影效果：通过 box-shadow 和 text-shadow 属性，可以为元素添加阴影效果。
  4. 渐变：新增了渐变颜色的支持，包括线性渐变（linear-gradient）和径向渐变（radial-gradient）。
  5. 过渡和动画：引入了 transition 和 animation 属性，使得实现元素过渡和动画效果更加简单。
  6. 媒体查询：允许根据设备特性（如屏幕大小、分辨率等）调整样式，实现响应式设计。
  7. Flexbox 布局：提供了一种更灵活的布局方式，使得实现复杂布局更加容易。
  8. Grid 布局：引入了网格布局系统，更好地支持多列布局和对齐方式。

以上只是 HTML5 和 CSS3 中的一部分新特性，它们使得网页开发更具创造力和交互性，为用户带来更好的浏览体验。

12. JS 数据类型有哪些? || JS 有哪些内置对象？

原始数据类型（Primitive data types）：
  1. String（字符串）：表示文本数据，使用单引号（'）或双引号（"）表示。
  2. Number（数字）：表示数值，包括整数和浮点数（带小数点的数值）。
  3. Boolean（布尔值）：表示逻辑值，只有两个值：true 和 false。
  4. Undefined（未定义）：表示声明了变量但未赋值的数据类型，变量默认值为 undefined。
  5. Null（空值）：表示空值或者不存在的值。
  6. Symbol（符号）：ES6 新增，表示唯一且不可变的值。
引用数据类型（Reference data types）：
  1. Object（对象）：表示复杂数据结构，可以包含多个键值对。
  2. Array（数组）：一种特殊的对象，用于存储按索引顺序排列的值。
  3. Function（函数）：函数也是对象的一种，可以执行代码块。
  4. Date（日期）：表示日期和时间。
  5. RegExp（正则表达式）：用于匹配字符串的模式。
  6. Error（错误）：表示错误对象。

在 JavaScript 中，对象类型和引用数据类型其实是同一个概念的不同表达方式。JavaScript 中的对象类型就是引用数据类型。
当我们谈到引用数据类型时，我们指的是存储在内存中的引用（地址），而不是实际的数据本身。在 JavaScript 中，所有的对象都是引用数据类型。当我们创建一个对象时，实际上在内存中分配了一块空间，并且变量存储的是指向该内存空间的引用。
因此，当我们将一个对象赋值给另一个变量时，实际上是将对象的引用（地址）复制给了另一个变量，而不是复制整个对象。这意味着两个变量实际上指向了内存中的同一个对象，因此它们共享同一块内存空间，对一个变量所做的修改会影响到另一个变量。
总之，对象类型就是引用数据类型，它们指的是存储在内存中的对象，并且变量存储的是对象的引用（地址）。对于 JavaScript 开发者来说，理解对象类型/引用数据类型的工作原理对于正确地处理对象的赋值、传递和操作非常重要。

13. 基本数据类型和引用数据类型有什么区别？

基本数据类型（Primitive data types）：
  1. 存储方式：存储在栈内存中。
  2. 访问：直接访问变量的值。
  3. 拷贝：通过值进行拷贝。
  4. 比较：比较的是值是否相等。
引用数据类型（Reference data types）：
  1. 存储方式：存储在堆内存中，变量存储的是指向堆内存的地址。
  2. 访问：先访问地址，再根据地址访问堆内存中的对象。
  3. 拷贝：拷贝的是地址，多个变量指向同一块内存空间。
  4. 比较：比较的是引用是否指向同一块内存空间。

14. innerHTML 和 innerText 和 documen.write 的区别

innerHTML 和 innerText 都是用于操作 HTML 元素内容的属性，它们之间有一些重要的区别：

innerHTML：
  • 作用：innerHTML 是一个属性，可以获取或设置元素的 HTML 内容，包括标签和文本。
  • HTML 解析：innerHTML 返回的是解析过的 HTML 内容，在设置时会解析字符串中的 HTML 标签并将其作为 HTML 元素展示。
  • 安全性：由于 innerHTML 会解析 HTML，因此存在安全风险，可能被用于注入恶意脚本（XSS 攻击）。
  • 使用方式：只能在 JavaScript 代码中使用，不能在 HTML 元素中使用 JavaScript 调用。
  • 局部作用：只会影响元素内部的 HTML 内容，不会改变其他元素或文档结构。
innerText：
  • 作用：innerText 是一个属性，用于获取或设置元素的文本内容，会忽略 HTML 标签，只返回可见文本内容。
  • 文本内容：innerText 返回的是元素内部的纯文本内容，不包含 HTML 标签。
  • 性能：由于 innerText 不涉及解析 HTML，在某些情况下可能比 innerHTML 更快。
document.write()：
  • 作用：在文档中写入 HTML 或文本内容。
  • 使用方式：可以直接在 JavaScript 代码中使用，也可以在 HTML 元素中使用 JavaScript 调用。
  • 覆盖现象：如果 document.write() 在页面加载后调用，它会覆盖整个文档（包括 HTML、CSS 和其他脚本）。
  • 支持性能：document.write() 可以在没有 DOM 的情况下操作文档，但在大多数情况下，使用它来操作 DOM 是不推荐的。

15. JavaScript 由哪三部分组成：

  1. ECMAScript（ES）：这是 JavaScript 的核心，描述了该语言的语法和基本对象。它规定了变量、数据类型、操作符、控制结构、对象和函数等基本的语言元素。

  2. 文档对象模型（DOM）：DOM 是一种让程序可以对 HTML 和 XML 文档进行访问和操作的方法。通过 DOM，开发者可以使用 JavaScript 来操作页面上的元素，比如改变内容、样式和结构等。

  3. 浏览器对象模型（BOM）：BOM 提供了与浏览器交互的方法和接口，包括处理浏览器窗口、历史记录、定时器等功能。BOM 并没有标准化，因此不同的浏览器可能提供不同的 BOM 接口。

16. DOM 元素e的 e.getAttribute(propName)和 e.propName 有什么区别和联系？

区别：

  1. 适用范围：

    • e.getAttribute(propName) 可以获取任意属性的值，包括标准属性和自定义属性。
    • e.propName 只能获取标准的 HTML 属性的值。

  2. 返回值类型：

    • e.getAttribute(propName) 返回的始终是一个字符串，即属性的值。
    • e.propName 可以根据属性的类型返回不同的值，比如布尔值、数值等。

  3. 属性是否存在：

    • e.getAttribute(propName) 在属性不存在时返回 null。
    • e.propName 在属性不存在时返回 undefined。
联系：

  1. 获取属性值：

    • 当属性存在且为字符串类型时，可以通过 e.getAttribute(propName) 和 e.propName 都能够获取到属性的值。
    • 但对于非字符串类型的属性，如布尔值或数值，只能使用 e.propName 来获取其原始类型的值，因为 e.getAttribute(propName) 始终返回字符串类型。

  2. 设置属性值：

    • 通过 e.setAttribute(propName, value) 方法可以设置属性的值，其中属性名 propName 可以是任意字符串。
    • 通过直接赋值 e.propName = value 的方式也可以设置标准 HTML 属性的值。

大佬博客补充：
e.getAttribute：获取的是标签上属性
e.propName：获取的是元素对象上属性

<body>
  <input id="myInput" type="checkbox" checked="checked" data-number="100">
<script>
	var inputType1 = document.getElementById('myInput').type;
	var inputType2 = document.getElementById('myInput').getAttribute('type');
	console.log('inputType1:', inputType1); // 输出：inputType1: checkbox
	console.log('inputType2:', inputType2); // 输出：inputType2: checkbox
	
	var checkedValue1 = document.getElementById('myInput').checked;
	var checkedValue2 = document.getElementById('myInput').getAttribute('checked');
	console.log('checkedValue1:', checkedValue1); // 输出：checkedValue1: true
	console.log('checkedValue2:', checkedValue2); // 输出：checkedValue2: "checked"
	
	var numberValue1 = document.getElementById('myInput').getAttribute('data-number');
	var numberValue2 = document.getElementById('myInput').dataset.number;
	console.log('numberValue1:', numberValue1); // 输出：numberValue1: "100"
	console.log('numberValue2:', numberValue2); // 输出：numberValue2: "100"
</script>
</body>

17. offsetWidth / offsetHeight, clientWidth / clientHeight, scrollWidth / scrollHeight 的区别?

  • offsetWidth 和 offsetHeight content + padding + border + 滚动条
  • clientWidth 和 clientHeight content + padding（不含滚动条）
  • scrollWidth 和 scrollHeight content + padding + 溢出尺寸（不含滚动条）
  • 均不含margin
<!DOCTYPE html>
<html>
<head>
  <title>Box Model Example</title>
  <style>
    #myElement {
      width: 200px;
      height: 150px;
      padding: 20px;
      margin: 30px;
      border: 5px solid black;
      overflow: scroll;
    }
  </style>
</head>
<body>
  <div id="myElement">
    <p>Content that causes overflow when added repeatedly. </p>
    <p>Content that causes overflow when added repeatedly. </p>
    <p>Content that causes overflow when added repeatedly. </p>
  </div>

  <script>