SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Array methods on NodeLists

    On this MDC page it provides a list of Array methods that'll work on anything with a length property or that can be accessed using numeric property names (anything "array-like").

    I've tried to do this, but I get "els.forEach is not a function":

    Code Javascript:
    var els = document.getElementsByTagName('a');
    els.forEach(function (el) {
      //do stuff to each el
    });

    Same error with els.toSource(). What am I missing here? As far as I can tell, a nodeList is pretty "array-like" and according to that page, those methods it mentions ought to work on them I would have thought.

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is pretty easy to create an Array from a node list-
    then you can use any array methods you like.

    for html elements-

    Code:
    function tagArray(tag, pa){
    	pa= pa || document;
    	var els=pa.getElementsByTagName(tag);
    	var L= els.length, A=[];
    	for(var i= 0; i< L; i++) A.push(els[i]);
    	return A;
    }

  3. #3
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,191
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)

    nodeList array

    A nodeList is an array http://developer.mozilla.org/en/docs...e:Introduction
    A nodeList is an array of elements, like the kind that is returned by the method document.getElementsByTagName(). Items in a nodeList are accessed by index in either of two ways:
    * list.item(1)
    * list[1]
    so if it was just the forEach not working I'd guess you didn't have JS ver 1.6+, but AFAIK toSource is ver 1.3+ so I must be missing something. Hopefully mrhoo's suggestion will work for you.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not an array though. You have to access the methods differently. John Resig shows how here. It's also shown here.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I went with mrhoo's solution, thanks mrhoo.

    Kravvitz, about John Resig's example: I had a stab at that, but the array returned is invariably empty:

    Code Javascript:
    var els = document.getElementsByTagName('a');
    var rr = Array.filter(els, function(el) {
      return el.firstChild.nodeValue == 'foo';
    });
    dump(rr.toSource()); // displays [] even though I know for a fact that some of the anchors' text is 'foo'
    What's wrong there?

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think it returns anything. Check the els collection.

    Edit: Strike that. This seems to work.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <script type="text/javascript"><!--
    window.onload = function(){
      var els = document.getElementsByTagName('li');
      alert(els.length);
      var rr = Array.filter(els, function(el) {
        return el.firstChild.nodeValue == 'foo';
      });
      alert(els.length+','+rr.length);
      alert(rr.toSource());
      var str = '';
      for(var i=0;i<rr.length;i++) str+= rr[i].firstChild.nodeValue+',';
      str=str.substring(0,str.length-1);
      alert(str);
    }
    // -->
    </script>
    </head>
    <body>
    
    <ul>
      <li>foo</li>
      <li>bar</li>
      <li>foo</li>
      <li>foo</li>
      <li>bar</li>
      <li>zoo</li>
    </ul>
    
    </body>
    </html>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    According to the documentation it returns a new array containing the array elements for which the callback function returns true.

    And... I just had another go with some simpler code and it turns out it does actually work, I must have done something wrong last time. And els is unchanged.

    Edit:

    Ha. Cheers Kravvitz. Now to find what I did wrong last time...


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
  •