Multiple attribute passing in querySelectorAll
Here I am demonstrating code to how to pass multiple attributes in querySelectorAll.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple attribute passing in querySelectorAll</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="mydiv1" width="200" height="200";> MyDiv1 </div>
<div id="mydiv2" width="200" height="200";> MyDiv2 </div>
<div id="mydiv3" width="200" height="200";> MyDiv3 </div>
<div id="mydiv4" width="200" height="200";> MyDiv4 </div>
<div id="mydiv6" class="class1" width="200" height="200";>My Divclass1</div>
<div id="mydiv6" class="class2" width="200" height="200";>My Divclass2</div>
<div id="mydiv6" class="class3" width="200" height="200";>My Divclass3</div>
<div id="myid1">myid1</div>
<div id="myid2">myid2</div>
<div id="myid3">myid3</div>
<div id="myid4" class="myclass1 myclass2 myclass3">
myid4 myclass1 myclass2 myclass3
</div>
<script>
const Test1=()=>{
document.querySelectorAll("div[id=mydiv1],div[id=mydiv2],div[id=mydiv4]").forEach((elem)=>{
console.log(elem.innerHTML);
});
}
Test1();
function Test2(){
document.querySelectorAll("div[class=class1],div[class=class3]").forEach(function(elem){
console.log(elem.innerHTML);
});
}
Test2();
const Test3=()=>{
document.querySelectorAll("#myid1,#myid2,#myid3").forEach((elem)=>{
console.log(elem.innerHTML);
});
}
Test3();
const Test4=()=>{
document.querySelectorAll(".myclass1.myclass2.myclass3[id=myid4]").forEach((elem)=>{
console.log(elem.innerHTML);
});
}
Test4();
</script>
</body>
</html>
Posts
