Apa dom bagaimana Anda mengakses elemen dalam javascript?

Jika Anda melihat pesan ini, artinya kami mengalami masalah saat memuat sumber daya eksternal di situs web kami

Jika Anda menggunakan filter web, pastikan domain *. kastatis. org dan *. kasandbox. org dibuka blokirnya

Salah satu metode paling umum untuk mengakses elemen dalam HTML DOM adalah getElementById() yang mengakses elemen berdasarkan nilai atribut ID-nya. Nilai atribut ID seharusnya unik dan tidak ada dua elemen pada satu halaman HTML yang memiliki ID serupa. Bahkan jika ada beberapa elemen yang memiliki ID yang sama, metode getElementById() hanya mengembalikan satu elemen (elemen pertama dengan ID tersebut dalam file HTML)

Sekarang kita akan melihat contoh untuk lebih memahami bagaimana metode getElementById() bekerja

Catatan. Konsol browser digunakan untuk demonstrasi contoh dalam artikel ini

File HTML berikut akan digunakan untuk contoh ini;

<. DOCTYPE html>

< html lang="en">

< kepala >

< title > Mengakses Elemen DOM di JavaScript < /title>

< gaya >

tubuh { lebar-maks. 500px;

p { padding. 5px; . 2px hitam pekat;

< /gaya >

< /kepala >

< tubuh >

< h1 > Bagaimana cara mendapatkan Elemen di JavaScript dari DOM? </h1>

< h2 > Bagaimana cara mengakses elemen DOM dengan ID-nya? </h2>

< p id="contoh-id">getElementById()</p>

< skrip >

< /skrip >

< /tubuh >

< /html >

Dalam file HTML yang diberikan di atas, kami memiliki paragraf dengan id unik i. e. contoh-id. Jika kita ingin mengakses elemen paragraf ini, kita dapat menggunakan metode getElementById()

< skrip >

const paragraf = dokumen. getElementById('contoh-id');

konsol. log( paragraf );

skrip>script>

Kita sekarang dapat menggunakan variabel paragraf yang baru dibuat untuk memanipulasi elemen contoh-id langsung dari JavaScript e. g jika kita ingin mengubah latar belakang dan warna teks paragraf itu

< skrip >

const paragraf = dokumen. getElementById('contoh-id');

paragraf. gaya . warna = 'putih';

paragraf. gaya . warna latar belakang = 'hitam';

skrip>script>

Cara mengakses elemen DOM berdasarkan kelasnya

Metode getElementsByClassName() dapat digunakan untuk mendapatkan beberapa elemen yang memiliki nilai atribut kelas yang sama. Untuk menunjukkan bagaimana metode getElementsByClassName() bekerja, kami akan memodifikasi file HTML kami dengan cara berikut

<. DOCTYPE html>DOCTYPE html>

< html lang ="en"><

< kepala >

< title > Mengakses Elemen DOM di JavaScript <title>

< gaya >

tubuh { maks - lebar : 500 piksel ; }

p { padding . 5px ; perbatasan . 2px hitam pekat ; }

gaya>style>

kepala>head>

< tubuh >

< h1 > Cara mendapatkan Elemen di JavaScript dari DOM ?h1>

< h2 kelas="contoh-kelas">How to access DOM elements by their class?h2>

< p kelas="contoh-kelas">getElementsByClassName()p>

< skrip >

const sameClassElements = . getElementsByClassName('contoh-kelas');

konsol. log( sameClassElements );

skrip>script>

tubuh>body>

html>html>

Metode getElementsByClassName() mengembalikan semua elemen yang memiliki kelas tertentu dalam bentuk array. Jadi jika kita ingin memodifikasi hanya satu elemen yang ada di dalam array yang dikembalikan, kita perlu mengaksesnya dengan nomor indeksnya

< skrip >

const sameClassElements = . getElementsByClassName('contoh-kelas');

sameClassElements [0] . gaya . warna = 'biru';

skrip>script>

Kita bisa menggunakan perulangan for jika kita ingin menerapkan perubahan yang sama ke semua elemen array

< skrip >

const sameClassElements = . getElementsByClassName('contoh-kelas');

untuk ( biarkan indeks = 0; index < sameClassElements.panjang; indeks ++) {

sameClassElements [ indeks ] . gaya . warna = 'biru';

}

skrip>script>

Cara mengakses elemen DOM dengan Tag mereka

JavaScript juga menyediakan metode getElementsByTagName() yang dapat digunakan untuk mengakses semua elemen yang memiliki tag HTML yang sama

<. DOCTYPE html>DOCTYPE html>

< html lang ="en"><

< kepala >

< title > Mengakses Elemen DOM di JavaScript <title>

kepala>head>

< tubuh >

< h3 > Cara mendapatkan Elemen di JavaScript dari DOM ?h3>

< ul >

< li > getElementById () methodli>

< li > getElementsByClassName () methodli>

< li > getElementsByName () methodli>

< li > getElementsByTagName () methodli>

< li > Pemilihkueri () methodli>

< li > querySelectorAll () methodli>

ul>ul>

< skrip >

const sameTagElements = . getElementsByTagName('li')

konsol. log( sameTagElements );

skrip>script>

tubuh>body>

html>html>

Kita dapat kembali menggunakan loop untuk menerapkan perubahan yang sama ke semua elemen yang ada di dalam array baru

< skrip >

const sameTagElements = . getElementsByTagName('li')

untuk ( biarkan indeks = 0; index < sameTagElements.panjang; indeks ++) {

sameTagElements [ indeks ] . gaya . fontFamily = 'sans-serif';

}

skrip>script>

Cara mengakses elemen DOM dengan menggunakan metode Query Selectors

JavaScript juga memiliki metode querySelector() dan querySelectorAll() yang dapat digunakan untuk mengakses elemen DOM HTML. Untuk mengakses satu elemen kita dapat menggunakan metode querySelector();

<. DOCTYPE html>DOCTYPE html>

< html lang ="en"><

< kepala >

< title > Mengakses Elemen DOM di JavaScript <title>

kepala>head>

< tubuh >

< h3 > Cara mendapatkan Elemen di JavaScript dari DOM ?h3>

< p id ="contoh"><getElementById() methodp>

< p kelas="contoh">getElementsByClassName() methodp>

< p > getElementsByName () methodp>

< p > getElementsByTagName () methodp>

< p > Pemilihkueri () methodp>

< p > querySelectorAll () methodp>

< skrip >

const paragrafSatu = dokumen. Pemilihkueri('#contoh');

const paragrafDua = dokumen. Pemilihkueri('. contoh');

konsol. log( paragraphOne );

konsol. log( paragraphTwo );

skrip>script>

tubuh>body>

html>html>

Tanda # adalah pemilih untuk atribut ID sedangkan. tanda adalah pemilih untuk atribut kelas

Metode querySelectorAll() mengembalikan larik yang berisi semua elemen DOM dengan nama kelas atau ID tertentu

<. DOCTYPE html>DOCTYPE html>

< html lang ="en"><

< kepala >

< title > Mengakses Elemen DOM di JavaScript <title>

kepala>head>

< tubuh >

< h3 > Cara mendapatkan Elemen di JavaScript dari DOM ?h3>

< p id ="contoh-id">getElementById() methodp>

< p id ="contoh-id">getElementsByClassName() methodp>

< p id ="contoh-id">getElementsByName() methodp>

< p id ="contoh-id">getElementsByTagName() methodp>

< p id ="contoh-id">querySelector() methodp>

< p id ="contoh-id">querySelectorAll() methodp>

< skrip >

const paragraf = dokumen. querySelectorAll('#example-id');

konsol. log( paragraf );

skrip>script>

tubuh>body>

html>html>

Kita dapat melakukan berbagai metode seperti. metode forEach() pada array yang dikembalikan oleh querySelectorAll(). Metode ini tidak berfungsi dengan array yang dikembalikan oleh metode getElement

Kesimpulan

Mengakses elemen DOM HTML dan menjadikannya interaktif melalui JavaScript adalah bagian paling dasar namun penting dari setiap pekerjaan Front-end Develoepr. Di sini kami telah membuat daftar lima metode paling umum yang digunakan dalam JavaScript untuk mengakses elemen DOM

Bagaimana cara mengakses elemen DOM di JS?

Apa itu elemen DOM dalam JavaScript?

Apa itu JavaScript dan bagaimana cara kerjanya dengan DOM?