假设我有这个:

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

如何选择这个div元素?

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

这是行不通的。

我知道,在jQuery中,它是$('.class1.class2'),但我想用香草JavaScript选择它。


当前回答

实际上@bazzlebrush的回答和@filoxo的评论对我帮助很大。

我需要找到类可以是“zA yO”或“zA zE”的元素

使用jquery,我首先选择所需元素的父元素:

(一个div,类以'abc'开头,style != 'display:none')

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

然后是该元素的期望子元素:

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

作品完美!注意,你不需要做文档。querySelector可以像上面一样传入一个预先选择的对象。

其他回答

好的,这段代码完全符合你的需要:

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

希望能有所帮助!;)

它实际上非常类似于jQuery:

document.getElementsByClassName('class1 class2')

MDN文档getElementsByClassName

带有标准类选择器的querySelectorAll也适用于此。

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

实际上@bazzlebrush的回答和@filoxo的评论对我帮助很大。

我需要找到类可以是“zA yO”或“zA zE”的元素

使用jquery,我首先选择所需元素的父元素:

(一个div,类以'abc'开头,style != 'display:none')

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

然后是该元素的期望子元素:

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

作品完美!注意,你不需要做文档。querySelector可以像上面一样传入一个预先选择的对象。

正如@filoxo所说,您可以使用document.querySelectorAll。

如果你知道你要找的类只有一个元素,或者你只对第一个感兴趣,你可以使用:

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

顺便说一下,class1。Class2表示包含两个类的元素,.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