dom

创建新DOM节点方式总结DOM节点创建方法对比：正确理解性能排序（从高到低）innerHTML（赋值字符串） - 最优（使用浏览器原生解析器）

Array.from() 转换为数组的实际开发场景举例关联阅读推荐实时集合导致的循环问题黄金法则：当你需要对DOM元素集合进行遍历、筛选、转换等复杂操作时，先使用 Array.from() 转换为数组，然后再操作。

insertAdjacentHTML() 详解insertAdjacentHTML() 是 DOM 操作中性能优越的方法。支持四种插入位置（beforebegin/afterbegin/beforeend/afterend），比innerHTML更灵活且不会破坏现有内容。

JavaScript零基础入门指南：从语法到实战的核心知识点解析JavaScript是前端开发的核心三剑客之一，也是赋予网页交互能力的“灵魂”语言。接下来我将从零基础视角出发，详细拆解JavaScript的核心知识点，每个模块搭配基础易懂的代码实例，希望能够更好地帮助你快速入门并掌握实用技能。

Vue 事件机制全面解析：原生事件、自定义事件与 DOM 冒泡完全讲透为什么要理解 Vue 事件？只知道 @click，却分不清它属于谁子组件不 emit，父组件 @click 为何能触发？

浏览器相关 API：DOM 操作全解析DOM（文档对象模型）是Web开发的核心，它代表了HTML和XML文档的结构化表示。高效的DOM操作对于构建高性能Web应用至关重要。本文将全面解析DOM操作相关的API、性能优化策略和现代最佳实践。

【Web APIs】元素可视区 client 系列属性 ② ( 立即执行函数 )立即执行函数 ( Immediately Invoked Function Expression , 简称 IIFE ) 是定义后立刻执行的 JavaScript 函数 , 它的核心特点是 " 定义即执行 " , 且能创建一个独立的私有作用域 ;

【Web APIs】元素偏移量 offset 系列属性 ④ ( offset 属性案例 - 放大镜效果 )实现如下放大镜效果 :小图容器 <div class="small"> 用于承载小图、遮罩层、大图容器的父容器 , 对应 CSS 中的 .small 类 ;

【Web APIs】BOM 浏览器对象模型 ⑥ ( location 对象 | location 常用属性和方法 | URL 简介 )location 对象相当于浏览器的 " 地址栏管理器 " , 它包含了当前页面的 URL 信息 , 并且提供了一系列属性和方法来操作 URL、跳转页面或刷新页面 ;

深入解析 OOP 考题之 EditInPlace 类：从零开始掌握面向对象编程实战想象一下你在使用某社交平台时，点击自己的昵称，它立刻变成一个输入框，你可以直接修改并保存。这种交互方式叫做 “就地编辑”（Edit in Place） —— 不需要跳转页面或弹出新窗口，直接在当前位置完成编辑。

vivo互联网技术

浅谈 AI 搜索前端打字机效果的实现方案演进作者：vivo 互联网前端团队 - He Yanjun在当代前端开发领域，打字机效果作为一种极具创造力与吸引力的交互元素，被广泛运用于各类网站和应用程序中，为用户带来独特的视觉体验和信息呈现方式，深受广大用户的喜爱。

APIs之WEB API的基本认知是什么？作用：就是使用JS去操作html和浏览器分类：DOM（文档对象模型）、BOM（浏览器对象模型）DOM（Document Object Model-文档对象模型）是用来呈现以及与任意HTML或XML文档交互的API。

Fix: 修复AI聊天输入框Safari回车发送bugAI聊天输入框场景下，我们通常需要支持用户按下enter回车的快捷发送，通过键盘事件实现但实际上enter作为确认操作，除了确认内容发送动作，还有确认输入法输入的动作；

HTML/CSS/JS 是如何渲染页面的｜浏览器渲染原理与性能优化基础在前端开发中，理解浏览器的渲染流程是写出高性能页面的关键。本笔记从输入 HTML/CSS/JS 到页面最终显示的全过程出发，梳理了 DOM 与 CSSOM 的构建逻辑、语义化结构在 SEO 中的重要性，并解释了为什么要在结构中将 <aside> 放在 <main> 后面。

🚀 从 HTML 到像素：浏览器渲染全流程揭秘（附性能优化实战）当你在浏览器地址栏输入 URL，按下回车后，看似“瞬间”出现的页面，背后其实经历了一场精密的“工程协作”。整个流程可概括为：

从拼接到优雅：用 ES6 模板字符串和 map 打造更简洁的前端代码在前端开发中，动态生成 DOM 内容或进行字符串拼接是再常见不过的需求。随着 ES6 的普及，模板字符串（Template Literals）与数组的 map() 方法相结合，不仅显著提升了代码的可读性，也让开发过程更加高效、优雅。

事件委托性能真相：90%内存节省背后的数据实证最近在面试中，我和一位候选人聊到了事件委托。他说：“我知道事件委托，就是给父元素绑定事件来处理子元素嘛。” 我追问：“那你能说说，为什么要这样做吗？除了处理动态元素，还有什么好处？” 他停顿了一下，说：“应该...性能会好一点吧。”

5大DOM/BOM核心考点：从入门到精通，让面试官眼前一亮上周面试了一位3年经验的前端，简历上写着"精通DOM操作"。我问他事件委托的原理，他说"就是给父元素绑定事件"。我追问"为什么用事件委托？性能提升多少？"，他支支吾吾答不上来。

脑子慢且灵

【Web前端】JS+DOM来实现乌龟追兔子小游戏大家天天开心在学习了JavaSCript这门语言的基础后，并稍微了解了点DOM后，我根据所学的一些课程类似写了一个有关乌龟追兔子的小游戏，这里面有很多关于JS和DOM的知识点包括一丢丢的算法，希望大家可以认真阅读一下

30KB 轻量王者！SortableJS 轻松搞定拖拽需求作为一名每天和 DOM 打交道的前端程序员，我深知在项目中实现拖拽排序功能的痛点 —— 自己手写不仅要处理复杂的鼠标 / 触摸事件，还要考虑兼容性和性能问题。直到我接触到了SortableJS，这个轻量级且功能强大的库彻底改变了我处理拖拽需求的方式。今天就从实际开发角度，带大家全面了解 SortableJS，并通过代码实例演示其核心用法。