JS getElement by ID+Class

JS getElement by ID+Class

本文关键字：ID+Class by getElement JS      更新时间：2023-09-26

<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];
}

试试这个：

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

输出：

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

浏览器支持：

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

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

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

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

document.getElementById(id);

这种方法速度惊人-浏览器有<id, HTMLElement> 的地图

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

$('#'+id); // jQuery
document.querySelector('#'+id); // Native
相关文章：