dcsimg
www.webdeveloper.com
Results 1 to 9 of 9

Thread: GetElementById( i need 3 IDs here)

  1. #1
    Join Date
    Aug 2017
    Posts
    5

    GetElementById( i need 3 IDs here)

    Hello guys.

    I need to use three IDs

    i tried this but its not working

    Code:
    document.querySelectorAll("#panel, #login, #showReg").onclick

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,547
    Have you set up the id tags? if so then why not use the proper method to get the three id's with document.getElementById("theUniqueId");
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Mar 2011
    Posts
    124
    document.querySelectorAll returns a nodeList, so you'll have to loop through each item.
    Code:
    document.querySelectorAll("#panel, #login, #showReg").forEach(function(node){
      node.addEventListener('click', handler);
    });

  4. #4
    Join Date
    Dec 2012
    Posts
    1,587
    forEach is fine but note that it is not supported by IE for a nodelist:
    https://developer.mozilla.org/en-US/...deList/forEach

  5. #5
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,547
    forEach is 95% slower than regular loops : https://jsperf.com/fast-array-foreach is an array.forEach vs for array[x] test.

    the forEach managed to iterate 6,574 array elements, in the same time period... a for loop iterated over 184,903 array elements.

    So a script heavily reliant on forEach will drag the site responsiveness down whilst it runs through its processes.

    and https://developer.mozilla.org/en-US/.../Array/forEach explains that should an array get modified while the .forEach is working, elements of that array may get skipped over because the array was altered.

    I still think you are better off hooking those elements by the getElementsById method rather than the method you are trying to use, if you can access the elements via DOM addressing directly do it that way as it is the fastest method possible.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  6. #6
    Join Date
    Mar 2011
    Posts
    124
    forEach is fine but note that it is not supported by IE for a nodelist:
    You're right, I thought foreach would work because querySelectorAll would require a modern browsers, but I see querySelectorAll is supported since IE8. So when you need to support IE you might want to use a regular loop.

    I know there is a speed difference between foreach and a regular loop. When looping through large collection I would definitely use a regular loop, but with only 3 items the difference isn't significant. Because querySelectorAll does return a non-live nodelist it can only be altered during looping by your own cause, so if you know what you're doing wouldn't worry about that. About hooking each element separately is something each person might have it's own limit, some might people might use a loop for only 2 elements, while another might hook 20 element seperately.

  7. #7
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,547
    Those three items may be nodelists containing hundreds of items to go through, shouldn't dismiss the number of initial elements until you know the data structure of the object.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  8. #8
    Join Date
    Dec 2012
    Posts
    1,587
    Those three items may be nodelists containing hundreds of items to go through
    ?? The loop will not work recursively but iterate only through the three nodes matching the selector. (This selector uses IDs only.)
    Last edited by Sempervivum; 08-10-2017 at 09:39 AM.

  9. #9
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,547
    An element with an ID can contain a collection nodes, there is nothing to stop people nesting other elements within a tag that is designed for that purpose, like DIV tags, PRE and CODE and other tags that encapsulate can contain other elements.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

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