Getting elements by tag among given element childNodes

Question

What is the easiest way to get list of all [tag] nodes that are direct children of the given node, without using query?

Can you please elaborate "`without using query`"? jQuery? Or something else? — Teemu, Apr 17 '14 at 17:35
@Teemu I mean neither use side libraries as jQuery nor querySelector() function — AlexTR, Apr 17 '14 at 17:38
Maybe you are looking for something like this? https://developer.mozilla.org/en-US/docs/Web/API/Element.getElementsByTagName — wongcode, Apr 17 '14 at 17:42
@AlexTR: Why wouldn't you use `document.querySelector[All]`? Its support is better than the alternative `document.getElementsByTagName`, and it tends to outperform the `getElementsBy*` DOM queries anyway — Elias Van Ootegem, Jul 09 '14 at 06:53
@EliasVanOotegem this question was a part of my learning process. I cant just always use the simpliest method, because its simple. Instead, I like to know what alernative options are there for me and test their relative efficiency. — AlexTR, Jul 09 '14 at 16:44
@AlexTR: `document.querySelector` and `querySelectorAll` are part of the DOM API since IE8 first was released. It's not because it's simple to use, that you should use it. It's because it's the official, standard DOM call that is best supported that you ought to use it. — Elias Van Ootegem, Jul 10 '14 at 07:27

score 4 · Accepted Answer · answered Apr 17 '14 at 17:43

4

With an iteration, you can check the tag name of the element like that :

var child = yourElement.children;
var childrensSpan = [];

for(var i = 0; i < child.length; i++){
    if(child[i].tagName === "SPAN") childrensSpan.push(child[i])
}

console.log(childrensSpan);

Fiddle : http://jsfiddle.net/Paesk/

Of course, yourElement is your parent element and "SPAN" is the tag you are searching for.

answered Apr 17 '14 at 17:43

Karl-André Gagnon

33,662
5
50
75

Thanks, so im assuming that there is no handy build-in method for this job? – AlexTR Apr 17 '14 at 17:47
Is there any difference if you just call child.getElementsByTagName("span") as opposed to assemble the array – dragon66 Apr 17 '14 at 17:49
Not that i am aware of, except for `querySelectorAll`, but you clearly said you don't wanna use it. There is an alternative where you search `getElementsByTagName` and then check their parent, but i think this method is the fastest – Karl-André Gagnon Apr 17 '14 at 17:49
1

@dragon66 with tag name, you can't select direct children. – Karl-André Gagnon Apr 17 '14 at 17:50
@Karl-André Gagnon: right, need to read the question more carefully – dragon66 Apr 17 '14 at 17:51

score 2 · Answer 2 · answered Apr 17 '14 at 17:46

In modern browsers...

var divs = [].filter.call(node.children, function(el) {
    return el.nodeName === "DIV";
});

The Array.prototype.filter method can be patched in legacy browsers.

If you're going to do this frequently for different types of elements, you may want to shorten it by making a function that creates the filter callback.

function byTag(name) {
    name = name.toUpperCase();
    return function(el) {
        return el.nodeName === name;
    }
}

And then do this:

var divs = [].filter.call(node.children, byTag("div"));

score 0 · Answer 3 · answered Apr 17 '14 at 22:10

Based on the answers here I made two functions and wrapped them into HTMLElement.prototype which resulted in ability to use divChildren = node.childrenByTag("div");

Later I made a little benchmark comparsions between two solutions that were offered here, querySelector(), getElementsByTagName(), regexp and XPath

If anyone is interested you can find it here(functions+benchmarks): http://jsfiddle.net/2CPwL/

Getting elements by tag among given element childNodes

3 Answers3