溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Manipulation TypeScript DOM操作實例代碼分析的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Manipulation TypeScript DOM操作實例代碼分析文章都會有所收獲，下面我們一起來看看吧。
在標準化20年后，JavaScript 已經走過了很長的一段路。雖然 2020 年，JavaScript 可以在使用在服務端、數據科學甚至物聯網設備，但最主要用在 web瀏覽器。
網站是由 HTML 和/或 XML 文檔組成的。這些文檔是靜態的，不會改變。Document Object Model(DOM) 是瀏覽器實現的編程接口，目的是使靜態網站有功能性。DOM API 能改變文檔結構、樣式、內容。API 功能非常強大，無數前端框架(jQurty,React,Angular 等)都是圍繞著它開發的，目的是制作動態 網站，甚至更容易開發。
TypeScript 是 JavaScript 的類型化超集，并為 DOM API 定義了類型。這些 DOM 類型在任何默認的 TypeScript 項目都能輕易獲得。在 lib.dom.d.ts 定義了20,000 行，其中 HTMLElement 類型是比較突出的，這個類型是 TypeSctipt 操作 DOM 的主干類型。
一個簡化的 index.html 文件
<!DOCTYPE html> <html lang="en"> <head><title>TypeScript Dom Manipulation</title></head> <body> <div id="app"></div> <!-- 假設 index.js 是 index.ts 編譯輸出的--> <script src="index.js"></script> </body> </html>
用 TypeScript 添加 <p>Hello, World</p> 元素到 #app 元素。
// 1. 使用 id 屬性選中某 div 元素
const app = document.getElementById("app");
// 2. 用編程方式創建新的 <p></p> 元素
const p = document.createElement("p");
// 3. 為新的 p 元素添加文本內容
p.textContent = "Hello, World!";
// 4. 把新的 p 元素附加到一開始獲取的 div 元素
app?.appendChild(p);編譯ts和運行 index.html 頁面，結果 HTML 為：
<div id="app"> <p>Hello, World!</p> </div>
上例中，TypeScript 第一行代碼使用全局變量 document。檢查該變量可以發現它是由 lib.dom.d.ts 文件中的 Document 接口定義的。而且包含對兩個方法的調用，getElementById 和 createElement。
該方法定義如下:
getElementById(elementId: string): HTMLElement | null;
傳遞一個元素 id 字符串，并且返回 HTMLElement 或 null 其中一個。這個方法引用了最重要的類型之一 HTMLElement，是所有其他元素接口的基本接口。例如，getElementById 定義返回的類型是 HTMLElement，可是基礎案例中，變量 p 的實際類型為 HTMLParagraphElement（說明 HTMLParagraphElement 是 HTMLElemnt 的子類型 或 實現了 HTMLElement，具體可參考我另一篇文章中的 類之間的關系）。同時注意這方法可以返回 null，這是因為該方法在運行前不能確定它是否能夠真正找到指定的元素。因為有可能為 null ，所以基礎案例中最后一行代碼使用了新運算符 可選鏈 去調用 appendChild 方法。
這個方法的定義如下(省略了已棄用的定義，可到源碼查看完整定義):
createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K]; createElement(tagName: string, options?: ElementCreationOptions): HTMLElement;
這是一個重載函數，第二個重載是最簡單的，它的工作原理與 getElementById 方法非常相似。傳遞任意字符串并返回標準 HTMLElement 類型。這個定義使開發人員能夠創建唯一的 HTML 元素標記。
例如 document.createElement('xyz') 返回 <xyz></xyz> 元素，顯然不是 HTML 規范指定的元素。
如果你有興趣，可以使用 document.getElementsByTagName 獲取自定義元素
createElement 的第一個定義，使用了泛型模式。分解成幾個部分更好理解，先從泛型表達式開始：<K extends keyof HTMLElementTagNameMap>。表達式定義了泛型參數 K ，它被約束為接口 HTMLElementTagElement 的鍵。HTMLElementTagElement 映射接口包含每個指定的 HTML 標簽名及其對應的類型接口。例如，下面是前5個映射值:
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}有些元素沒有獨特的屬性，所以它們只返回 HTMLElement，擁有獨特屬性和方法的類型返回它們特定的接口（將繼承 HTMLElement 或 實現 HTMLElement）
現在再看其它部分：(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K]。第一個參數 tagName 被定義為泛型參數 K 。TypeScript 解釋器可以從該參數的實參推斷出泛型參數 K 類型。這意味著開發人員在使用這方法時不必指定泛型參數；并且可以在定義的其余部分中使用，如：返回值 HTMLElementTagNameMap[K] 使用 tagName 參數返回相應的類型。在基礎案例中變量 p 調用該方法獲得 HTMLParagraphElement 類型。如果代碼是 document.createElement('a')，那么將獲得 HTMLAnchorElement 類型。
document.getElementById 方法返回 HTMLElement。HTMLElement 接口繼承了 Element 接口，Element 接口繼承了 Node 接口。這使得所有 HTML 元素可以使用 Element 與 Node 的方法。在基礎案例中，我們使用一個定義在 Node 接口上的 appendChild 屬性，把新的 p 元素附加到到網頁。
現在再看基礎案例中最后一行 app?.appendChild(p)。在上面 document.getElementById 部分已經講解了 可選鏈 運算符使用在 app 元素，是因為 app 運行時可能為 null。而 appendChild 方法的定義為：
appendChild<T extends Node>(newChild: T): T;
這方法工作原理和 createElement 方法類似，泛型參數 T 來自對參數 newChild 實參的推斷，并且 T 受到 Node 接口約束。
interface NodeList {
readonly length: number;
item(index: number): Node | null;
forEach(callbackfn: (value: Node, key: number, parent: NodeList) => void, thisArg?: any): void;
[index: number]: Node;
}
interface NodeListOf<TNode extends Node> extends NodeList {
item(index: number): TNode;
forEach(callbackfn: (value: TNode, key: number, parent: NodeListOf<TNode>) => void, thisArg?: any): void;
[index: number]: TNode;
}NodeList 接口只實現了以下屬性和方法：length，item(index)，forEach((value, key, parent) => void)，和數值索引。而 NodeListOf 接口只是擴展了 NodeList 接口（可參考我另一篇文章：接口擴展），并且接收一個泛型 TNode，該泛型受到 Node 接口約束，并且把 NodeList 列表的元素 Node 類型，改為泛型 TNode 類型，類似于 Array<T> ，開發者傳入指定泛型，就返回指定泛型的集合。
在 DOM API 中，有子元素的概念。例如在以下 HTML 中，p 標簽是 div 元素的子元素。
<div>
<p>Hello, World</p>
<p>TypeScript!</p>
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(2) [p, p]
div.childNodes;
// NodeList(2) [p, p]捕獲 div 元素后，children 屬性將返回包含兩個 HTMLParagraphElement (p 元素類型) 的 HTMLCollection 列表。而 childNodes 屬性將返回 NodeList 列表，也是包含兩個 HTMLParagraphElement，但是 NodeList 可以包含額外的 HTML 節點，HTMLCollection 列表不能。
例如，刪除一個 p 標簽，但是保留它的文本。
<div>
<p>Hello, World</p>
TypeScript!
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]children 現在只包含 <p>Hello, World</p> 元素，而 childNodes 比 children 多了一個 text 節點。text 是文字節點，包含文本 "TypeScript!"。children 列表沒有包含這個文本節點，因為它是不 HTMLElement 類型。
這兩個方法是獲取符合獨特約束條件的 dom 元素列表的工具。它們在 lib.dom.d.ts 中被定義為:
/** * Returns the first element that is a descendant of node that matches selectors. */ querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null; querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null; querySelector<E extends Element = Element>(selectors: string): E | null; /** * Returns all element descendants of node that match selectors. */ querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>; querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>; querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
querySelectorAll 的定義類似 getElementsById，只是它返回一個新類型: NodeListOf。這個返回類型本質上是標準 JavaScript 列表元素的自定義實現。可以說，用 Array<E> 替換 NodeListOf<E> 會產生非常相似的用戶體驗。NodeListOf 只實現了以下屬性和方法：length，item(index)，forEach((value, key, parent) => void)，和數值索引。另外，這個方法返回元素列表，不是節點列表。
<ul>
<li>First :)</li>
<li>Second!</li>
<li>Third times a charm.</li>
</ul>;
const first = document.querySelector("li"); // returns the first li element
const all = document.querySelectorAll("li"); // returns the list of all li elements泛型表達式 querySelectorAll<E extends Element = Element>，表示如果指定了泛型 E 的類型，并且是 Element 的子類型，那么 E 就是你指定的類型。如果沒傳指定泛型，那么泛型 E 默認就是 Element 類型。（注意！默認值也要受到 Element 接口的約束。）
例子：
type QuerySelectorAll<E extends number = 123> = (selectors: string) => Array<E>;
// 指定泛型
const Q1: QuerySelectorAll<456> = (str) => {
return [456]
}
// 無指定泛型
const Q2: QuerySelectorAll= (str) => {
return [123]
}例子中，Q1 指定了泛型 E 為 456，456 為 number 的子類型，符合約束，返回值為數組，元素為 456。Q2 沒指定泛型，所以 E 為 123，因為默認值是 123，返回值為數組，元素為 123。默認值也要受到 number 的約束，例子中默認值為 123，是 number 的子類型，所以正確。例子中如果默認值為 string 或其它類型是不行的。
關于“Manipulation TypeScript DOM操作實例代碼分析”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Manipulation TypeScript DOM操作實例代碼分析”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
