JS getElement by ID+Class答案

【问题标题】：JS getElement by ID+ClassJS getElement by ID+Class
【发布时间】：2016-02-15 19:52:47
【问题描述】：

<div id="myId" class="sampleClass">
  Div with id and class
</div>
<div class="sampleClass">
  Div with only class
</div>

我想获得带有 id 和类的 div。除了以下还有其他更好的方法吗：

var sample = document.getElementsByClassName("sampleClass");
for(var x = 0; x<sample.length; x++) {
  if(sample[x].id=="myId")
    return sample[x];
}

【问题讨论】：

是的 $("#myId.sampleClass")。我想要它与 JS
document.querySelector('#myId.sampleClass')
document.getElementById 仅此而已。所有 ID 都必须是唯一的。

标签： javascript html css dom css-selectors

【解决方案1】：

id 属性的使用不正确。
id 在页面上必须是唯一的！
所以，如果你需要 id 的元素，你只需使用：

document.getElementById(id);

这个方法非常快——浏览器有一个<id, HTMLElement>的地图

您也可以将jQuery 包装器与#id 选择器一起使用，但它更通用，因此速度要慢得多。

$('#'+id); // jQuery
document.querySelector('#'+id); // Native

【讨论】：

【解决方案2】：

你也可以使用 jquery :
HTML：

<div id="myId" class="sampleClass">
  Div with id and class
</div>
<div class="sampleClass">
  Div with only class
</div>

jquery:

$(document).ready(function(){
   var sample = $('.sampleClass'); //getting object by class
   for(var x = 0; x<sample.length; x++) {
    if(sample.attr('id')=="myId") //checks ID attribute 
    console.log(sample);    }
});

【讨论】：

【解决方案3】：

为了获得多个IDs：

<div id="myId" class="sampleClass">
  Div with id and class
</div>
<div id="hisId" class="sampleClass">
  Div with id and class
</div>
<div id="herId" class="sampleClass">
  Div with id and class
</div>
<div class="sampleClass">
  Div with only class
</div>

JavaScript：

var sample = document.getElementsByClassName("sampleClass");
for(var x = 0; x<sample.length; x++) {
    var getId = sample[x].getAttribute("id");
    if(getId){
        console.log(getId)
    }
}

【讨论】：

【解决方案4】：

试试这个：

var sample = document.querySelectorAll("#myId.sampleClass");
console.log(sample[0]);

输出：

<div id="myId" class="sampleClass">

浏览器支持：

http://caniuse.com/#feat=queryselector

【讨论】：