CODEWITHSUNDEEP
javascripthtmldom
Robin Rodricks
Robin Rodricks

Reputation: 113956

Alternative to getElementsByTagName

Since the getElementsByTagName() function is new (DOM-1?) I wanted another more reliable method to get a reference to an element based on its tag name/id.

Edit- Without using a framework, since I need to cut down on size; so 10-20K for a framework is unacceptable. I just need the JS code that can fetch an element

Upvotes: 1

Views: 13529

Answers (5)

rosell.dk
rosell.dk

Reputation: 2482

Here is an implementation based on the jQuery 1.12.4 implementation. It uses getElementsByTagName if available. If not, it uses querySelectorAll if available. If not, it falls back on recursively traversal. jQuery 1.12.4 supports older browsers, such as IE6, according to themselves.

function getElementsByTagName( node, tagName ) {
  if (tagName == '*') {
    tagName = undefined;
  }
  var merge = function( first, second ) {
        var len = +second.length,
            j = 0,
            i = first.length;

        while ( j < len ) {
            first[ i++ ] = second[ j++ ];
        }

        // Support: IE<9
        // Workaround casting of .length to NaN on otherwise arraylike objects (e.g., NodeLists)
        if ( len !== len ) {
            while ( second[ j ] !== undefined ) {
                first[ i++ ] = second[ j++ ];
            }
        }

        first.length = i;

        return first;
    },
    nodeName = function( elem, name ) {
        return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();
    },
  elems, elem,
    i = 0,
  context = node,
  tag = tagName,
    found = typeof context.getElementsByTagName !== "undefined" ?
        context.getElementsByTagName( tag || "*" ) :
        typeof context.querySelectorAll !== "undefined" ?
            context.querySelectorAll( tag || "*" ) :
            undefined;

    if ( !found ) {
        for ( found = [], elems = context.childNodes || context;
            ( elem = elems[ i ] ) != null;
            i++
        ) {
            if ( !tag || nodeName( elem, tag ) ) {
                found.push( elem );
            } else {
                merge( found, getElementsByTagName( elem, tag ) );
            }
        }
    }

  return found;
/*  return tag === undefined || tag && nodeName( context, tag ) ?
        merge( [ context ], found ) :
        found;*/
}

I took the getAll() internal function of jQuery 1.12.4 and copied in the two helper functions it needs (jQuery.nodeName and jQuery.merge). I also made sure you can call it with "*" as tagName by adding a few lines in the top of the function. Finally, at the end of the function I commented out some functionality, which adds current node to result (if it matches), and simply returns the found nodes.

Be aware that the function in some cases returns an HTMLCollection, and in other circumstances returns an Array. Also beware that when "*" is passed as tagname, output differs depending on browser: The Element.prototype.getElementsByTagName does not return TextNodes, but the recursive traversal does.

Alternatively, you could use picoQuery. picoQuery is an implementation of jQuery, where you can select which methods you need in an online builder. in this case, you need no methods, as selection is part of core, and the build is only 1kb gzipped. picoQuery is written for modern browsers, but falls back to jQuery 1.12.4 for older browsers.

Upvotes: 0

Nadia Alramli
Nadia Alramli

Reputation: 114933

getElementsByTagName is not new. It is supported since IE5, FF1 and Opera 7 according to w3schools

[edit] Thanks for pointing this out. It was indeed supported since Opera 7.

Upvotes: 15

cgp
cgp

Reputation: 41381

As mentioned, getElementsByTagName is not new...

I think you're going to get about 10 references to jQuery.

Returns all the paragraph elements:

$('p').length

If 19kb is too big, and you just want to do element selection, something like sizzle works well, at about 4kb. The only thing I would note is that you're probably going to end up needing something that's in jQuery anyway.

http://sizzlejs.com/

Queries are very similar:

Sizzle("li");

19kb is a really small one-time price to pay for the power of jQuery.

Upvotes: 4

KyleFarris
KyleFarris

Reputation: 17538

If all you want to do is select elements, it may be smart to just use the sizzle selector engine and not a full blown library. I would go with the full library, but, going with a selector engine might be useful in limited circumstances.

Sizzle is the CSS selector engine that powers jQuery.

http://sizzlejs.com/

Upvotes: 3

Adam Luter
Adam Luter

Reputation: 2253

Or prototype, etc. You'll need to use one of these javascript glue libraries to achieve this. All of them will call this function if it exists, but fake it otherwise.

Upvotes: 0

Related Questions