Frage Wie man Elemente mit mehreren Klassen erhält


Sag ich habe das:

<div class="class1 class2"></div>

Wie wähle ich das aus? div Element?

document.getElementsByClassName('class1')[0].getElementsByClassName('class2')[0]

Das funktioniert nicht.

Ich weiß, dass es in jQuery ist $('.class1.class2'), aber ich möchte es mit Vanilla JavaScript auswählen.


75
2017-08-25 02:44


Ursprung


Antworten:


Es ist tatsächlich sehr ähnlich zu jQuery:

document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName


126
2017-08-25 02:47



querySelectorAll mit Standard-Klassenselektoren funktioniert auch dafür.

document.querySelectorAll('.class1.class2');

14
2018-05-26 01:48



Wie @Filoxo sagte, können Sie verwenden document.querySelectorAll.

Wenn Sie wissen, dass es nur ein Element mit der Klasse gibt, nach der Sie suchen, oder wenn Sie nur an der ersten Klasse interessiert sind, können Sie Folgendes verwenden:

document.querySelector('.class1.class2');

Übrigens, während .class1.class2 kennzeichnet ein Element mit beide Klassen, .class1 .class2 (beachten Sie die Leerzeichen) zeigt eine Hierarchie - und Element mit Klasse class2 Das ist innerhalb von Element mit Klasse class1:

<div class='class1'>
  <div>
    <div class='class2'>
      :
      :

Und wenn Sie das Abrufen eines direkten Kindes erzwingen möchten, verwenden Sie > Schild (.class1 > .class2):

<div class='class1'>
  <div class='class2'>
    :
    :

Für vollständige Informationen über Selektoren:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp


3
2017-10-20 09:00



eigentlich @blindebrush 's Antwort und @ Filoxos Kommentar hat mir sehr geholfen.

Ich musste die Elemente finden, wo die Klasse "zA yO" sein könnte ODER "zA zE"

Mit jquery wähle ich zuerst die Eltern der gewünschten Elemente:

(ein div mit Klasse beginnend mit 'abc' und style! = 'display: none')

var tom = $('div[class^="abc"][style!="display: none;"]')[0];                   

dann die gewünschten Kinder dieses Elements:

var ax = tom.querySelectorAll('.zA.yO, .zA.zE');

funktioniert perfekt! Beachten Sie, dass Sie document.querySelector nicht ausführen müssen, da Sie ein ausgewähltes Objekt wie oben übergeben können.


0
2018-04-30 21:14



html

<h2 class="example example2">A heading with class="example"</h2>

Javascritp-Code

var element = document.querySelectorAll(".example.example2");
element.style.backgroundColor = "green";

Die Methode querySelectorAll () gibt alle Elemente im Dokument zurück, die einem angegebenen CSS-Selektor als statisches NodeList-Objekt entsprechen.

Das NodeList-Objekt repräsentiert eine Sammlung von Knoten. Auf die Knoten kann über Indexnummern zugegriffen werden. Der Index beginnt bei 0.

erfahren Sie auch mehr über https://www.w3schools.com/jsref/met_document_queryselectorall.asp

== Danke ==


0
2017-07-18 05:50