Bagaimana Anda mendapatkan semua elemen dengan atribut data di javascript?

Elemen HTML dapat memiliki atribut yang digunakan untuk apa saja mulai dari informasi aksesibilitas hingga kontrol gaya

<!-- We can use the `class` for styling in CSS, and we've also make this into a landmark region -->
<div class="names" role="region" aria-label="Names"></div>

Apa yang tidak disarankan adalah membuat atribut Anda sendiri, atau menggunakan kembali atribut yang ada untuk fungsionalitas yang tidak terkait

<!-- `highlight` is not an HTML attribute -->
<div highlight="true"></div>

<!-- `large` is not a valid value of `width` -->
<div width="large">

Ada berbagai alasan mengapa ini buruk. HTML Anda menjadi tidak valid, yang mungkin tidak memiliki konsekuensi negatif yang sebenarnya, tetapi merampas perasaan HTML valid yang kabur dan hangat itu. Alasan yang paling meyakinkan adalah bahwa HTML adalah bahasa yang hidup dan hanya karena atribut dan nilai yang tidak melakukan apa-apa hari ini tidak berarti mereka tidak akan pernah melakukannya.

Kabar baik. Anda dapat membuat atribut Anda sendiri. Anda hanya perlu mengawalinya dengan

<!-- `highlight` is not an HTML attribute -->
<div highlight="true"></div>

<!-- `large` is not a valid value of `width` -->
<div width="large">

Sintaksis

Akan sangat berguna untuk dapat membuat atribut HTML Anda sendiri dan memasukkan informasi Anda sendiri di dalamnya. Untungnya, Anda bisa. Itulah tepatnya atribut data. Mereka seperti ini

<!-- They don't need a value -->
<div data-foo></div>

<!-- ...but they can have a value -->
<div data-size="large"></div>

<!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside -->
<li data-prefix="Careful with HTML in here."><li>

<!-- You can keep dashing if you like -->
<aside data-some-long-attribute-name><aside>

Atribut data sering disebut sebagai

<!-- `highlight` is not an HTML attribute -->
<div highlight="true"></div>

<!-- `large` is not a valid value of `width` -->
<div width="large">

<!-- They don't need a value -->
<div data-foo></div>

<!-- ...but they can have a value -->
<div data-size="large"></div>

<!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside -->
<li data-prefix="Careful with HTML in here."><li>

<!-- You can keep dashing if you like -->
<aside data-some-long-attribute-name><aside>

<!-- They don't need a value -->
<div data-foo></div>

<!-- ...but they can have a value -->
<div data-size="large"></div>

<!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside -->
<li data-prefix="Careful with HTML in here."><li>

<!-- You can keep dashing if you like -->
<aside data-some-long-attribute-name><aside>

Bisakah Anda menggunakan atribut

<!-- They don't need a value -->
<div data-foo></div>

<!-- ...but they can have a value -->
<div data-size="large"></div>

<!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside -->
<li data-prefix="Careful with HTML in here."><li>

<!-- You can keep dashing if you like -->
<aside data-some-long-attribute-name><aside>

_0 saja?

<div data=""></div>

Ini mungkin tidak akan merugikan apa pun, tetapi Anda tidak akan mendapatkan API JavaScript yang akan kami bahas nanti dalam panduan ini. Anda pada dasarnya membuat atribut untuk diri sendiri, yang seperti yang saya sebutkan di intro, tidak dianjurkan

Apa yang tidak boleh dilakukan dengan atribut data

Menyimpan konten yang seharusnya dapat diakses. Jika konten harus dilihat atau dibaca di halaman, jangan hanya menempatkannya di atribut data, tetapi pastikan konten tersebut ada di konten HTML di suatu tempat

<!-- This isn't accessible content -->
<div data-name="Chris Coyier"></div>

<!-- If you need programmatic access to it but shouldn't be seen, there are other ways.. -->
<div>
  <span class="visually-hidden">Chris Coyier</span>
</div>

Ini lebih lanjut tentang menyembunyikan sesuatu

Styling dengan atribut data

CSS dapat memilih elemen HTML berdasarkan atribut dan nilainya

/* Select any element with this data attribute and value */
[data-size="large"] {
  padding: 2rem;
  font-size: 125%;
}

/* You can scope it to an element or class or anything else */
button[data-type="download"] { }
.card[data-pad="extra"] { }

Ini bisa menarik. Pengait gaya yang dominan dalam HTML/CSS adalah kelas, dan meskipun kelasnya bagus (mereka memiliki kekhususan sedang dan metode JavaScript yang bagus melalui

<!-- They don't need a value -->
<div data-foo></div>

<!-- ...but they can have a value -->
<div data-size="large"></div>

<!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside -->
<li data-prefix="Careful with HTML in here."><li>

<!-- You can keep dashing if you like -->
<aside data-some-long-attribute-name><aside>

<!-- `highlight` is not an HTML attribute -->
<div highlight="true"></div>

<!-- `large` is not a valid value of `width` -->
<div width="large">

/* Selects if the attribute is present at all */
[data-size] { }

/* Selects if the attribute has a particular value */
[data-state="open"],
[aria-expanded="true"] { }

/* "Starts with" selector, meaning this would match "3" or anything starting with 3, like "3.14" */
[data-version^="3"] { }

/* "Contains" meaning if the value has the string anywhere inside it */
[data-company*="google"] { }

Kekhususan pemilih atribut

Itu sama persis dengan kelas. Kita sering menganggap spesifisitas sebagai nilai empat bagian

gaya sebaris, ID, kelas/atribut, tag

Jadi pemilih atribut tunggal saja adalah 0, 0, 1, 0. Seorang pemilih seperti ini

div.card[data-foo="bar"] { }

…akan menjadi 0, 0, 2, 1. Angka 2 karena ada satu kelas (

<!-- They don't need a value -->
<div data-foo></div>

<!-- ...but they can have a value -->
<div data-size="large"></div>

<!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside -->
<li data-prefix="Careful with HTML in here."><li>

<!-- You can keep dashing if you like -->
<aside data-some-long-attribute-name><aside>

<!-- They don't need a value -->
<div data-foo></div>

<!-- ...but they can have a value -->
<div data-size="large"></div>

<!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside -->
<li data-prefix="Careful with HTML in here."><li>

<!-- You can keep dashing if you like -->
<aside data-some-long-attribute-name><aside>

<!-- They don't need a value -->
<div data-foo></div>

<!-- ...but they can have a value -->
<div data-size="large"></div>

<!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside -->
<li data-prefix="Careful with HTML in here."><li>

<!-- You can keep dashing if you like -->
<aside data-some-long-attribute-name><aside>

Pemilih atribut memiliki kekhususan yang lebih rendah daripada ID, lebih dari elemen/tag, dan sama dengan kelas

Nilai atribut case-insensitive

Jika Anda perlu mengoreksi kemungkinan ketidakkonsistenan kapitalisasi dalam atribut data Anda, pemilih atribut memiliki varian case-insensitive untuk itu

/* Will match
<div data-state="open"></div>
<div data-state="Open"></div>
<div data-state="OPEN"></div>
<div data-state="oPeN"></div>
*/
[data-state="open" i] { }

Ini adalah

<!-- They don't need a value -->
<div data-foo></div>

<!-- ...but they can have a value -->
<div data-size="large"></div>

<!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside -->
<li data-prefix="Careful with HTML in here."><li>

<!-- You can keep dashing if you like -->
<aside data-some-long-attribute-name><aside>

Menggunakan atribut data secara visual

CSS memungkinkan Anda untuk menarik keluar nilai atribut data dan menampilkannya jika perlu

/* <div data-emoji="✅"> */

[data-emoji]::before {
  content: attr(data-emoji); /* Returns '✅' */
  margin-right: 5px;
}

Contoh kasus penggunaan gaya

Anda bisa menggunakan atribut data untuk menentukan berapa banyak kolom yang Anda inginkan untuk wadah kisi

<!-- `highlight` is not an HTML attribute -->
<div highlight="true"></div>

<!-- `large` is not a valid value of `width` -->
<div width="large">

CodePen Embed Fallback

Mengakses atribut data dalam JavaScript

Seperti atribut lainnya, Anda dapat mengakses nilai dengan metode generik

<!-- They don't need a value -->
<div data-foo></div>

<!-- ...but they can have a value -->
<div data-size="large"></div>

<!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside -->
<li data-prefix="Careful with HTML in here."><li>

<!-- You can keep dashing if you like -->
<aside data-some-long-attribute-name><aside>

<!-- `highlight` is not an HTML attribute -->
<div highlight="true"></div>

<!-- `large` is not a valid value of `width` -->
<div width="large">

Tetapi atribut data juga memiliki API khusus mereka sendiri. Katakanlah Anda memiliki elemen dengan banyak atribut data (yang benar-benar baik-baik saja)

<!-- `highlight` is not an HTML attribute -->
<div highlight="true"></div>

<!-- `large` is not a valid value of `width` -->
<div width="large">

Jika Anda memiliki referensi ke elemen tersebut, Anda dapat mengatur dan mendapatkan atribut seperti

<!-- `highlight` is not an HTML attribute -->
<div highlight="true"></div>

<!-- `large` is not a valid value of `width` -->
<div width="large">

Perhatikan penggunaan camelCase pada baris terakhir di sana. Ini secara otomatis mengonversi atribut gaya kebab dalam HTML, seperti

<div data=""></div>

<div data=""></div>

API ini bisa dibilang tidak sebaik

<!-- They don't need a value -->
<div data-foo></div>

<!-- ...but they can have a value -->
<div data-size="large"></div>

<!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside -->
<li data-prefix="Careful with HTML in here."><li>

<!-- You can keep dashing if you like -->
<aside data-some-long-attribute-name><aside>

<div data=""></div>

<div data=""></div>

<div data=""></div>

<div data=""></div>

Anda juga memiliki akses ke kumpulan data sebaris

<!-- `highlight` is not an HTML attribute -->
<div highlight="true"></div>

<!-- `large` is not a valid value of `width` -->
<div width="large">

Data JSON di dalam atribut data

<!-- `highlight` is not an HTML attribute -->
<div highlight="true"></div>

<!-- `large` is not a valid value of `width` -->
<div width="large">

Hei, kenapa tidak? . Anda dapat menarik data itu dan menguraikannya sesuai kebutuhan

<!-- `highlight` is not an HTML attribute -->
<div highlight="true"></div>

<!-- `large` is not a valid value of `width` -->
<div width="large">

Kasus penggunaan JavaScript

Konsepnya adalah Anda dapat menggunakan atribut data untuk meletakkan informasi dalam HTML yang mungkin memerlukan akses JavaScript untuk melakukan hal-hal tertentu

Yang umum harus dilakukan dengan fungsionalitas basis data. Katakanlah Anda memiliki tombol "Suka".

<!-- `highlight` is not an HTML attribute -->
<div highlight="true"></div>

<!-- `large` is not a valid value of `width` -->
<div width="large">

Tombol itu bisa memiliki penangan klik di atasnya yang melakukan permintaan Ajax ke server untuk menambah jumlah suka dalam database saat diklik. Ia tahu catatan mana yang harus diperbarui karena mendapatkannya dari atribut data

Spesifikasi

• (Draf Kerja)
• (Direkomendasikan)
• (Definisi Awal)

Dukungan peramban

Data dukungan browser ini berasal dari , yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur tersebut pada versi tersebut dan yang lebih baru

Bagaimana cara mendapatkan semua nilai atribut data dalam JavaScript?

Bagaimana Anda mendapatkan semua elemen dengan atribut data?

Bagaimana Anda menemukan elemen berdasarkan nilai atribut data?

Bagaimana cara mendapatkan atribut id data dari suatu elemen menggunakan JavaScript?