web-dev-qa-db-ja.com

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

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

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

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

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

それは機能しません。

JQueryでは$('.class1.class2')であることは知っていますが、Vanilla JavaScriptで選択したいと思います。

javascriptclasselement
95
Nathan Prometheus

実際にはjQueryに非常によく似ています：

document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName

150
Joe

querySelectorAll は、標準クラスセレクターでも機能します。

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

@filoxoが言ったように、document.querySelectorAllを使用できます。

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

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

ところで、.class1.class2はbothクラスの要素を示し、.class1 .class2（空白に注意）は階層を示し、要素はクラスclass2は、クラスclass1を持つen要素内にあります。

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

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

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

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

8
guyaloni

html

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

javascritp code

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

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

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

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

==ありがとう==

2
Md. Abu Sayed

さて、このコードはまさにあなたが必要とすることをします：

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

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

1
Gabriel Marques

実際、@ bazzlebrushの回答と@filoxoのコメントは私を大いに助けてくれました。

クラスが "zA yO"になる要素を見つける必要がありましたまたは "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を実行する必要はありません。

0
user2677034