Wie man von Elementen mit mehreren Klassen

Sagen, dass ich diese:

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

Wie wähle ich diese div element?

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

Nicht funktioniert.

Weiß ich, dass das in jQuery, ist es $('.class1.class2'), aber ich würde gerne wählen Sie es mit vanilla JavaScript.

InformationsquelleAutor Nathan Prometheus | 2011-08-25

146

Es ist eigentlich sehr ähnlich zu jQuery:
```
document.getElementsByClassName('class1 class2')
```
MDN Doc getElementsByClassName
- und wow bin ich blöd oder was?
- Ich sage, was mein Freund, jeder hat etwas zu lernen.
- ich Liebe die beste Antwort ist die Letzte Antwort.
- was über das element mit nur einer Klasse , die die angegebene @Joe
- als ich erinnere mich an die Klassen kommt ohne "." Dokument.getElementsByClassName('class1 class2')
- In der gegebenen MDN-link, Punkt wird nicht verwendet, vor dem Klassennamen in getElements parameter. Ich habe diesen auf firefox als auch chrome und es funktioniert ohne Punkte, aber nicht mit Punkten.
InformationsquelleAutor Joe
25

querySelectorAll mit standard-class-Selektoren funktioniert auch für diese.
```
document.querySelectorAll('.class1.class2');
```
- Das funktioniert nicht, es muss document.querySelectorAll('.class1, .class2');
- Ihre Selektor erfassen würde-Elemente mit .class1 ODER .class2, während das oben wäre nur zu erfassen, - Elemente mit beide Klassen und in der Tat zu arbeiten. Finden Sie in der Konsole die Ausgabe dieses Tests: jsfiddle.net/0ph1p9p2
- Ok, mein Fehler, habe ich falsch verstanden, was der OP wollte. Aber IMO ein typischer Anwendungsfall ist möchten, wählen Sie Elemente, die entweder in der Klasse oder beide, in dem Fall mein Beispiel ist, was Sie wollen.
InformationsquelleAutor filoxo
6

Als @filoxo gesagt, das Sie verwenden können document.querySelectorAll.

Wenn Sie wissen, dass es nur ein element mit der Klasse, die Sie suchen, oder Sie daran interessiert sind nur in den ersten ein, die Sie verwenden können:
```
document.querySelector('.class1.class2');
```
BTW, während .class1.class2 zeigt ein element mit beide Klassen .class1 .class2 (man beachte das Leerzeichen) deutet auf eine Hierarchie - und element der Klasse class2 die in de-element mit der Klasse class1:
```
<div class='class1'>
  <div>
    <div class='class2'>
      :
      :
```
Und wenn Sie erzwingen möchten, abrufen einer direkten Kind, verwenden Sie > Zeichen (.class1 > .class2):
```
<div class='class1'>
  <div class='class2'>
    :
    :
```
Für die gesamten Informationen über Selektoren:

https://www.w3schools.com/jquery/jquery_ref_selectors.asp

InformationsquelleAutor guyaloni
2

html
```
<h2 class="example example2">A heading with class="example"</h2>
```
javascritp code
```
var element = document.querySelectorAll(".example.example2");
element.style.backgroundColor = "green";
```
Die querySelectorAll () - Methode gibt alle Elemente in dem Dokument, das entspricht einem angegebenen CSS-Selektor(s), als statische NodeList-Objekt.

Die NodeList-Objekt repräsentiert eine Sammlung von Knoten. Die Knoten zugegriffen werden kann, die durch index-Nummern. Der index beginnt bei 0.

außerdem erfahren Sie mehr über https://www.w3schools.com/jsref/met_document_queryselectorall.asp

== Danke ==

InformationsquelleAutor Md. Abu Sayed

Okay, dieser code macht genau das, was Sie brauchen:

HTML:

<div class="class1">nothing happens hear.</div>

<div class="class1 class2">This element will receive yout code.</div>

<div class="class1">nothing happens hear.</div>

JS:

function getElementMultipleClasses() {
    var x = document.getElementsByClassName("class1 class2");
    x[0].innerHTML = "This is the element you want";
}
getElementMultipleClasses();

Hoffe, es hilft! 😉

InformationsquelleAutor Gabriel Marques

0

eigentlich @bazzlebrush 's Antwort und @filoxo 's Kommentar hat mir sehr geholfen.

Ich brauchte, um zu finden, die Elemente, denen die Klasse könnte "zA yO" ODER "zA zE"

Mithilfe von jquery habe ich zuerst das übergeordnete Element auswählen der gewünschten Elemente:

(ein div mit der Klasse ab, die mit 'abc' und Stil != 'display:none')
```
var tom = $('div[class^="abc"][style!="display: none;"]')[0];                   
```
dann die gewünschten Kinder des Elements:
```
var ax = tom.querySelectorAll('.zA.yO, .zA.zE');
```
funktioniert perfekt! Hinweis: Sie müssen nicht zu dokumentieren.querySelector können Sie wie oben passieren in einem vorher ausgewählten Objekt.

InformationsquelleAutor user2677034

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.