www.webdeveloper.com
Results 1 to 6 of 6

Thread: document.getElementById

Hybrid View

  1. #1
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    81

    document.getElementById

    I have this and it works but it looks very messy, especially if I have over a dozen line of document.getElementById

    Here's my code:

    Code:
    document.getElementById("a").innerHTML = "Letter a";
    document.getElementById("a").innerHTML = "Letter b";
    document.getElementById("a").innerHTML = "Letter c";
    I can rewrite as
    Code:
      
    with (document.getElementById("a")){
       innerHTML = "Letter a";
       innerHTML = "Letter b";
       innerHTML = "Letter c";
    }

    what happen if I have this and the value that I pass in is very random.
    How can I rewrite it so it will look cleaner?

    Code:
    document.getElementById("a1").innerHTML = "Letter a";
    document.getElementById("a33").innerHTML = "Letter b";
    document.getElementById("cx").innerHTML = "Letter c";
    document.getElementById("dz").innerHTML = "Letter d";
    document.getElementById("x99").innerHTML = "Letter e";
    document.getElementById("fish").innerHTML = "Letter f";

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,031
    Typically with things like this you simply want to create a function that returns the element, so you end up with cleaner code. jQuery of course provides this kind of capability, but depending on your project you may not want to include the entire jQuery library only to use a small set of features/functions.

    So the simplest version of what you want would look something like this:
    Code:
    function _($e) { return document.getElementById($e); }
    
    _("a1").innerHTML = "Letter a";
    _("a33").innerHTML = "Letter b";
    _("cx").innerHTML = "Letter c";
    _("dz").innerHTML = "Letter d";
    _("x99").innerHTML = "Letter e";
    _("fish").innerHTML = "Letter f";
    But as I keep reading your post I wonder if you are actually asking for a way to reduce the number of lines, not just the size of the code. So instead of having 12+ lines of this same thing, you would like 3 or 4. But if this is the case I would need to know a little bit more about your code as there are several ways this can be achieved, however it will depend on how you have things set up in your code. For instance, you could use a for() loop to go through a list of elements, but this requires you to have those element ids and values you want in an array and I'm not sure if that's possible in your case or not. You could also use the .childNodes method to loop through all of the elements, but this only works if all of the elements are in the same container.

  3. #3
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    81
    what you have is excellent but I was just wondering...
    calling a function for just one line, does that not slow the program down?

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,031
    Believe it or not but using the function actually seems to do (slightly) better in performance. (link)

    I'm not really an expert on code performance so forgive me if anything I say is untrue. But based on what I do know, .getElementById() is already a function that exist in the browser's DOM so in essense you are already having to call a function every time you list out document.getElementById("foo"). My guess is this has to do with the javascript being parsed by the browser when the page loads. The browser doesn't run the literal version of the code we see, so it's possible that once all of the code has been parsed, the custom function merely uses up less resources allowing it to run slightly faster that the full DOM call.

  5. #5
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Depending on the actual purpose the code could be written in different ways. For example if you constantly made changes to the elements then having a function, as Sup3rkirby suggested, to quickly query for an element might be the best. However if it's simply for initializing a mass of element values, then you can do it like so:

    Code:
    (function(o) {var i; for (i in o) {if (o.hasOwnProperty(i)) {document.getElementById(i).innerHTML = o[i];}}}
    ({
    	a1   : 'Letter a',
    	a33  : 'Letter b',
    	cx   : 'Letter c',
    	dz   : 'Letter d',
    	x99  : 'Letter e',
    	fish : 'Letter f'
    }));

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>123</title>
    <script>
    function $(id){return document.getElementById(id);}
    function _(id,content){$(id).innerHTML=content;}
    onload=function(){
    _('a1','Letter a');
    /* in case that you have many similar id's */
    var i=2;
    while($('a'+i)!==null){_('a'+i,'some content '+i);i++}
    _('a33','Letter b');
    }
    </script>
    </head>
    <body>
    <div id="a1"></div>
    <div id="a2"></div>
    <div id="a3"></div>
    <div id="a4"></div>
    <div id="a5"></div>
    <div id="a6"></div>
    <div id="a7"></div>
    <div id="a8"></div>
    <div id="a9"></div>
    <div id="a10"></div>
    <div id="a33"></div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles