CODEWITHSUNDEEP
javascriptdom
Rocknroll15
Rocknroll15

Reputation: 53

Access Elements inside the span element

I have a block of code like this

<span class='Wrapper'>
    <span class="title"></span>
    <span class="body">
        <ul class="items">
        <li></li>
        <li></li>
        </ul>
    <span>
</span>

Once I access the span wrapper element using document.getElementsByTagName('span'); how do I access the inner span elements with title class and the ul elements of the span element with class body.I need to do this using plain javascript

Upvotes: 1

Views: 3538

Answers (4)

Jordizle
Jordizle

Reputation: 252

First get an array holding all the span elements:

var yourSpans = document.getElementsByTagName('span');

Then then loop over each element in the array checking if the element has the specific class:

for(var i in yourSpans){
    if (yourSpans[i].className == "title" || yourSpans[i].className == "body") {
        // your code here
    }
}

Upvotes: 1

Drewness
Drewness

Reputation: 5072

I would really recommend using jQuery, it would make your life a lot easier!

$('.title').dostuff...

But if you want a JS only solution, here you go...

function editClass(matchClass,content) {
    var elems = document.getElementsByTagName('*'),i;
    for (i in elems) {
        if((" "+elems[i].className+" ").indexOf(" "+matchClass+" ") > -1) {
            elems[i].innerHTML = content;
        }
    }
}

Here is a fiddle (Pure-JS, no jQuery) as an example.

Upvotes: 0

vishakvkt
vishakvkt

Reputation: 864

Adding to reagan's answer, you would then need to do something like

 for( var i = 0, j= spans.length; i < j; i+=1 ) {
    var classes = span[i].getAttribute("class");
    if( classes ) {
       if( classes.indexOf("your_class_name") != -1) {
          //span[i] is one of thelements you need containing 'your_class_name'.
       }
    }
 }

Upvotes: 0

reagan
reagan

Reputation: 653

var spans = document.getElementsByTagName('span');

would return an array of spans. You would access the spans using spans[0], spans[1], etc.

Upvotes: 0

Related Questions