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如何操作元素的詳細內容，更多請關注本站其它相關文章！