如何从getElementsByClassName的DOM对象中获取信息

Question

I am currently modifying a website, I need to get the current slide's class name, and modify the img tag after run

var test=document.getElementsByClassName("activeslide");

it give the value of test

[<li class="slide-4 activeslide" style="visibility: visible; opacity:1;">         ]
    <a target="_blank">
        <img src="img/floorplans/suite-A.jpg" style="height: 560px; width: 495px; left:132px; top:0px">
    </a>
</li>

how do I get the slide-4 and how do I edit the img tag by DOM? I tried to do test.innerHTML, and tried to convert test into string, test.toString(); but it returns me "[object HTMLCollection]"

Answer 1

You can use myElement.className or myElement.getAttribute("class") where myElement is a reference to your element. Newer browsers also have classList .

Answer 2

getElementsByClassName() returns an array. Following code will give you the img DOM element:

var liArray = document.getElementsByClassName("activeslide");
var imgArray = liArray[0].getElementsByTagName("img");
var img = imgArray[0];