Pemilih, elemen, larik elemen, string HTML, atau objek jQuery;
Metode .after() dan .insertAfter() melakukan tugas yang sama. Perbedaan utamanya terletak pada sintaks—khususnya, dalam penempatan konten dan target. Dengan .after(), ekspresi pemilih sebelum metode adalah wadah setelah konten disisipkan. Sebaliknya, dengan .insertAfter(), konten mendahului metode, baik sebagai ekspresi pemilih atau sebagai markup yang dibuat dengan cepat, dan disisipkan setelah wadah target
Perhatikan HTML berikut
1
2
3
4
5
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
Kita dapat membuat konten dan menyisipkannya setelah beberapa elemen sekaligus
1
$( "<p>Test</p>" ).insertAfter( ".inner" );
_Setiap elemen
$( "<p>Test</p>" ).insertAfter( ".inner" );
_0 dalam mendapatkan konten baru ini1
2
3
4
5
6
7
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
<p>Test</p>
</div>
Kami juga dapat memilih elemen pada halaman dan menyisipkannya setelah yang lain
1
$( "h2" ).insertAfter( $( ".container" ) );
_Jika sebuah elemen yang dipilih dengan cara ini dimasukkan ke satu lokasi di tempat lain di DOM, itu akan dipindahkan setelah target (tidak dikloning) dan set baru yang terdiri dari elemen yang dimasukkan dikembalikan
1
2
3
4
5
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>
Namun, jika ada lebih dari satu elemen target, salinan kloning dari elemen yang disisipkan akan dibuat untuk setiap target setelah yang pertama, dan kumpulan baru itu (elemen asli ditambah klon) dikembalikan
Sebelum jQuery 1. 9, kasus append-to-single-element tidak membuat set baru, melainkan mengembalikan set asli yang membuatnya sulit untuk menggunakan metode
$( "<p>Test</p>" ).insertAfter( ".inner" );
1 dengan andal saat digunakan dengan jumlah elemen yang tidak diketahuiDalam 20+ tahun sejak standarisasinya, JavaScript telah berkembang sangat jauh. Meskipun pada tahun 2020, JavaScript dapat digunakan di server, dalam ilmu data, dan bahkan di perangkat IoT, penting untuk mengingat kasus penggunaannya yang paling populer. browser web
Situs web terdiri dari dokumen HTML dan/atau XML. Dokumen-dokumen ini statis, tidak berubah. Document Object Model (DOM) adalah antarmuka pemrograman yang diterapkan oleh browser untuk membuat situs web statis berfungsi. DOM API dapat digunakan untuk mengubah struktur, gaya, dan konten dokumen. API sangat kuat sehingga kerangka kerja frontend yang tak terhitung jumlahnya (jQuery, React, Angular, dll. ) telah dikembangkan di sekitarnya untuk membuat situs web dinamis lebih mudah untuk dikembangkan
TypeScript adalah superset JavaScript yang diketik, dan mengirim definisi tipe untuk DOM API. Definisi ini sudah tersedia di proyek TypeScript default apa pun. Dari 20.000+ baris definisi di lib. dom. d. ts, satu menonjol di antara yang lain.
ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
1. Jenis ini adalah tulang punggung untuk manipulasi DOM dengan TypeScriptAnda dapat menjelajahi kode sumber untuk definisi tipe DOM
Contoh Dasar
Diberikan indeks yang disederhanakan. html
html
<!DOCTYPE html>
<html lang="en">
<head><title>TypeScript Dom Manipulation</title></head>
<body>
<div id="app"></div>
<!-- Assume index.js is the compiled output of index.ts -->
<script src="index.js"></script>
</body>
</html>
_Mari jelajahi skrip TypeScript yang menambahkan elemen
ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
3 ke elements
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
4ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
Setelah mengkompilasi dan menjalankan index. html halaman, HTML yang dihasilkan akan menjadi
html
<div id="app">
<p>Hello, World!</p>
</div>
Antarmuka
ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
_5Baris pertama kode TypeScript menggunakan variabel global
ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
6. Memeriksa variabel menunjukkan bahwa itu ditentukan oleh antarmukats
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
5 dari lib. dom. d. berkas .ts. Cuplikan kode berisi panggilan ke dua metode,ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
8 dants
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
9html
<div id="app">
<p>Hello, World!</p>
</div>
0Definisi untuk metode ini adalah sebagai berikut
ts
getElementById(elementId: string): HTMLElement | null;
Berikan string id elemen dan itu akan mengembalikan
ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
1 atauhtml
<div id="app">
<p>Hello, World!</p>
</div>
2. Metode ini memperkenalkan salah satu jenis yang paling penting,ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
1. Ini berfungsi sebagai antarmuka dasar untuk setiap antarmuka elemen lainnya. Misalnya, variabelhtml
<div id="app">
<p>Hello, World!</p>
</div>
_4 dalam contoh kode bertipehtml
<div id="app">
<p>Hello, World!</p>
</div>
5. Perhatikan juga bahwa metode ini dapat mengembalikanhtml
<div id="app">
<p>Hello, World!</p>
</div>
2. Ini karena metode tidak dapat memastikan waktu proses awal jika metode tersebut benar-benar dapat menemukan elemen yang ditentukan atau tidak. Di baris terakhir cuplikan kode, operator rangkaian opsional baru digunakan untuk memanggilhtml
<div id="app">
<p>Hello, World!</p>
</div>
7html
<div id="app">
<p>Hello, World!</p>
</div>
8Definisi untuk metode ini adalah (saya telah menghilangkan definisi usang)
ts
createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K];
createElement(tagName: string, options?: ElementCreationOptions): HTMLElement;
Ini adalah definisi fungsi yang kelebihan beban. Kelebihan kedua adalah yang paling sederhana dan bekerja sangat mirip dengan metode
ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
8. Berikants
getElementById(elementId: string): HTMLElement | null;
0 apa pun dan itu akan mengembalikan HTMLElement standar. Definisi inilah yang memungkinkan pengembang untuk membuat tag elemen HTML yang unikMisalnya
ts
getElementById(elementId: string): HTMLElement | null;
_1 mengembalikan elements
getElementById(elementId: string): HTMLElement | null;
2, jelas bukan elemen yang ditentukan oleh spesifikasi HTMLBagi yang tertarik, Anda dapat berinteraksi dengan elemen tag khusus menggunakan
ts
getElementById(elementId: string): HTMLElement | null;
3
Untuk definisi pertama
ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
9, ini menggunakan beberapa pola umum lanjutan. Paling baik dipahami dipecah menjadi potongan-potongan, dimulai dengan ekspresi umum.ts
getElementById(elementId: string): HTMLElement | null;
_5. Ungkapan ini mendefinisikan parameter umumts
getElementById(elementId: string): HTMLElement | null;
_6 yang dibatasi ke kunci antarmukats
getElementById(elementId: string): HTMLElement | null;
7. Antarmuka peta berisi setiap nama tag HTML yang ditentukan dan jenis antarmuka yang sesuai. Misalnya di sini adalah 5 nilai pertama yang dipetakants
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
Beberapa elemen tidak menunjukkan properti unik sehingga mereka hanya mengembalikan
ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
1, tetapi tipe lain memang memiliki properti dan metode unik sehingga mereka mengembalikan antarmuka khusus mereka (yang akan diperluas dari atau mengimplementasikants
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
1)Sekarang, untuk sisa definisi
ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
_9.ts
createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K];
createElement(tagName: string, options?: ElementCreationOptions): HTMLElement;
1. Argumen pertamats
createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K];
createElement(tagName: string, options?: ElementCreationOptions): HTMLElement;
_2 didefinisikan sebagai parameter generikts
getElementById(elementId: string): HTMLElement | null;
6. Interpreter TypeScript cukup pintar untuk menyimpulkan parameter generik dari argumen ini. Ini berarti bahwa pengembang sebenarnya tidak harus menentukan parameter umum saat menggunakan metode; . Itulah tepatnya yang terjadi; . Definisi ini adalah bagaimana variabelhtml
<div id="app">
<p>Hello, World!</p>
</div>
_4 dari cuplikan kode mendapatkan tipehtml
<div id="app">
<p>Hello, World!</p>
</div>
5. Dan jika kodenya adalahts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
_0, maka itu akan menjadi elemen bertipets
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
1Antarmuka
ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
_2Fungsi
ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
_3 mengembalikants
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
1.ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
1 antarmuka memperluas antarmukats
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
6 yang memperluas antarmukats
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
2. Ekstensi prototipe ini memungkinkan semuats
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
8 untuk menggunakan subset dari metode standar. Dalam cuplikan kode, kami menggunakan properti yang ditentukan pada antarmukats
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
2 untuk menambahkan elemenhtml
<div id="app">
<p>Hello, World!</p>
</div>
4 baru ke situs webts
appendChild<T extends Node>(newChild: T): T;
1Baris terakhir potongan kode adalah
ts
appendChild<T extends Node>(newChild: T): T;
2. Sebelumnya,ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
3 , detail bagian yang digunakan operator rangkaian opsional di sini karena ________ 62 _______4 berpotensi menjadi null saat runtime. Metodehtml
<div id="app">
<p>Hello, World!</p>
</div>
_7 didefinisikan olehts
appendChild<T extends Node>(newChild: T): T;
Metode ini bekerja mirip dengan metode
ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
_9 karena parameter umumts
appendChild<T extends Node>(newChild: T): T;
7 disimpulkan dari arguments
appendChild<T extends Node>(newChild: T): T;
8.ts
appendChild<T extends Node>(newChild: T): T;
7 dibatasi ke antarmuka dasar laints
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
2Perbedaan antara
tsx
<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]
1 dantsx
<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]
2Sebelumnya, dokumen ini merinci antarmuka
ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
_1 yang diperluas darits
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
6 yang diperluas darits
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
2. Di DOM API ada konsep elemen anak. Misalnya dalam HTML berikut, taghtml
<div id="app">
<p>Hello, World!</p>
</div>
_4 adalah turunan dari elementsx
<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]
7tsx
<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]
Setelah menangkap elemen
tsx
<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]
7, proptsx
<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]
1 akan mengembalikan daftartsx
<div>
<p>Hello, World</p>
TypeScript!
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]
0 yang berisitsx
<div>
<p>Hello, World</p>
TypeScript!
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]
1. Propertitsx
<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]
_2 akan mengembalikan daftar nodetsx
<div>
<p>Hello, World</p>
TypeScript!
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]
3 yang serupa. Setiap taghtml
<div id="app">
<p>Hello, World!</p>
</div>
_4 akan tetap bertipetsx
<div>
<p>Hello, World</p>
TypeScript!
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]
1, tetapitsx
<div>
<p>Hello, World</p>
TypeScript!
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]
3 dapat berisi node HTML tambahan yang tidak dapat dilakukan oleh daftartsx
<div>
<p>Hello, World</p>
TypeScript!
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]
0Ubah html dengan menghapus salah satu dari
html
<div id="app">
<p>Hello, World!</p>
</div>
4 tag, tetapi pertahankan teksnyatsx
<div>
<p>Hello, World</p>
TypeScript!
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]
Lihat bagaimana kedua daftar berubah.
tsx
<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]
_1 sekarang hanya berisits
/**
* 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>;
0 elemen, dantsx
<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]
2 berisits
/**
* 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>;
2 node daripada duahtml
<div id="app">
<p>Hello, World!</p>
</div>
4 node. Bagiants
/**
* 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>;
_2 daritsx
<div>
<p>Hello, World</p>
TypeScript!
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]
3 adalahts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
2 literal yang berisi teksts
/**
* 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>;
7. Daftartsx
<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]
_1 tidak mengandungts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
2 ini karena tidak dianggap sebagaits
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
1Metode
ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
_01 dants
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
02Kedua metode ini adalah alat yang hebat untuk mendapatkan daftar elemen dom yang sesuai dengan batasan yang lebih unik. Mereka didefinisikan dalam lib. dom. d. ts sebagai
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>;
Definisi
ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
_02 mirip dengants
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
04, kecuali mengembalikan tipe baru.ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
_05. Jenis pengembalian ini pada dasarnya adalah implementasi khusus dari elemen daftar JavaScript standar. Bisa dibilang, menggantits
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
06 dengants
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
07 akan menghasilkan pengalaman pengguna yang sangat mirip.ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
05 hanya mengimplementasikan properti dan metode berikut.ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
09 ,ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
10,ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
11 , dan pengindeksan numerik. Selain itu, metode ini mengembalikan daftar elemen, bukan simpul, yangtsx
<div>
<p>Hello, World</p>
TypeScript!
</div>;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]
3 dikembalikan dari metodets
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
13. Meskipun ini mungkin tampak sebagai perbedaan, perhatikan bahwa antarmukats
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
6 meluas darits
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
2Untuk melihat metode ini beraksi, ubah kode yang ada menjadi
ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
0Tertarik untuk mempelajari lebih lanjut?
Bagian terbaik tentang lib. dom. d. Definisi tipe ts adalah bahwa mereka mencerminkan tipe yang dianotasi di situs dokumentasi Mozilla Developer Network (MDN). Misalnya, antarmuka
ts
// 1. Select the div element using the id property
const app = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
const p = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
_1 didokumentasikan oleh halaman HTMLElement ini di MDN. Halaman-halaman ini mencantumkan semua properti, metode, dan terkadang bahkan contoh yang tersedia. Aspek hebat lainnya dari halaman ini adalah menyediakan tautan ke dokumen standar terkait. Berikut adalah link ke