Question

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

我想获得带有id和class的div。除了以下之外还有其他更好的方法吗？

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

Answer 1

试试这个：

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

输出：

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

浏览器支持：

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

Answer 2

获取多个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)
    }
}

Answer 3

你也可以使用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);    }
});

Answer 4

id属性的使用不正确 id必须在页面上是唯一的！
因此，如果您需要id元素，则只使用：

document.getElementById(id);

这种方法速度令人难以置信 - 浏览器的地图为<id, HTMLElement>

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

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

ID + Class的JS getElement

4 个答案: