Sulit untuk mendapatkan contoh kode JavaScript yang berguna di web yang tidak berinteraksi dengan dokumen HTML. Secara umum, kode Anda perlu membaca nilai dari halaman, memprosesnya dengan cara tertentu, lalu menghasilkan keluaran dalam bentuk perubahan yang terlihat atau pesan informasi. Sebagai langkah Anda selanjutnya menuju tujuan membuat antarmuka responsif untuk halaman dan aplikasi Anda, artikel ini dan artikel berikutnya akan memperkenalkan Model Objek Dokumen, yang menyediakan mekanisme untuk memeriksa dan memanipulasi lapisan semantik dan presentasional yang Anda buat
Setelah membaca artikel Kurikulum Standar Web ini, Anda akan memiliki pemahaman yang baik tentang apa itu DOM, dan bagaimana Anda dapat menggunakannya untuk menavigasi halaman HTML untuk menemukan tempat yang tepat di mana Anda perlu mengumpulkan beberapa data . Artikel berikutnya dalam seri ini [Membuat dan memodifikasi HTML] akan membahasnya, menguraikan metode yang dapat digunakan untuk memanipulasi data pada halaman, mengubah nilai, atau membuat elemen dan atribut yang sama sekali baru.
Menanam benih
DOM, seperti yang bisa Anda tebak dari namanya, Document Object Model, adalah model dokumen HTML yang dibuat oleh browser saat memuat halaman web Anda. JavaScript memiliki akses ke semua informasi model ini. Mari mundur sejenak, dan pertimbangkan apa sebenarnya yang sedang dimodelkan
Saat saya membuat halaman, tujuan saya adalah menambahkan makna pada konten mentah dengan memetakannya ke tag HTML yang saya miliki. Satu bagian konten adalah satu paragraf, jadi saya akan menggunakan tag
var theHtmlNode = document.childNodes[0];1; . Saya juga menyandikan hubungan antar elemen.
var theHtmlNode = document.childNodes[0];3 bidang masing-masing memiliki
var theHtmlNode = document.childNodes[0];4, dan mungkin duduk bersama di dalam
var theHtmlNode = document.childNodes[0];5. Selain itu, saya akan membahas sedikit di luar kumpulan tag HTML dasar ini dengan menambahkan
var theHtmlNode = document.childNodes[0];6 dan
var theHtmlNode = document.childNodes[0];7 atribut yang sesuai untuk memasukkan halaman dengan lebih banyak struktur yang dapat saya gunakan untuk mengatur gaya atau memanipulasinya. Setelah kerangka kerja HTML ini dibuat, saya akan menggunakan CSS untuk mendandani semantik murni tersebut dengan presentasi bergaya. Et voila, Anda telah membuat halaman yang akan menyenangkan pengguna Anda
Tapi itu belum semuanya. Saya telah membuat dokumen yang dipenuhi dengan informasi meta yang dapat saya manipulasi menggunakan JavaScript. Saya dapat menemukan elemen atau grup elemen tertentu dan menghapus, menambah, dan memodifikasinya sesuai dengan variabel yang ditentukan pengguna; . Agar JavaScript melakukan hal-hal ini, diperlukan akses ke informasi, dan DOM menyediakan JavaScript dengan semua ini
Penting juga untuk dicatat bahwa HTML dan CSS yang terstruktur dengan baik membentuk benih dari mana model JavaScript untuk halaman akan tumbuh. Model dokumen yang dibuat dengan buruk akan berbeda dengan cara yang tidak diinginkan dari ekspektasi Anda, dan berperilaku tidak konsisten di seluruh browser. Maka, sangat penting bahwa HTML dan CSS Anda dibuat dengan baik dan valid untuk memastikan bahwa JavaScript berakhir dengan model yang Anda pikir seharusnya.
Tumbuh pohon
Setelah membuat dan menata dokumen Anda, langkah selanjutnya adalah menyerahkannya ke browser untuk ditampilkan kepada pengguna Anda. Di sinilah DOM berperan, membaca dokumen yang telah Anda tulis, dan secara dinamis menghasilkan DOM yang dapat Anda gunakan dalam program Anda. Secara khusus, DOM merepresentasikan laman HTML sebagai pohon, dengan cara yang hampir sama Anda dapat merepresentasikan leluhur Anda sebagai "pohon keluarga". Setiap elemen pada halaman terkandung dalam DOM sebagai simpul, dengan cabang-cabang yang terhubung ke elemen yang dikandungnya secara langsung [anak-anaknya], dan ke elemen yang secara langsung menampungnya [induknya]. Mari bekerja melalui dokumen HTML sederhana untuk memperjelas hubungan ini
This is a Document! This is a header!This is a paragraph! Excitement!
This is also a paragraph, but it's not nearly as exciting as the last one.
Seperti yang Anda lihat, seluruh dokumen terkandung dalam elemen
var theHtmlNode = document.childNodes[0];8. Elemen itu langsung berisi dua lainnya.
var theHtmlNode = document.childNodes[0];9 dan
alert[ "theHtmlNode is a " + theHtmlNode.nodeName + " node!" ];0. Mereka muncul dalam model kita sebagai anaknya, dan mereka masing-masing menunjuk ke
var theHtmlNode = document.childNodes[0];8 sebagai induknya. Dan begitulah, turun melalui hierarki dokumen, dengan setiap elemen menunjuk ke keturunan langsungnya sebagai anak-anak, dan ke leluhur langsungnya sebagai induk
alert[ "theHtmlNode is a " + theHtmlNode.nodeName + " node!" ];
_2 adalah anak darivar theHtmlNode = document.childNodes[0];
9alert[ "theHtmlNode is a " + theHtmlNode.nodeName + " node!" ];
_0 memiliki tiga anak — duavar theHtmlNode = document.childNodes[0];
1 elemen danalert[ "theHtmlNode is a " + theHtmlNode.nodeName + " node!" ];
6 elemen- Elemen
var theHtmlNode = document.childNodes[0];
1 denganalert[ "theHtmlNode is a " + theHtmlNode.nodeName + " node!" ];
8 memiliki turunannya sendiri — elemenalert[ "theHtmlNode is a " + theHtmlNode.nodeName + " node!" ];
9 - Konten teks biasa dari elemen [yaitu “Ini adalah Dokumen. ”] juga direpresentasikan dalam DOM, sebagai node teks. Ini tidak memiliki anak sendiri, tetapi menunjuk ke elemen yang mengandung mereka sebagai orang tua
Jadi, hierarki DOM yang kita buat untuk dokumen HTML di atas direpresentasikan secara visual seperti Gambar 1
Gambar 1. Dokumen HTML di atas direpresentasikan secara visual sebagai pohon DOM
Ini adalah pemetaan langsung dari dokumen HTML ke struktur pohon ini, yang secara ringkas menangkap hubungan langsung antar elemen pada halaman, membuat hierarki menjadi jelas. Namun, Anda akan melihat bahwa saya telah menambahkan simpul berlabel
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }0 di atas simpul
var theHtmlNode = document.childNodes[0];8. Ini adalah root dokumen, dan bertindak sebagai pengait JavaScript yang paling terlihat ke dalam pohon
Node
Sebelum saya memanjat pohon dan mulai berayun dari cabang ke cabang, mari luangkan waktu sejenak untuk memeriksa secara mendetail apa sebenarnya yang akan saya pegang.
Setiap simpul di pohon DOM adalah objek yang mewakili satu elemen pada halaman. Node memahami hubungannya dengan node lain di sekitar mereka, dan mengandung banyak informasi tentang diri mereka sendiri. Dengan cara yang hampir sama seperti seorang anak memanjat dari satu cabang ke cabang terdekat berikutnya di halaman belakang pohon ek, saya dapat mengumpulkan semua informasi dari sebuah simpul yang saya perlukan untuk sampai ke induknya atau anak-anaknya.
Seperti yang Anda duga, mengingat sifat objek JavaScript, informasi yang saya cari dalam kasus ini diekspos melalui properti node. Secara khusus, properti
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }2 dan
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }3. Karena setiap elemen pada halaman memiliki paling banyak satu induk, properti
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }2 bersifat langsung. itu hanya memberi Anda akses ke induk node. Node dapat memiliki sejumlah anak, jadi properti
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }3 sebenarnya adalah array. Setiap elemen array menunjuk ke satu anak, dalam urutan yang sama mereka muncul di dokumen. Oleh karena itu, elemen
alert[ "theHtmlNode is a " + theHtmlNode.nodeName + " node!" ];0 dokumen contoh kita akan memiliki larik
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }3 yang berisi
alert[ "theHtmlNode is a " + theHtmlNode.nodeName + " node!" ];6,
var theHtmlNode = document.childNodes[0];1 pertama, lalu
var theHtmlNode = document.childNodes[0];1 kedua, dalam urutan itu
Ini bukan satu-satunya properti node yang menarik, tentu saja. Tapi ini adalah awal yang baik. Jadi kode apa yang saya gunakan untuk mendapatkan salah satu node ini?
Cabang ke cabang
Tempat terbaik untuk memulai adalah di root dokumen, dapat diakses melalui objek yang diberi nama kreatif
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }0. Karena
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }_0 tepat di akarnya, ia tidak memiliki
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }2, tetapi memiliki satu anak. simpul elemen
var theHtmlNode = document.childNodes[0];8, yang dapat kita akses melalui larik
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }0
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }3
var theHtmlNode = document.childNodes[0];
Baris kode ini membuat variabel baru bernama
var theHtmlNode = document.childNodes[0]; var theBodyNode = theHtmlNode.childNodes[1]; var theParagraphNode = theBodyNode.childNodes[1]; alert[ "theParagraphNode is a " + theParagraphNode.nodeName + " node!" ];7, dan menetapkannya sebagai nilai anak pertama objek
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }0 [ingat bahwa larik JavaScript mulai diberi nomor dengan 0, bukan 1]. Anda dapat memastikan bahwa Anda telah mendapatkan node
var theHtmlNode = document.childNodes[0];8 dengan memeriksa properti
var theHtmlNode = document.childNodes[0]; var theBodyNode = theHtmlNode.childNodes[1]; var theParagraphNode = theBodyNode.childNodes[1]; alert[ "theParagraphNode is a " + theParagraphNode.nodeName + " node!" ];7
var theParagraphNode = document.childNodes[0].childNodes[1].childNodes[1]; alert[ "theParagraphNode is a " + theParagraphNode.nodeName + " node!" ];1
var theHtmlNode = document.childNodes[0]; var theBodyNode = theHtmlNode.childNodes[1]; var theParagraphNode = theBodyNode.childNodes[1]; alert[ "theParagraphNode is a " + theParagraphNode.nodeName + " node!" ];7, yang memberikan informasi penting tentang jenis node yang Anda hadapi
alert[ "theHtmlNode is a " + theHtmlNode.nodeName + " node!" ];
Kode ini memunculkan kotak peringatan yang bertuliskan “theHtmlNode is a HTML node. ”. Besar. Properti
var theParagraphNode = document.childNodes[0].childNodes[1].childNodes[1]; alert[ "theParagraphNode is a " + theParagraphNode.nodeName + " node!" ];_1 memberi Anda akses ke tipe node. Untuk simpul elemen, properti berisi nama tag dalam huruf besar. ini dia "HTML"; . Properti
var theParagraphNode = document.childNodes[0].childNodes[1].childNodes[1]; alert[ "theParagraphNode is a " + theParagraphNode.nodeName + " node!" ];1 node teks adalah "#teks", dan
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }0
var theParagraphNode = document.childNodes[0].childNodes[1].childNodes[1]; alert[ "theParagraphNode is a " + theParagraphNode.nodeName + " node!" ];1 adalah "#dokumen"
Anda juga tahu bahwa
var theHtmlNode = document.childNodes[0]; var theBodyNode = theHtmlNode.childNodes[1]; var theParagraphNode = theBodyNode.childNodes[1]; alert[ "theParagraphNode is a " + theParagraphNode.nodeName + " node!" ];_7 harus berisi referensi ke induknya. Anda dapat memeriksa apakah itu berfungsi seperti yang diharapkan dengan tes berikut
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }
Ini seperti yang kami harapkan. Dengan menggunakan informasi ini, mari kita menulis beberapa kode untuk mendapatkan referensi ke paragraf pertama di badan dokumen contoh. Ini adalah anak kedua dari elemen
alert[ "theHtmlNode is a " + theHtmlNode.nodeName + " node!" ];_0, yang merupakan anak kedua dari elemen
var theHtmlNode = document.childNodes[0];8, yang merupakan anak pertama dari objek
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }0. Wah
var theHtmlNode = document.childNodes[0]; var theBodyNode = theHtmlNode.childNodes[1]; var theParagraphNode = theBodyNode.childNodes[1]; alert[ "theParagraphNode is a " + theParagraphNode.nodeName + " node!" ];
Luar biasa. Itu melakukan persis seperti yang kita inginkan. Tapi itu sangat bertele-tele, dan ada cara yang jauh lebih baik untuk menulisnya. Dalam artikel Objek, Anda mengetahui bahwa Anda dapat menggabungkan referensi objek bersama;
var theParagraphNode = document.childNodes[0].childNodes[1].childNodes[1]; alert[ "theParagraphNode is a " + theParagraphNode.nodeName + " node!" ];
Ini jauh lebih sedikit bertele-tele, dan menghemat sedikit kode
Anak pertama simpul selalu
var theParagraphNode = document.firstChild.lastChild.childNodes[1]; alert[ "theParagraphNode is a " + theParagraphNode.nodeName + " node!" ];0, dan anak terakhir simpul selalu
var theParagraphNode = document.firstChild.lastChild.childNodes[1]; alert[ "theParagraphNode is a " + theParagraphNode.nodeName + " node!" ];1. Saya cukup sering mengaksesnya, tetapi agak sulit untuk mengetik berulang kali. Mengingat seberapa sering mereka berguna, DOM memberi Anda pintasan eksplisit untuk keduanya.
var theParagraphNode = document.firstChild.lastChild.childNodes[1]; alert[ "theParagraphNode is a " + theParagraphNode.nodeName + " node!" ];2 dan
var theParagraphNode = document.firstChild.lastChild.childNodes[1]; alert[ "theParagraphNode is a " + theParagraphNode.nodeName + " node!" ];3 masing-masing. Karena simpul
var theHtmlNode = document.childNodes[0];8 adalah anak pertama dari objek
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }0, dan simpul
alert[ "theHtmlNode is a " + theHtmlNode.nodeName + " node!" ];0 adalah anak terakhir dari simpul
var theHtmlNode = document.childNodes[0];8, Anda dapat menulis ulang kode di atas dengan lebih jelas seperti
var theParagraphNode = document.firstChild.lastChild.childNodes[1]; alert[ "theParagraphNode is a " + theParagraphNode.nodeName + " node!" ];
Metode navigasi simpul jarak dekat ini berguna, dan membiarkan Anda pergi ke mana pun Anda suka dalam dokumen, tetapi rumit. Bahkan dalam dokumen contoh kecil ini, Anda dapat mulai melihat betapa sulitnya menavigasi dari simpul akar ke kedalaman markup. Pasti ada cara yang lebih baik untuk berkeliling
Akses langsung
Sangat sulit untuk menentukan jalur eksplisit ke setiap elemen yang Anda minati di halaman. Selain itu, menjadi sangat tidak mungkin jika halaman yang Anda kerjakan dibuat secara dinamis [misalnya menggunakan bahasa sisi server seperti PHP atau ASP. NET] karena Anda tidak dapat menjamin bahwa, misalnya, paragraf yang Anda cari selalu merupakan
alert[ "theHtmlNode is a " + theHtmlNode.nodeName + " node!" ];0 node anak kedua. Jadi diperlukan cara yang lebih baik untuk mendapatkan elemen tertentu tanpa pengetahuan eksplisit tentang lingkungannya
Melihat kembali dokumen HTML pada contoh di atas, Anda dapat melihat bahwa ada atribut
var theHtmlNode = document.childNodes[0];6 pada paragraf yang baru saja kita bahas.
var theHtmlNode = document.childNodes[0];6 ini unik, dan mengidentifikasi lokasi tertentu dalam dokumen yang memungkinkan Anda melewati jalur eksplisit dengan menggunakan metode
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }0 objek
var theParagraphNode = document.getElementById['excitingText']; if [ document.firstChild.lastChild.childNodes[1] == theParagraphNode ] { alert[ "theParagraphNode is exactly what we expect!" ]; }2. Metode ini persis seperti yang Anda harapkan, mengembalikan
var theParagraphNode = document.getElementById['excitingText']; if [ document.firstChild.lastChild.childNodes[1] == theParagraphNode ] { alert[ "theParagraphNode is exactly what we expect!" ]; }3 jika Anda memberikan JavaScript
var theHtmlNode = document.childNodes[0];6 yang tidak ada di halaman, atau node elemen yang Anda minta jika memang ada. Untuk mengujinya, mari bandingkan hasil metode baru dengan yang lama
var theParagraphNode = document.getElementById['excitingText']; if [ document.firstChild.lastChild.childNodes[1] == theParagraphNode ] { alert[ "theParagraphNode is exactly what we expect!" ]; }
Kode ini akan memunculkan pesan konfirmasi, membuktikan bahwa kedua metode tersebut memberikan hasil yang identik untuk dokumen contoh ini.
var theParagraphNode = document.getElementById['excitingText']; if [ document.firstChild.lastChild.childNodes[1] == theParagraphNode ] { alert[ "theParagraphNode is exactly what we expect!" ]; }_2 adalah cara paling efisien untuk mendapatkan akses ke bagian tertentu dari halaman. jika Anda tahu Anda perlu melakukan beberapa pemrosesan di suatu tempat di halaman [terutama jika Anda tidak dapat menjamin di mana] menambahkan atribut
var theHtmlNode = document.childNodes[0];6 di tempat yang sesuai akan menghemat waktu Anda
Sama bermanfaatnya adalah metode
var theParagraphNode = document.getElementById['excitingText']; if [ document.firstChild.lastChild.childNodes[1] == theParagraphNode ] { alert[ "theParagraphNode is exactly what we expect!" ]; }7 DOM, yang mengembalikan koleksi semua elemen pada halaman dari jenis tertentu. Misalnya, Anda bisa mendapatkan JavaScript untuk menampilkan semua elemen
var theHtmlNode = document.childNodes[0];1 pada halaman. Contoh berikut memberi kita paragraf yang menarik, dan saudaranya yang kurang menarik
var allParagraphs = document.getElementsByTagName['p'];
Memproses koleksi yang dihasilkan disimpan di
var theParagraphNode = document.getElementById['excitingText']; if [ document.firstChild.lastChild.childNodes[1] == theParagraphNode ] { alert[ "theParagraphNode is exactly what we expect!" ]; }_9 paling baik dilakukan dengan loop
var allParagraphs = document.getElementsByTagName['p'];0. Anda dapat bekerja dengannya hampir persis seperti sebuah array
for [var i=0; i < allParagraphs.length; i++ ] { // do your processing here, using // "allParagraphs[i]" to reference // the current element of the // collection alert[ "This is paragraph " + i + "!" ]; }
Untuk dokumen yang lebih rumit, mengembalikan semua elemen dari jenis tertentu mungkin masih berlebihan. Alih-alih mengerjakan semua 200
var allParagraphs = document.getElementsByTagName['p'];1 pada halaman besar, kemungkinan Anda hanya ingin memanipulasi
var allParagraphs = document.getElementsByTagName['p'];1 dari bagian tertentu. Dalam hal ini Anda dapat menggabungkan kedua metode ini untuk memfilter hasil Anda. ambil elemen menggunakan
var theHtmlNode = document.childNodes[0];6, dan tanyakan semua elemen dari tipe tertentu yang dikandungnya. Sebagai contoh, saya dapat mengambil semua
alert[ "theHtmlNode is a " + theHtmlNode.nodeName + " node!" ];9 elemen dalam paragraf menarik saya dengan meminta hal berikut
var theHtmlNode = document.childNodes[0];0
Ringkasan
DOM adalah dasar dari hampir semua yang dilakukan JavaScript untuk kita di web. Ini adalah antarmuka yang memungkinkan kita untuk berinteraksi dengan konten halaman kita, dan penting untuk memahami cara menyiasati model tersebut
Artikel ini telah memberi Anda alat dasar untuk pekerjaan itu. Anda dapat dengan mudah melintasi DOM sekarang menggunakan
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }0 untuk mendapatkan pegangan di root DOM, dan
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }3 dan
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }2 untuk melompat-lompat pohon ke kerabat langsung node. Anda dapat melewati perantara dan menghindari hard-coding jalur panjang dan rumit menggunakan
var theParagraphNode = document.getElementById['excitingText']; if [ document.firstChild.lastChild.childNodes[1] == theParagraphNode ] { alert[ "theParagraphNode is exactly what we expect!" ]; }2 dan
var theParagraphNode = document.getElementById['excitingText']; if [ document.firstChild.lastChild.childNodes[1] == theParagraphNode ] { alert[ "theParagraphNode is exactly what we expect!" ]; }7 untuk membuat pintasan Anda sendiri. Tapi memanjat pohon Anda hanyalah permulaan
Langkah logis selanjutnya adalah mulai melakukan hal-hal menarik dengan hasil yang dikembalikan JavaScript Anda. Anda harus mengambil data untuk memperkuat skrip Anda, dan memanipulasi data di halaman untuk membuat interaksi pengguna yang menarik. Kami akan menjelajahi topik tersebut di artikel berikutnya, yang menunjukkan cara menggunakan metode yang disediakan DOM untuk berinteraksi dengan node dan atributnya, dan untuk menjalin interaksi tersebut ke dalam skrip dan antarmuka yang Anda buat di masa mendatang
Soal latihan
- Menggunakan dokumen contoh dari artikel, tulis tiga jalur berbeda yang berakhir pada elemen
var theHtmlNode = document.childNodes[0];
9. Ingatlah bahwa Anda dapat merangkaiif [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }
_3 danif [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }
2 sebanyak yang Anda suka - Diberi node arbitrer, bagaimana Anda bisa menentukan tipenya?
- Diberi node arbitrer, bagaimana Anda bisa kembali ke objek
if [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }
0? . Ingatlah bahwa propertiif [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }
_0 objekif [ theHtmlNode.parentNode == document ] { alert[ "Hooray! The HTML node's parent is the document object!" ]; }
2 mengembalikanvar theParagraphNode = document.getElementById['excitingText']; if [ document.firstChild.lastChild.childNodes[1] == theParagraphNode ] { alert[ "theParagraphNode is exactly what we expect!" ]; }
3
Catatan. Materi ini awalnya diterbitkan sebagai bagian dari Kurikulum Standar Web Opera, tersedia sebagai 46. Melintasi DOM, ditulis oleh Mike West. Seperti aslinya, diterbitkan di bawah Creative Commons Attribution, Non Commercial - Share Alike 2. 5 lisensi