typescript 获取 dom 节点的方法取决于你如何构建你的应用以及节点的上下文。 没有单一完美的答案，但我会分享几种常见场景和对应的解决方案，并结合我自己的经验，指出一些容易遇到的问题。
最直接的方法是使用 getElementById、querySelector 或 querySelectorAll。 这些方法都属于浏览器原生的 DOM API，TypeScript 可以直接使用它们。 getElementById 只接受 ID 作为参数，返回匹配 ID 的单个元素，或者返回 null。 这在你知道节点 ID 的情况下非常高效。
例如，假设你有一个 ID 为 “myElement” 的
元素：
const myElement = document.getElementById('myElement');
if (myElement) {
// 这里可以安全地操作 myElement，因为我们已经进行了 null 检查
myElement.textContent = 'Hello, world!';
} else {
console.error('Element with ID "myElement" not found.');
}
登录后复制
注意 if (myElement) 语句。 这是至关重要的，因为 getElementById 返回的是 HTMLElement | null 类型，你需要处理 null 的情况，避免运行时错误。 我曾经在一个项目中忘记了这个检查，导致应用崩溃，这让我深刻体会到类型安全的重要性。
querySelector 和 querySelectorAll 提供更灵活的选择方式，可以使用 CSS 选择器。querySelector 返回匹配的第一个元素，而 querySelectorAll 返回一个 NodeList，包含所有匹配的元素。 这在处理多个元素或更复杂的场景下非常有用。
举个例子，如果你想获取所有 class 为 “item” 的
const items = document.querySelectorAll<HTMLLIElement>('.item');
items.forEach(item => {
item.addEventListener('click', () => {
// 处理点击事件
console.log(item.textContent);
});
});
登录后复制
这里我使用了类型断言 ，确保 querySelectorAll 返回的 NodeList 中的元素都是 HTMLLIElement 类型，这样在 forEach 循环中就可以直接访问 textContent 属性，而不用进行类型检查。 这可以提高代码的可读性和安全性。 在实际操作中，我发现类型断言能有效减少运行时错误，并提高代码的可维护性。
然而，如果你的应用使用了框架（例如 React, Angular, Vue），直接使用这些 DOM API 就显得不太合适了。 这些框架通常提供自己的一套机制来操作 DOM，例如 React 的 refs 或 Angular 的 @ViewChild 装饰器。 使用框架提供的机制可以更好地与框架的渲染机制集成，避免冲突并提高性能。 在选择方法时，务必考虑你所使用的技术栈。 忽视这一点曾经导致我在一个 React 项目中遇到渲染问题，最后不得不重构部分代码。
总而言之，选择合适的 DOM 获取方法取决于你的项目结构和需求。 记住进行 null 检查以及利用 TypeScript 的类型系统来提高代码的可靠性和可维护性，这才是避免问题的关键。
路由网(www.lu-you.com)您可以查阅其它相关文章！
陕公网安备41159202000202号