getIdByElement

In Javascript, we know that we can getElementByID but is there is an easy way of getIdByElement , I mean getting the id name through a tag name or something like that.

Please Help
Beginner in JavaScript

IE 6 & 7 don’t support the hasAttribute method so it would be more worth while just checking to make sure the I’d property exists.

Sent from my iPhone using Tapatalk

I use hasAttribute() and getAttribute()

   
<html>
<head>
<script tpe="text/javascript">

// window.document.getIdByElement = function() { // without window.onload

window.onload = document.getIdByElement = function() {

var El=[];
var A= [];
var el= document.getElementsByTagName('*');
for(var i= 0; i<el.length; i++) {
El.push(el[i]);
if(el[i].hasAttribute('id')) { 
A.push(el[i].tagName+'  Element No.#' + i + ' in the DOM tree has an id of #' + el[i].getAttribute('id')) }
}

alert(A.join('\
'));
alert(El.join('\
'));
}

</script>
</head>
<body>
<p>This element doesn't have an "id" attribute</p>
<p id="hello">This element does have an "id" attribute"</p>
<p id="bye">This element does have an "id" attribute"</p>
    

<input type="button" value="Get id attribute value by element" onclick="document.getIdByElement()">
</body>
</html>

The code works in firefox 4.0b9

In your code you currently have the following:

if(els[c].id!='')

This if statement will assume that every element had an id attribute but in theory this can’t be assumed because not all elements will. This can be avoided as you can see in my example, first i check what the typeof value is for the id property in the current object that way if it is undefined it won’t cause an error and stop the script from running.

Hope that makes sense.

Hi there SgtLegend,

…it will produce an error for elements that don’t have the id attribute

Here is my code with some extra elements added that don’t have an id…

[color=navy]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<script type="text/javascript">
function init(){
   var els=document.getElementsByTagName('*');
for(var c=0;c<els.length;c++){
if(els[c].id!='') {

   alert('a '+els[c].tagName+' element has id="'+els[c].id+'"');

   }
  }
 }
   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);
</script>

</head>
<body>

<div id="foo">
<p id="myp">
This is a <span id="blah">test</span>
</p>
</div>
[color=red]
<div>
<img src="http://www.coothead.co.uk/images/dog.jpg"  alt="">
</div>
[/color]
</body>
</html>
[/color]

Can you show us this error please?

coothead

While coothead does have a solution that will work it will produce an error for elements that don’t have the id attribute, to avoid this see the below link.

Hi there peacebrowser,

something like this, perhaps…

[color=navy]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<script type="text/javascript">
function init(){
   var els=document.getElementsByTagName('*');
for(var c=0;c<els.length;c++){
if(els[c].id!='') {

   alert('a '+els[c].tagName+' element has id="'+els[c].id+'"');

   }
  }
 }
   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);
</script>

</head>
<body>

<div id="foo">
<p id="myp">
This is a <span id="blah">test</span>
</p>
</div>

</body>
</html>
[/color]

coothead