2024年前端最全Web APIs-Day2，2024互联网大厂前端面经合集

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

能够区分元素节点、文本节点、属性节点

能够获取指定元素的父元素

能够获取指定元素的所有子元素

能够说出childNodes和children的区别

能够使用createElement创建页面元素

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、排他操作

=====================================================================

1.1排他思想

---

代码如下（示例）：

按钮1

按钮2

按钮3

按钮4

按钮5

注意：排他思想的核心是先干掉其它人，再设置自己的；

二、案例：百度换肤

========================================================================

代码如下（示例）：

• 
• 
• 
• 

• 注：本案例的核心思路是每次点击小图片，将获取小图片的src属性值，然后将小图片的src属性值给body的backgroungImage属性；

  三、案例：表格隔行换色

  ==========================================================================

  

  

  代码如下（示例）：

  注：本案例的核心思路是循环给表格每一行注册鼠标点击和鼠标经过事件；

  四、案例：全选

  ======================================================================

  

  

  代码如下（示例）：

  五、自定义属性操作

  ========================================================================

  5.1 获取属性值

  ---

  

  代码如下（示例）：

  注：element.getAttribute是获得自定义的属性值；element.属性名获得的是元素的内置属性；

  5.2 设置属性值

  ---

  

  代码如下（示例）：

  // 2. 设置元素属性值

  // (1) element.属性= ‘值’

  div.id = ‘test’;

  div.className = ‘navs’;

  // (2) element.setAttribute(‘属性’, ‘值’); 主要针对于自定义属性

  div.setAttribute(‘index’, 2);

  div.setAttribute(‘class’, ‘footer’); // class 特殊 这里面写的就是

  注：element.setAttribute主要用于自定义属性的属性值修改；如果使用element.setAttribute设置类的值，使用class，或者使用className设置元素的类名；

  5.3 移除属性值

  ---

  

  代码如下（示例）：

  // class 不是className

  // 3 移除属性 removeAttribute(属性)

  div.removeAttribute(‘index’);

  5.4 案例：tab栏

  ---

  

  

  代码如下（示例）：

  注：本案例主要运用排它思想结合本节学习的setAttribute 和 getAttribute，去实现tab栏切换效果；

  5.5 H5自定义属性

  ---

  自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

  自定义属性获取是通过getAttribute(‘属性’) 获取。

  但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

  H5给我们新增了自定义属性：

  

  

  代码如下（示例）：

  注：本节主要说明为了区分元素自定义属性和内置属性，自定义属性名以data-开头；

  六、节点操作

  =====================================================================

  6.1 节点操作概述

  ---

  ​ 网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

  ​ HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

  

  ​ 一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

  

  注意：实际开发中主要操作元素节点;

  6.2 节点层级

  ---

  利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

  

  6.3 父级节点

  ---

  

  代码如下（示例）：

  专业技能

  一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

  • HTML+CSS
  • JavaScript
  • 前端框架
  • 前端性能优化
  • 前端监控
  • 模块化+项目构建
  • 代码管理
  • 信息安全
  • 网络协议
  • 浏览器
  • 算法与数据结构
  • 团队管理
  • 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

  其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

  由于文章篇幅有限，仅展示部分内容