document.getElementById最快但仅支持ID；批量选元素用querySelectorAll而非getElementsByClassName；修改文本优先用textContent防XSS和重排；事件绑定推荐事件委托提升性能。

JavaScript模板字符串用反引号包裹，支持${}变量插值和原生多行，外层非反引号则插值失效；${}内仅限表达式，禁用语句；缩进空格被保留，可用trim()处理；标签函数如html...`可实现转义等高级功能。

JavaScript剪贴板API需在HTTPS或localhost安全上下文中，由用户手势触发；writeText()和readText()均返回Promise，支持文本读写，Chrome115+实验性支持图片写入，Safari读取受限，建议检查权限并兼容降级。

拖拽跨浏览器可靠需三要素：dragstart中必须调用setData('text/plain','')初始化dataTransfer；dragover和drop事件均需preventDefault()允许放置；移动端须用touch事件模拟而非原生API。

Flex布局通过设置容器的display:flex，利用主轴与交叉轴控制子元素排列，使用justify-content、align-items等属性实现对齐，flex属性分配空间，轻松完成响应式布局。

使用transition属性设置按钮悬停动画，推荐指定具体属性如background-color和transform以优化性能；2.通过:hover伪类定义悬停样式，实现颜色变化和translateY上移效果；3.添加box-shadow过渡增强立体感，从默认浅阴影变为悬停时深阴影；4.避免在:hover中定义transition，优先使用transform和opacity减少重排，确保动画流畅并适配移动端交互。

flex-direction属性决定Flex布局主轴方向，可选值为row（默认，水平左到右）、row-reverse（水平右到左）、column（垂直上到下）、column-reverse（垂直下到上），通过display:flex设置容器后应用，常用于导航栏、侧边栏等布局场景。

正确设置transition属性并选择合适的缓动函数可使opacity动画平滑，基础写法为.fade-element{transition:opacity0.3s;}，结合:hover等状态触发，推荐使用ease缓出效果，并可通过will-change或visibility优化性能，避免突变与卡顿。

伪类顺序必须遵循LVHA规则（:link→:visited→:hover→:active），否则浏览器可能忽略样式；现代伪类如:focus-within、:has()不受此限，但需注意兼容性与优先级。

在JavaScript中，使用pop()方法可以从数组末尾移除元素并返回该元素。1.pop()会直接修改原始数组，移除最后一个元素并将其返回；2.若数组为空，pop()返回undefined且不改变数组；3.使用pop()后，原数组会被修改，所有引用该数组的变量都会反映这一变化；4.pop()是高效且语义清晰的方法，适用于频繁操作数组末尾的场景；5.相比之下，splice()可移除任意位置的元素但返回值为数组，而调整length属性可截断数组但不返回被移除元素。

JavaScript的debugger语句是一种内置调试工具，能在代码执行到该行时强制暂停并打开开发者工具以检查变量和流程。1.使用时只需在目标代码行插入debugger;，程序运行至此会暂停，便于查看变量值和执行上下文；2.除debugger外，常用技巧包括断点、有条件断点、日志点等，均无需修改代码即可灵活调试；3.实际项目中可结合异步调用栈、XHR/Fetch断点、黑盒脚本等功能高效排查复杂问题；4.调试常见坑包括缓存导致代码未更新、异步流程理解偏差、作用域和this指向混乱以及第三方库干扰，可通过禁

CSS自定义属性（如--color-primary）是现代浏览器支持的“CSS变量”，需定义在:root中以实现全局生效，使用var()函数调用，支持fallback；JS可动态修改其值实现主题切换，而Sass变量仅编译时替换、无法运行时更新。

Node.js是JavaScript后端开发的主流选择，基于V8引擎，结合npm生态可快速构建高性能服务。1.使用内置http模块可创建基础HTTP服务器，监听指定端口并返回响应；2.Express框架简化路由与中间件管理，提升开发效率，适合构建RESTfulAPI；3.通过express.static提供静态文件服务，利用express.json()和express.urlencoded()解析请求体；4.结合Mongoose连接MongoDB，定义数据模型并实现增删改查操作，完成数据持久化。整个流程涵

使用vw单位可实现响应式字体，1vw等于视口宽度的1%，结合clamp()函数可限制字体大小范围，如font-size:clamp(1.5rem,4vw,3rem)，避免极端显示问题。

align-items:baseline使网格子元素按文本基线对齐，适用于表单、按钮组等文本对齐场景，要求容器为display:grid且子元素有可识别基线，支持垂直（align-items）和水平（justify-items）对齐，提升文本视觉一致性。