Dom melintasi di javascript mdn

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 dari

  var theHtmlNode = document.childNodes[0];

  9

• alert( "theHtmlNode is a " + theHtmlNode.nodeName + " node!" );

  _0 memiliki tiga anak — dua

  var theHtmlNode = document.childNodes[0];

  1 elemen dan

  alert( "theHtmlNode is a " + theHtmlNode.nodeName + " node!" );

  6 elemen
• Elemen

  var theHtmlNode = document.childNodes[0];

  1 dengan

  alert( "theHtmlNode is a " + theHtmlNode.nodeName + " node!" );

  8 memiliki turunannya sendiri — elemen

  alert( "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 merangkai

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

  if ( theHtmlNode.parentNode == document ) {
    alert( "Hooray!  The HTML node's parent is the document object!" );
  }

  _0 objek

  if ( theHtmlNode.parentNode == document ) {
    alert( "Hooray!  The HTML node's parent is the document object!" );
  }

  2 mengembalikan

  var 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

Apa yang dilalui DOM dalam JavaScript?

Bisakah Anda melintasi DOM melalui JavaScript?

Bagaimana cara memanipulasi DOM dengan JavaScript?

Apa saja 4 metode berbeda yang dapat saya gunakan dalam JavaScript untuk menargetkan elemen di DOM?