kode javascript

Javascript dapatkan semua elemen html

Dalam 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 TypeScript

Anda 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 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);

4

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);

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);

5

Baris 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 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);

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 dan

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

html

<div id="app">

<p>Hello, World!</p>

</div>

0

Definisi 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 atau

html

<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, variabel

html

<div id="app">

<p>Hello, World!</p>

</div>

_4 dalam contoh kode bertipe

html

<div id="app">

<p>Hello, World!</p>

</div>

5. Perhatikan juga bahwa metode ini dapat mengembalikan

html

<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 rantai opsional baru digunakan untuk memanggil

html

<div id="app">

<p>Hello, World!</p>

</div>

7

html

<div id="app">

<p>Hello, World!</p>

</div>

_8

Definisi 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. Berikan

ts

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 unik

Misalnya

ts

getElementById(elementId: string): HTMLElement | null;

_1 mengembalikan elemen

ts

getElementById(elementId: string): HTMLElement | null;

2, jelas bukan elemen yang ditentukan oleh spesifikasi HTML

Bagi 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. Ekspresi ini mendefinisikan parameter umum

ts

getElementById(elementId: string): HTMLElement | null;

6 yang dibatasi oleh kunci antarmuka

ts

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 dipetakan

ts

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 mengimplementasikan

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)

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 pertama

ts

createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K];

createElement(tagName: string, options?: ElementCreationOptions): HTMLElement;

_2 didefinisikan sebagai parameter generik

ts

getElementById(elementId: string): HTMLElement | null;

6. Interpreter TypeScript cukup pintar untuk menyimpulkan parameter umum dari argumen ini. Ini berarti bahwa pengembang sebenarnya tidak harus menentukan parameter umum saat menggunakan metode; . Itulah tepatnya yang terjadi; . Definisi ini adalah bagaimana variabel

html

<div id="app">

<p>Hello, World!</p>

</div>

_4 dari cuplikan kode mendapatkan tipe

html

<div id="app">

<p>Hello, World!</p>

</div>

5. Dan jika kodenya adalah

ts

interface HTMLElementTagNameMap {

"a": HTMLAnchorElement;

"abbr": HTMLElement;

"address": HTMLElement;

"applet": HTMLAppletElement;

"area": HTMLAreaElement;

...

}

_0, maka itu akan menjadi elemen bertipe

ts

interface HTMLElementTagNameMap {

"a": HTMLAnchorElement;

"abbr": HTMLElement;

"address": HTMLElement;

"applet": HTMLAppletElement;

"area": HTMLAreaElement;

...

}

1

Antarmuka

ts

interface HTMLElementTagNameMap {

"a": HTMLAnchorElement;

"abbr": HTMLElement;

"address": HTMLElement;

"applet": HTMLAppletElement;

"area": HTMLAreaElement;

...

}

_2

Fungsi

ts

interface HTMLElementTagNameMap {

"a": HTMLAnchorElement;

"abbr": HTMLElement;

"address": HTMLElement;

"applet": HTMLAppletElement;

"area": HTMLAreaElement;

...

}

_3 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.

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 antarmuka

ts

interface HTMLElementTagNameMap {

"a": HTMLAnchorElement;

"abbr": HTMLElement;

"address": HTMLElement;

"applet": HTMLAppletElement;

"area": HTMLAreaElement;

...

}

6 yang memperluas antarmuka

ts

interface HTMLElementTagNameMap {

"a": HTMLAnchorElement;

"abbr": HTMLElement;

"address": HTMLElement;

"applet": HTMLAppletElement;

"area": HTMLAreaElement;

...

}

2. Ekstensi prototipe ini memungkinkan semua

ts

interface HTMLElementTagNameMap {

"a": HTMLAnchorElement;

"abbr": HTMLElement;

"address": HTMLElement;

"applet": HTMLAppletElement;

"area": HTMLAreaElement;

...

}

8 untuk memanfaatkan subset dari metode standar. Dalam cuplikan kode, kami menggunakan properti yang ditentukan pada antarmuka

ts

interface HTMLElementTagNameMap {

"a": HTMLAnchorElement;

"abbr": HTMLElement;

"address": HTMLElement;

"applet": HTMLAppletElement;

"area": HTMLAreaElement;

...

}

2 untuk menambahkan elemen

html

<div id="app">

<p>Hello, World!</p>

</div>

4 baru ke situs web

ts

appendChild<T extends Node>(newChild: T): T;

_1

Baris 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 ________ 55 _______4 berpotensi menjadi null saat runtime. Metode

html

<div id="app">

<p>Hello, World!</p>

</div>

_7 didefinisikan oleh

ts

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 generik

ts

appendChild<T extends Node>(newChild: T): T;

7 disimpulkan dari argumen

ts

appendChild<T extends Node>(newChild: T): T;

8.

ts

appendChild<T extends Node>(newChild: T): T;

_7 dibatasi ke antarmuka dasar lain

ts

interface HTMLElementTagNameMap {

"a": HTMLAnchorElement;

"abbr": HTMLElement;

"address": HTMLElement;

"applet": HTMLAppletElement;

"area": HTMLAreaElement;

...

}

2

Perbedaan 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 dan

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]

2

Sebelumnya, 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 dari

ts

interface HTMLElementTagNameMap {

"a": HTMLAnchorElement;

"abbr": HTMLElement;

"address": HTMLElement;

"applet": HTMLAppletElement;

"area": HTMLAreaElement;

...

}

6 yang diperluas dari

ts

interface HTMLElementTagNameMap {

"a": HTMLAnchorElement;

"abbr": HTMLElement;

"address": HTMLElement;

"applet": HTMLAppletElement;

"area": HTMLAreaElement;

...

}

2. Di DOM API ada konsep elemen anak. Misalnya dalam HTML berikut, tag

html

<div id="app">

<p>Hello, World!</p>

</div>

_4 adalah turunan dari 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

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]

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, prop

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 akan mengembalikan daftar

tsx

<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 berisi

tsx

<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. Properti

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]

_2 akan mengembalikan daftar node

tsx

<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 tag

html

<div id="app">

<p>Hello, World!</p>

</div>

_4 akan tetap bertipe

tsx

<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, tetapi

tsx

<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 daftar

tsx

<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

Ubah html dengan menghapus salah satu dari

html

<div id="app">

<p>Hello, World!</p>

</div>

4 tag, tetapi tetap pertahankan teksnya

tsx

<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 berisi

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>;

0 elemen, dan

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]

2 berisi

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>;

2 node daripada dua

html

<div id="app">

<p>Hello, World!</p>

</div>

4 node. Bagian

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>;

_2 dari

tsx

<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 adalah

ts

interface HTMLElementTagNameMap {

"a": HTMLAnchorElement;

"abbr": HTMLElement;

"address": HTMLElement;

"applet": HTMLAppletElement;

"area": HTMLAreaElement;

...

}

2 literal yang berisi teks

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>;

7. Daftar

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 tidak mengandung

ts

interface HTMLElementTagNameMap {

"a": HTMLAnchorElement;

"abbr": HTMLElement;

"address": HTMLElement;

"applet": HTMLAppletElement;

"area": HTMLAreaElement;

...

}

2 ini karena tidak dianggap sebagai

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

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);

01 dan

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

Kedua 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 dengan

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);

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, mengganti

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);

06 dengan

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);

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, yang

tsx

<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 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);

13. Meskipun ini mungkin tampak sebagai perbedaan, perhatikan bahwa antarmuka

ts

interface HTMLElementTagNameMap {

"a": HTMLAnchorElement;

"abbr": HTMLElement;

"address": HTMLElement;

"applet": HTMLAppletElement;

"area": HTMLAreaElement;

...

}

6 meluas dari

ts

interface HTMLElementTagNameMap {

"a": HTMLAnchorElement;

"abbr": HTMLElement;

"address": HTMLElement;

"applet": HTMLAppletElement;

"area": HTMLAreaElement;

...

}

2

Untuk 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);

0

Tertarik 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

Bagaimana cara mendapatkan semua elemen HTML dalam JavaScript?

Jika Anda ingin menemukan semua elemen HTML yang cocok dengan pemilih CSS tertentu (id, nama kelas, tipe, atribut, nilai atribut, dll), gunakan querySelectorAll() . Contoh ini mengembalikan daftar semua elemen . This example returns a list of all

elements with class="intro" .

Bagaimana cara mendapatkan konten HTML dalam JavaScript?

Anda dapat menggunakan innerHTML untuk mendapatkan dan mengatur konten HTML dalam sebuah elemen . var elemen = dokumen. querySelector('#beberapa-elem'); . innerHTML; .

Bagaimana cara mendapatkan semua elemen dalam dokumen JavaScript?

Mendapatkan semua elemen menggunakan var all = document. getElementsByTagName("*"); . panjangnya; . Simpan jawaban ini.

Bagaimana cara mendapatkan seluruh dokumen HTML sebagai string dalam JavaScript?

Di sini beberapa metode dibahas. Metode JavaScript getElementsByTagName() . Metode ini mengembalikan sekumpulan semua elemen dalam dokumen dengan nama tag yang ditentukan, sebagai objek NodeList. Objek ini mewakili kumpulan node, yang diakses oleh nomor indeks. Indeks dimulai dari 0.

Pos Terkait

Cara menggunakan leetcode javascript course
Mysql untuk excel tidak berfungsi
Cara menggunakan fungsi tuple pada python
Javascript dapatkan nama file dari jalur
Daftar split python setiap n item
Bagaimana kita menampilkan informasi konfigurasi instalasi php?
Apa kesalahan koneksi mysql?
Cara membuat struk di php
Cara menggunakan mengubah ukuran font bootstrap
Tidak dapat menemukan paket php7 2 dev

Toplist

#1
Top 7 unterschied griechischer joghurt und joghurt griechischer art 2022
#2
Top 9 ibc container 600 liter gebraucht 2022
#3
Top 7 excel hintergrundfarbe auslesen ohne vba 2022
#4
Top 6 dji mavic air 2 wann welcher filter 2022
#5
Top 7 rosen schwarze flecken am stiel 2022
#6
Top 8 wann wird es wieder später dunkel 2022 2022
#7
Top 6 em nome do pai em nome do filho 2022
#8
Top 8 zdf neben der spur -- erlöse mich 2022
#9
Top 8 como melhorar dor no calcanhar 2022

Postingan terbaru

LIHAT SEMUA

Kiat Bagus Yang Cara Belajar Apa Q&A Location What kode Q&a Teknologi Jelaskan Sebutkan Kesehatan dan kecantikan Bagaimana Toplist Berapa Contoh Apa yang When Wo php disebut Berikut ini Fungsi python Facebook Apa arti Arti kata Eth Harus Tips Why Was Review Makanan lezat Mengapa topten Technologie Kryto Beda Tentang Anak Dimaksud Who How to Belajar dengan baik Permainan Jawa Timur mysql Jawa Barat