如何使用 HTML 搜索网页上的元素 - TypeScript

在 TypeScript 中，可以使用 querySelector 和 querySelectorAll 方法来搜索 DOM 元素。这两个方法都接收一个字符串参数，这个字符串是一个 CSS 选择器。

querySelector

querySelector 方法返回匹配选择器的第一个元素。如果没有匹配的元素，返回 null。

下面是 querySelector 方法的使用示例：

const element = document.querySelector('#my-element');

在上面的示例中，querySelector 方法返回 id 属性为 my-element 的元素。

querySelectorAll

querySelectorAll 方法返回匹配选择器的所有元素。如果没有匹配的元素，返回一个空的 NodeList。

下面是 querySelectorAll 方法的使用示例：

const elements = document.querySelectorAll('.my-class');

在上面的示例中，querySelectorAll 方法返回所有 class 属性为 my-class 的元素。

搜索子元素

如果要在某个元素的子元素中搜索，可以将这个元素作为第一个参数传递给 querySelector 或 querySelectorAll 方法。

下面是搜索某个元素下所有 button 元素的示例：

const buttons = element.querySelectorAll('button');

在上面的示例中，element 是要搜索的元素。

总结

以上就是在 TypeScript 中使用 querySelector 和 querySelectorAll 方法搜索网页上的元素的方法。这两个方法是使用 CSS 选择器来查找元素，可以很方便地搜索 DOM 元素。