javascript - Velg alle elementer med et "data-xxx"-attributt uten å bruke jQuery

Ved å bruke kun ren JavaScript, hva er den mest effektive måten å velge alle DOM-elementer som har et bestemt data--attributt (la oss si data-foo) på.

Elementene kan være forskjellige, for eksempel:

<p data-foo="0"></p><br/><h6 data-foo="1"></h6>

Svar #1

Du kan bruke querySelectorAll:

document.querySelectorAll('[data-foo]');

Svar #2

document.querySelectorAll("[data-foo]")

vil hente alle elementer med det attributtet.

document.querySelectorAll("[data-foo='1']")

vil bare gi deg dem med en verdi på 1.

Svar #3

document.querySelectorAll('[data-foo]')

å få en liste over alle elementer som har attributtet data-foo

Hvis du vil hente et element med dataattributt som har en spesifikk verdi, for eksempel

<div data-foo="1"></div>
<div data-foo="2"></div>

og jeg vil hente div med data-foo satt til "2"

document.querySelector('[data-foo="2"]')

Men her kommer vri ... hva om jeg vil matche verdien av data-attributtet med verdien til en variabel? For eksempel, hvis jeg vil hente elementene der data-foo-attributtet er satt til i

var i=2;

så du dynamisk kan velge elementet som har spesifikt dataelement ved bruk av mal-literal

document.querySelector(`[data-foo="${i}"]`)

Merk at selv om du ikke skriver verdi som streng, blir den konvertert til streng, som hvis jeg skriver

<div data-foo=1></div>

og deretter inspisere elementet i Chrome utviklerverktøy, vil elementet vises som nedenfor

<div data-foo="1"></div>

Du kan også kryssjekke ved å skrive koden nedenfor i konsollen

console.log(typeof document.querySelector(`[data-foo="${i}"]`).dataset('dataFoo'))

hvorfor jeg har skrevet 'dataFoo' selv om attributtet er data-foo grunnen er at dataset-egenskaper konverteres til camelCase-egenskaper

Jeg har henvist til lenkene nedenfor:

  • MDN: data-*
  • MDN: Bruke dataattributter

Svar #4

Prøv det → her

    <!DOCTYPE html>
    <html>
        <head></head>
        <body>
            <p data-foo="0"></p>
            <h6 data-foo="1"></h6>
            <script>
                var a = document.querySelectorAll('[data-foo]');

                for (var i in a) if (a.hasOwnProperty(i)) {
                    alert(a[i].getAttribute('data-foo'));
                }
            </script>
        </body>
    </html>

Relaterte artikler