Javascript getElementsByTagName

Question

I'm trying to use the getElementsByTagName("a") method to get all the elements under a specific tag.

However, I don't want every anchor tag. How would I narrow it so I only select all the anchor tags under the the ul tag for "someListClass" name?

<ul class="someListClass"> <li><a href... /></li>... </ul>

I know in jQuery you can just select with $(".someListClass a").

How would I do it without using jQuery?

Answer 1

Give your ul an id and then use

<ul id="ulid" class="someListClass"> <li><a href... /></li>... </ul>

document.getElementById ( "ulid" ).getElementsByTagName ( "a" );

element.getElementsByTagName

elements = element.getElementsByTagName(tagName);

elements is a live NodeList of found elements in the order they appear in the subtree.

element is the element from where the search should start. Note that only the descendants of this element are included in the search, but not the element itself.

tagName is the qualified name to look for. The special string "*" represents all elements. For compatibility with XHTML, lower-case should be used.

Answer 2

Without a framework, I can think of no other way than going though each element manually and to iterate its parents. If one of them has the class "somelistClass", add it to the stack. Otherwise, not.

If you are looking for the children of a single element, phoenix's approach is the way to go.

Answer 3

you can use

element.getElementsByTagName(tagName)

where element is the UL item... so grab the UL item then search against that. something like:

<ul class="someListClass" id="myList"> <li><a href... /></li>... </ul>

var theList = document.getElementById('myList');
var listItems = theList.getElementsByTagName('li');

Answer 4

you want getElementsByClassName http://www.quirksmode.org/blog/archives/2008/05/getelementsbycl.html

  links = document.getElementsByClassName("someListClass")[0].getElementsByTagName("a")