DOM 获取元素方法的奇葩之处**

引言

使用 document 对象来获取和操作 DOM 元素是前端开发人员的基本功。然而，当使用框架时，需要遵循框架的约定，而不能想当然。本文将探讨 getElementById、querySelector 和 ref 这三种获取 DOM 元素方法之间的差异和陷阱，帮助开发者避免在使用这些方法时踩坑。

getElementById

getElementById 是一个常用的方法，用于通过元素的 id 属性获取元素。它的语法非常简单：

document.getElementById(id)

其中 id 是元素的唯一标识符。

getElementById 的优点在于速度快，因为它直接通过 id 查找元素，而无需遍历整个 DOM 树。然而，它也有一些缺点：

• 元素的 id 必须是唯一的，否则会返回错误的元素。
• 如果元素不存在，会返回 null，需要进行额外的判断。

querySelector

querySelector 是一个更通用的方法，用于通过 CSS 选择器获取元素。它的语法如下：

document.querySelector(selector)

其中 selector 是一个 CSS 选择器，可以指定元素的类型、类名、id 等属性。

querySelector 的优点在于灵活性强，可以根据任意 CSS 选择器查找元素。它的缺点是速度比 getElementById 慢，因为需要遍历 DOM 树来查找匹配的元素。

ref

ref 是 React 中的一个概念，用于通过引用属性访问 DOM 元素。它的语法如下：

const ref = React.createRef()

然后在组件中使用 ref 属性：

<div ref={ref} />

最后可以通过 ref.current 访问 DOM 元素：

const element = ref.current

ref 的优点在于它可以轻松地访问 DOM 元素，而无需手动使用 document 对象。它的缺点是仅在 React 中可用，并且需要额外的代码来创建和使用 ref。

陷阱

在使用这些方法时需要小心以下陷阱：

• id 冲突： getElementById 要求元素的 id 唯一，否则会返回错误的元素。
• 选择器不正确： querySelector 根据 CSS 选择器查找元素，因此选择器必须正确，否则会返回错误的结果。
• DOM 更新延迟： ref 在组件渲染后才会更新，因此在组件首次渲染时，ref.current 可能为 null。

最佳实践

• 优先使用 getElementById 获取元素，因为它速度快，前提是元素的 id 唯一。
• 在需要使用 CSS 选择器查找元素时，使用 querySelector。
• 在 React 中，使用 ref 方便地访问 DOM 元素。
• 避免在组件首次渲染时使用 ref，因为此时 ref.current 可能为 null。