I want to know how you can get element using pure javascript.
I have my code below:
<html>
<body>
<div id="abc" class="xy"> 123 </div>
<p id="abc" class="xyz"> 123 </p>
<span id="foo" class="foo2"> foo3 </span>
</body>
</html>
Here i want to find element with combination:
- find element has id abc and tagname p
- find element has id abc and classname xy
- find element has classname foo2 and tagname span
- find element has id abc and classname xy and tagname div
I know we can't use more than one id per page. But in worse situation is it ok to have same ID to different tags? in html?
I want to know how you can get element using pure javascript.
I have my code below:
<html>
<body>
<div id="abc" class="xy"> 123 </div>
<p id="abc" class="xyz"> 123 </p>
<span id="foo" class="foo2"> foo3 </span>
</body>
</html>
Here i want to find element with combination:
- find element has id abc and tagname p
- find element has id abc and classname xy
- find element has classname foo2 and tagname span
- find element has id abc and classname xy and tagname div
I know we can't use more than one id per page. But in worse situation is it ok to have same ID to different tags? in html?
Share Improve this question edited Aug 17, 2012 at 19:36 Raj Mehta asked Aug 17, 2012 at 19:15 Raj MehtaRaj Mehta 3112 gold badges3 silver badges11 bronze badges 2- 10 IDs MUST be unique. – Niet the Dark Absol Commented Aug 17, 2012 at 19:16
- 1 But in worse situation is it ok to have same ID to different tags? in html? NO – j08691 Commented Aug 17, 2012 at 19:19
4 Answers
Reset to default 12You can get more "advanced" selection using querySelectorAll. For your three examples:
document.querySelectorAll("p#abc")document.querySelectorAll(".xy#abc")document.querySelectorAll("span.foo2")
If the IDs in the HTML aren't unique, any Javascript using them can't be guaranteed to work correctly, no matter how many browsers you test it in.
So the first two things you're looking for would use getElementById, since your IDs should be unique.
For the second, use getElementsByTagName, and loop through the results to check whether each has the required class.
You can do like this :
document.getElementByXXX --> you can put Tag,Name,Calss,ID instead of XXX
element = document.getElementById(id);
example if you want to change bg color:
window.onload = function(){
document.getElementById("your_id").style.background ="red";
}
here are some good examples: http://xahlee.info/js/js_get_elements.html
@Raj Mehta its working:
<html>
<head>
<script>
function load(){
var myObj1 = document.getElementById("root").getElementsByClassName("xyz");
var myObj2 = document.getElementById("root").getElementsByClassName("xy");
var myObj3= document.getElementById("root").getElementsByClassName("foo2");
var myObj4= document.getElementById("root").getElementsByTagName("p");
var myObj5= document.getElementById("root").getElementsByTagName("div");
myObj1[0].style.color="red";
myObj2[0].style.color="green";
myObj3[0].style.color="skyblue";
myObj4[1].style.color="purple";
myObj5[1].style.color="blue";
}
</script>
</head>
<body onload="load()" >
<div id="root">
<div id="abc" class="xy"> 123 <div> here you combine using array[0],[1],[2]... depends on you structure</div> </div>
<p id="abc" class="xyz"> 123 </p>
<span name="span" id="foo" class="foo2"> foo3 </span>
<p id="new" name="name"> one more lvl</p>
</div>
</body>
</html>
There is no other way either this or use jquery.
Since you're OK with them having unique ids (which is required in HTML if they have ids at all), factor your HTML to this:
<html>
<body>
<div id="abc1" class="xy"> 123 </div>
<p id="abc2" class="xyz"> 123 </p>
<span id="foo" class="foo2"> foo3 </span>
</body>
</html>
Then for your three different selections:
document.getElementById("abc1")gets you the<div>with idabc1.document.getElementById("abc2")gets you the<p>with idabc2.document.getElementById("foo")gets you the<span>with idfoo.