tutorial pengembangan web terbaru
 

HTML DOM querySelectorAll() Method

<Document Object

Contoh

Dapatkan semua elemen dalam dokumen dengan class = "contoh":

var x = document.querySelectorAll(".example");
Cobalah sendiri "

Lebih "Try it Yourself" contoh di bawah ini.

Definisi dan Penggunaan

The querySelectorAll() method mengembalikan semua elemen dalam dokumen yang cocok dengan CSS yang ditentukan selector(s) , sebagai objek NodeList statis.

Objek NodeList merupakan kumpulan node. Node dapat diakses oleh angka indeks. indeks dimulai dari 0.

Tip: Anda dapat menggunakan panjang milik objek NodeList untuk menentukan jumlah elemen yang cocok pemilih tertentu, maka Anda dapat loop melalui semua elemen dan ekstrak info yang Anda inginkan.

Untuk informasi lebih lanjut tentang CSS Selectors, kunjungi CSS Selectors Tutorial dan kami CSS Selectors Referensi .

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.

metode
querySelectorAll() 4.0 9.0 3,5 3.2 10,0

Catatan: Internet Explorer 8 memiliki dukungan untuk penyeleksi CSS2. IE9 dan versi memiliki dukungan untuk CSS3 juga.

Sintaksis

document.querySelectorAll( CSS selectors )

Nilai parameter

Parameter Mengetik Deskripsi
CSS selectors String Wajib. Menentukan satu atau lebih CSS untuk mencocokkan elemen. Ini digunakan untuk memilih elemen HTML berdasarkan mereka id, kelas, jenis, atribut, nilai atribut, dll

Untuk beberapa penyeleksi, memisahkan setiap pemilih dengan koma.

Tip: Untuk daftar semua CSS Selectors, melihat kami CSS Selectors Referensi .

Rincian teknis

DOM Versi: Tingkat penyeleksi 1 Document Object
Kembali Nilai: Sebuah objek NodeList, yang mewakili semua elemen dalam dokumen yang cocok dengan CSS yang ditentukan selector(s) . NodeList adalah kumpulan statis, yang berarti bahwa perubahan dalam DOM memiliki NO efek dalam koleksi. Melempar pengecualian SYNTAX_ERR jika selector(s) tidak valid
contoh

Contoh lebih

Contoh

Dapatkan semua <p> elemen dalam dokumen, dan mengatur warna latar belakang dari pertama <p> elemen (index 0) :

// Get all <p> elements in the document
var x = document.querySelectorAll("p");

// Set the background color of the first <p> element
x[0].style.backgroundColor = "red"; 
Cobalah sendiri "

Contoh

Dapatkan semua <p> elemen dalam dokumen dengan class = "contoh", dan mengatur latar belakang pertama <p> elemen:

// Get all <p> elements in the document with class="example"
var x = document.querySelectorAll("p.example");

// Set the background color of the first <p> element with class="example" (index 0)
x[0].style.backgroundColor = "red"; 
Cobalah sendiri "

Contoh

Cari tahu berapa banyak elemen dengan class = "contoh" ada dalam dokumen (menggunakan properti panjang dari objek NodeList):

var x = document.querySelectorAll(".example").length;
Cobalah sendiri "

Contoh

Mengatur warna latar belakang dari semua elemen dalam dokumen dengan class = "contoh":

var x = document.querySelectorAll(".example");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
Cobalah sendiri "

Contoh

Mengatur warna latar belakang dari semua <p> elemen dalam dokumen:

var x = document.querySelectorAll("p");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
Cobalah sendiri "

Contoh

Mengatur perbatasan semua <a> elemen dalam dokumen yang memiliki "target" atribut:

var x = document.querySelectorAll("a[target]");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.border = "10px solid red";
}
Cobalah sendiri "

Contoh

Mengatur warna latar belakang dari setiap <p> elemen mana orang tua adalah <div> elemen:

var x = document.querySelectorAll("div > p");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
Cobalah sendiri "

Contoh

Mengatur warna latar belakang dari semua <h2>, <div> dan <span> elemen dalam dokumen:

var x = document.querySelectorAll("h2, div, span");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
Cobalah sendiri "

Pages terkait

CSS Tutorial: CSS Selectors

CSS Referensi: CSS Selectors Referensi

JavaScript Tutorial: Daftar JavaScript HTML DOM Node

HTML DOM Referensi: dokumen. querySelector()

HTML DOM Referensi: elemen. querySelectorAll()

<Document Object