複数のクラスを持つ要素を取得する方法

私がこれを持っていると言います：

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

このdiv要素を選択するにはどうすればよいですか？

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

それは機能しません。

jQueryではそうですが$('.class1.class2')、バニラJavaScriptで選択したいと思います。

これは実際にはjQueryと非常によく似ています。

document.getElementsByClassName('class1 class2')

MDNドキュメントgetElementsByClassName

AND （両方のクラス）

var list = document.getElementsByClassName("class1 class2");
var list = document.querySelectorAll(".class1.class2");

OR （少なくとも1つのクラス）

var list = document.querySelectorAll(".class1,.class2");

XOR （一方のクラスで、もう一方のクラスではない）

var list = document.querySelectorAll(".class1:not(.class2),.class2:not(.class1)");

NAND （両方のクラスではない）

var list = document.querySelectorAll(":not(.class1),:not(.class2)");

NOR （2つのクラスのいずれでもない）

var list = document.querySelectorAll(":not(.class1):not(.class2)");

標準のクラスセレクターを持つquerySelectorAllもこれに対して機能します。

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

@filoxoが言ったように、あなたは使うことができますdocument.querySelectorAll。

探しているクラスに要素が1つしかないことがわかっている場合、または最初の要素だけに関心がある場合は、次のように使用できます。

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

ところで、両方のクラス.class1.class2を持つ要素を示していますが、.class1 .class2（空白に注意してください）階層を示しています-そして、クラスclass2を持つ要素内にあるクラスを持つ要素class1：

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

また、直接の子を強制的に取得したい場合は、>記号（.class1 > .class2）を使用します。

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

セレクターに関する詳細情報：https :
//www.w3schools.com/jquery/jquery_ref_selectors.asp

html

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

javascritpコード

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

querySelectorAll（）メソッドは、指定されたCSSセレクターに一致するドキュメント内のすべての要素を静的NodeListオブジェクトとして返します。

NodeListオブジェクトはノードのコレクションを表します。ノードにはインデックス番号でアクセスできます。インデックスは0から始まります。

https://www.w3schools.com/jsref/met_document_queryselectorall.aspの詳細もご覧ください

==ありがとう==

わかりました、このコードはあなたが必要とするものを正確に行います：

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();

それが役に立てば幸い！;）

実際には、@ bazzlebrushの回答と@filoxoのコメントが非常に役立ちました。

クラスが "zA yO"になる可能性のある要素を見つける必要がありましたOR「zA zE」に

jqueryを使用して、まず目的の要素の親を選択します。

（ 'abc'で始まり、スタイルが！= 'display：none'のクラスを持つdiv）

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

次に、その要素の目的の子：

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

完璧に動作します！上記のように、事前に選択されたオブジェクトを渡すことができるdocument.querySelectorを実行する必要はありません。