选择具有两个类的元素

时间:2012-12-02 19:19:18

标签: javascript selector

  

可能重复:
  How to get elements with multiple classes

使用一些javascript代码设置引用页面的当前URL以传递到iframe小部件。无法控制javascript所在页面的代码,除了一点javascript代码。

我需要抓取的元素值的示例如下:

<div id="new_p_2FRolls-Royce_p_2F2013-Rolls-Royce-Phantom_p_2BDrophead_p_2BCoupe-4a5be12c0a0a00650143b598a45df25d_p_2Ehtm" class="page NEW_VEHICLE_DETAILS current">

我要做的是通过组合“page”和“current”类来选择div。在此示例中,“NEW_VEHICLE_DETAILS”对于此页面是唯一的,并且在其他页面上有所不同。我想创建一个一致的代码,不必像现在这样对每个页面进行更改。这是我现在使用的代码:

<div id="build_iframe"></div>
<script>
var pageid = document.getElementsByClassName('NEW_VEHICLE_DETAILS')[0].id;
var currenturl = 'http://m.whateverwebsite.com/index.htm#'+pageid;
var shareurl = escape(currenturl);
document.getElementById('build_iframe').innerHTML = '<iframe style="border:1px;width:100%;height:110px;" src="http://widget.mywidgetwebsite.com/share-tool/?current_url='+shareurl+'"></iframe>';
</script>

在这种情况下,jQuery不是一个选项。如何通过仅选择设置了“页面”和“当前”类的元素来获取ID的值?

1 个答案:

答案 0 :(得分:15)

您可以使用querySelector(或querySelectorAll,如果有多个匹配元素,并且您想获得对所有匹配元素的引用):

var elem = document.querySelector(".page.current");

您实际上也可以使用getElementsByClassName,它接受​​以空格分隔的类名列表:

var elems = document.getElementsByClassName("page current");