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 Show
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. _1. Jenis ini adalah tulang punggung untuk manipulasi DOM dengan TypeScript
Contoh DasarDiberikan indeks yang disederhanakan. html _ Mari jelajahi skrip TypeScript yang menambahkan elemen 3 ke elemen 4
Setelah mengkompilasi dan menjalankan index. html halaman, HTML yang dihasilkan akan menjadi
Antarmuka ts// 1. Select the div element using the id propertyconst app = document.getElementById("app");// 2. Create a new <p></p> element programmaticallyconst p = document.createElement("p");// 3. Add the text contentp.textContent = "Hello, World!";// 4. Append the p element to the div elementapp?.appendChild(p);5Baris pertama kode TypeScript menggunakan variabel global 6. Memeriksa variabel menunjukkan bahwa itu ditentukan oleh antarmuka 5 dari lib. dom. d. berkas .ts. Cuplikan kode berisi panggilan ke dua metode, 8 dan 9 html<div id="app"> <p>Hello, World!</p></div>0Definisi untuk metode ini adalah sebagai berikut
Berikan string id elemen dan itu akan mengembalikan 1 atau 2. Metode ini memperkenalkan salah satu jenis yang paling penting, 1. Ini berfungsi sebagai antarmuka dasar untuk setiap antarmuka elemen lainnya. Misalnya, variabel _4 dalam contoh kode bertipe 5. Perhatikan juga bahwa metode ini dapat mengembalikan 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 7 html<div id="app"> <p>Hello, World!</p></div>_8Definisi untuk metode ini adalah (saya telah menghilangkan definisi usang)
Ini adalah definisi fungsi yang kelebihan beban. Kelebihan kedua adalah yang paling sederhana dan bekerja sangat mirip dengan metode 8. Berikan _0 apa pun dan itu akan mengembalikan HTMLElement standar. Definisi inilah yang memungkinkan pengembang untuk membuat tag elemen HTML yang unik Misalnya _1 mengembalikan elemen 2, jelas bukan elemen yang ditentukan oleh spesifikasi HTML
Untuk definisi pertama _9, ini menggunakan beberapa pola umum lanjutan. Paling baik dipahami dipecah menjadi potongan-potongan, dimulai dengan ekspresi umum. 5. Ekspresi ini mendefinisikan parameter umum 6 yang dibatasi oleh kunci antarmuka 7. Antarmuka peta berisi setiap nama tag HTML yang ditentukan dan jenis antarmuka yang sesuai. Misalnya di sini adalah 5 nilai pertama yang dipetakan
Beberapa elemen tidak menunjukkan properti unik sehingga mereka hanya mengembalikan 1, tetapi tipe lain memang memiliki properti dan metode unik sehingga mereka mengembalikan antarmuka khusus mereka (yang akan diperluas dari atau mengimplementasikan 1) Sekarang, untuk sisa definisi _9. 1. Argumen pertama _2 didefinisikan sebagai parameter generik 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 _4 dari cuplikan kode mendapatkan tipe 5. Dan jika kodenya adalah _0, maka itu akan menjadi elemen bertipe 1 Antarmuka tsinterface HTMLElementTagNameMap { "a": HTMLAnchorElement; "abbr": HTMLElement; "address": HTMLElement; "applet": HTMLAppletElement; "area": HTMLAreaElement; ...}_2Fungsi _3 mengembalikan 1. 1 antarmuka memperluas antarmuka 6 yang memperluas antarmuka 2. Ekstensi prototipe ini memungkinkan semua 8 untuk memanfaatkan subset dari metode standar. Dalam cuplikan kode, kami menggunakan properti yang ditentukan pada antarmuka 2 untuk menambahkan elemen 4 baru ke situs web tsappendChild<T extends Node>(newChild: T): T;_1Baris terakhir potongan kode adalah 2. Sebelumnya, _3 , detail bagian yang digunakan operator rangkaian opsional di sini karena ________ 55 _______4 berpotensi menjadi null saat runtime. Metode _7 didefinisikan oleh
Metode ini bekerja mirip dengan metode 9 karena parameter generik 7 disimpulkan dari argumen 8. _7 dibatasi ke antarmuka dasar lain 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]2Sebelumnya, dokumen ini merinci antarmuka _1 yang diperluas dari 6 yang diperluas dari 2. Di DOM API ada konsep elemen anak. Misalnya dalam HTML berikut, tag _4 adalah turunan dari elemen 7
Setelah menangkap elemen 7, prop 1 akan mengembalikan daftar 0 yang berisi 1. Properti _2 akan mengembalikan daftar node 3 yang serupa. Setiap tag _4 akan tetap bertipe 1, tetapi 3 dapat berisi node HTML tambahan yang tidak dapat dilakukan oleh daftar 0 Ubah html dengan menghapus salah satu dari 4 tag, tetapi tetap pertahankan teksnya
Lihat bagaimana kedua daftar berubah. _1 sekarang hanya berisi 0 elemen, dan 2 berisi 2 node daripada dua 4 node. Bagian _2 dari 3 adalah 2 literal yang berisi teks 7. Daftar _1 tidak mengandung 2 ini karena tidak dianggap sebagai 1 Metode ts// 1. Select the div element using the id propertyconst app = document.getElementById("app");// 2. Create a new <p></p> element programmaticallyconst p = document.createElement("p");// 3. Add the text contentp.textContent = "Hello, World!";// 4. Append the p element to the div elementapp?.appendChild(p);01 dan ts// 1. Select the div element using the id propertyconst app = document.getElementById("app");// 2. Create a new <p></p> element programmaticallyconst p = document.createElement("p");// 3. Add the text contentp.textContent = "Hello, World!";// 4. Append the p element to the div elementapp?.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
Definisi 02 mirip dengan 04, kecuali mengembalikan tipe baru. _05. Jenis pengembalian ini pada dasarnya adalah implementasi khusus dari elemen daftar JavaScript standar. Bisa dibilang, mengganti 06 dengan 07 akan menghasilkan pengalaman pengguna yang sangat mirip. _05 hanya mengimplementasikan properti dan metode berikut. 09 , 10, 11 , dan pengindeksan numerik. Selain itu, metode ini mengembalikan daftar elemen, bukan simpul, yang 3 dikembalikan dari metode 13. Meskipun ini mungkin tampak sebagai perbedaan, perhatikan bahwa antarmuka 6 meluas dari 2 Untuk melihat metode ini beraksi, ubah kode yang ada menjadi 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 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. |