DOM 操作

DOM 操作相关

1.
Ajax 请求实现

使用原生 JavaScript 创建 Ajax 请求

2.
分片思想解决大数据量渲染问题

使用时间分片技术优化大数据量DOM渲染,避免页面卡顿,提升用户体验

3.
自定义事件实现

使用 CustomEvent 创建和触发原生自定义事件

4.
自定义事件

JavaScript 中创建和使用自定义事件的方法

5.
实现 DOM2JSON:将 DOM 节点转换为 JSON 格式

手写一个函数,将 DOM 树结构转换为 JSON 对象,保留节点的标签名、属性和子节点信息

6.
持续动画效果实现

使用 JavaScript 实现持续动画的几种方式

7.
创建10个标签,点击时弹出对应的序号

理解 JavaScript 闭包和作用域的经典面试题,掌握循环中事件绑定的正确方式

8.
Div 模拟 Textarea

使用 contenteditable 属性实现可编辑的文本输入框

9.
实现一个拖拽功能

使用原生 JavaScript 实现元素的拖拽移动功能,支持鼠标和触摸事件

10.
可拖拽元素实现

使用原生 JavaScript 实现 Div 拖拽功能

11.
事件委托实现

手写一个通用的事件委托函数

12.
Dialog组件设计

设计一个功能完整的 Dialog 弹窗组件

13.
事件触发顺序

DOM 事件的捕获、目标、冒泡三个阶段

14.
事件触发条件

JavaScript 中各类事件的触发时机和条件

15.
获取页面所有复选框

使用 DOM API 获取页面中所有 checkbox 元素的几种方法

16.
GET 和 POST 请求

使用 XMLHttpRequest 和 fetch 发送 GET、POST 请求

17.
点击图标边框变色

实现点击图标添加红色边框,点击空白处重置的交互效果

18.
Hash 路由原理

前端路由 Hash 模式的实现原理与代码示例

19.
图片 URL 直接下载

实现点击图片链接触发下载而非预览

20.
图片懒加载

实现图片懒加载功能,优化页面加载性能,提升用户体验

21.
图片懒加载

使用 Scroll 事件和 IntersectionObserver 实现图片懒加载

22.
实现 JSONP 跨域请求

手写 JSONP 函数实现跨域数据获取

23.
大数据列表渲染优化

使用 requestAnimationFrame 和 Fragment 分批渲染大量数据

24.
无限滚动加载

实现页面滚动到底部自动加载更多内容

25.
原生 Ajax 请求实现

使用 XMLHttpRequest 和 Fetch API 实现 Ajax 请求

26.
onreadystatechange 事件

XMLHttpRequest 的状态变化事件及 readyState 各阶段含义

27.
视差滚动效果

实现视差滚动和分页动画效果

28.
虚拟DOM转真实DOM

实现 render 函数将虚拟DOM转换为真实DOM

29.
将虚拟 Dom 转化为真实 Dom

实现一个函数,将虚拟 DOM 对象转换为真实的 DOM 节点,这是理解前端框架渲染机制的基础

30.
XMLHttpRequest 五个步骤

使用 XMLHttpRequest 发送 Ajax 请求的完整流程