SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: getIdByElement

  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation 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

  2. #2
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there peacebrowser,

    something like this, perhaps....
    Code:
    
    <!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>
    
    coothead

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

    http://jsfiddle.net/chrisupjohn/MWHYT/1/

  4. #4
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...
    Code:
    
    <!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>
    
    <div>
    <img src="http://www.coothead.co.uk/images/dog.jpg"  alt="">
    </div>
    
    </body>
    </html>
    
    Can you show us this error please?

    coothead

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    In your code you currently have the following:
    Code JavaScript:
    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.

  6. #6
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use hasAttribute() and getAttribute()

    Code:
       
    <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('\n'));
    alert(El.join('\n'));
    }
    
    </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
    Bismillahirrahmanirrahîm
    Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •