Question

191

How to run getElementsByTagName on children of an element only?

rated 0 times [ 197] [ 6] / answers: 1 / hits: 17436 / 11 Years ago, mon, april 1, 2013, 12:00:00

I'm having trouble getting a selector to work properly.

I have this HTML:

<div.wrapper>

    <div.ui-controlgroup-controls>

        <form>

            <div.ui-btn></div>

        </form>

        <div.ui-btn></div>

        <div.ui-btn></div>

        <div.ui-btn></div>

        <div.ui-btn></div>

    </div>

</div>

and I'm trying to select the div tags, which are children of ui-controlgroup-controls - which means excluding whats inside the form.

This is what I'm trying:

// el is my div.wrapper element

el.children[0].getElementsByTagName(div);

However this does not work, because the div inside the form ends up in the selection.

Question:

How can I select the elements correctly when I don't want to use jQuery?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaleelh

Add To Favorites

Follow

Total Points: 661

Total Questions: 125

Total Answers: 103

Location: Sweden

Member since Mon, May 8, 2023

1 Year ago

jaleelh questions

1 React Typescript Type Cast Issue - Parsing Error: Missing Semicolon

Thu, May 6, 21, 00:00, 3 Years ago

1 New CORS policy for Instagram public API?

Tue, Feb 23, 21, 00:00, 3 Years ago

1 avoiding the import regenerator-runtime/runtime

Tue, Jan 19, 21, 00:00, 3 Years ago

1 Using react, how would I hide a table row on click?

Wed, Aug 26, 20, 00:00, 4 Years ago

1 How to pass a cookie with Axios Post Request?

Mon, Jul 27, 20, 00:00, 4 Years ago

View All

answered 11 Years ago jocelyntrishar · Accepted Answer

One way to do this is to iterate over your resulting node list and check the parent:

var nodes = el.children[0].getElementsByTagName(div);

nodes = Array.prototype.slice.call(nodes);

nodes = nodes.filter(function(v, i){

    return v.parentElement === el.children[0]; 

});

Here is a demonstration of this approach: http://jsfiddle.net/WLhY2/

A simpler (albeit less efficient) approach is to use querySelectorAll to retrieve the relevant nodes using a selector expression:

var divs = document.querySelectorAll('div.ui-controlgroup-controls > div')