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