Alternative getElementsByTagName

Question

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

Edit - Without using a frame, as I need to reduce the size; therefore 10-20K for the frame is unacceptable. I just need a js code that can get an element

Answer 1

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

[edit] Thanks for pointing this out. This was really supported with Opera 7.

Answer 2

As already mentioned, getElementsByTagName is not new ...

I think you will get about 10 jQuery links.

Returns all paragraph elements:

$('p').length 

If 19kb is too large and you just want to make an item selection, something like sizzle works well, at about 4kb. The only thing I would like to point out is that you probably end up needing something that is jQuery anyway.

http://sizzlejs.com/

The queries are very similar:

 Sizzle("li"); 

19kb is a very small one-time price to pay for jQuery power.

Answer 3

If all you want to do is select the elements, it may be useful to simply use the sizzle selector rather than the full library. I would go with a complete library, but moving with the selection mechanism may be useful in limited circumstances.

Sizzle is a CSS selector mechanism that supports jQuery.

http://sizzlejs.com/

Answer 4

Or a prototype, etc. To do this, you will need to use one of these javascript glue libraries. All of them will call this function if it exists, but they fake it differently.

Answer 5

Here is an implementation based on jQuery 1.12.4 implementation. It uses getElementsByTagName if available. If not, it uses querySelectorAll, if available. If not, it returns to a recursive traversal. jQuery 1.12.4 supports older browsers such as IE6, according to.

 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 (eg, 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 used the internal getAll () function for jQuery 1.12.4 and copied two helper functions into it (jQuery.nodeName and jQuery.merge). I also made sure that you can name it "*" as tagName by adding a few lines at the top of the function. Finally, at the end of the function, I commented on some functions that add the current node to the result (if it matches) and simply returns the found nodes.

Remember that a function returns an HTMLCollection in some cases, and Array in other cases. Also be careful when "*" is passed as a tag, the output differs depending on the browser: Element.prototype.getElementsByTagName does not return TextNodes, but does a recursive traversal.

Alternatively you can use picoQuery . picoQuery is a jQuery implementation where you can choose which methods you need in the online linker. in this case, you do not need methods, since the selection is part of the kernel, and the assembly is only 1kb gzipped. picoQuery is written for modern browsers, but returns to jQuery 1.12.4 for older browsers.