typescript如何操作元素

通过 dom 操作元素：获取元素：getelementbyid、queryselector、queryselectorall创建元素：createelement、createtextnode插入元素：appendchild、insertbefore删除元素：removechild修改元素属性：setattribute、getattribute、removeattribute操作元素样式：style、classlist

TypeScript 中操作元素

在 TypeScript 中，可以通过 DOM（文档对象模型）来操作元素。DOM 提供了对 HTML 文档中元素的访问和控制。

获取元素

• getElementById(id: string): HTMLElement | null：根据其 ID 获取元素，如果未找到则返回 null。
• querySelector(selector: string): HTMLElement | null：根据 CSS 选择器获取第一个匹配的元素，如果未找到则返回 null。
• querySelectorAll(selector: string): NodeListOf：根据 CSS 选择器获取所有匹配的元素，返回一个 NodeList 对象。

创建元素

• createElement(tagName: string): HTMLElement：创建一个具有指定标签名的元素。
• createTextNode(text: string): Text：创建一个文本节点。

插入元素

• appendChild(element: HTMLElement): void：将元素作为子元素追加到父元素的末尾。
• insertBefore(element: HTMLElement, referenceElement: HTMLElement): void：将元素插入到父元素的指定参考元素之前。

删除元素

• removeChild(element: HTMLElement): void：从父元素中删除指定元素。

修改元素属性

• setAttribute(name: string, value: string): void：为元素设置指定名称和值的属性。
• getAttribute(name: string): string | null：获取元素的指定名称的属性值，如果未找到则返回 null。
• removeAttribute(name: string): void：删除元素的指定名称的属性。

操作元素样式

• style.property = value：直接设置样式属性，例如 style.color = "red"。
• classList.add(className: string)：添加一个 CSS 类。
• classList.remove(className: string)：移除一个 CSS 类。
• classList.toggle(className: string)：根据元素是否存在指定的 CSS 类来添加或移除它。

以上就是typescript如何操作元素的详细内容，更多请关注本站其它相关文章！