通过document.getElementsByClassName("s1");或document.getElementsByName("s1")返回的是一个集合myCollection ，这是需要遍历某个元素下子元素的方法。（由于水平有限，所写的都是直接可运行的demo）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob)</title>
</head>
<body>

<h2>JavaScript HTML DOM</h2>

<p class="s1">Hello World!</p>

<p class="s1">Hello Runoob!</p>

<p class="s1">点击按钮修改 p 元素的背景颜色。</p>

<button οnclick="myFunction()">点我</button>

<script>
function myFunction() {
    var myCollection = document.getElementsByClassName("s1");
    var i;
    for (i = 0; i < myCollection.length; i++) {
        myCollection[i].style.color = "red";
    }
}
</script>

</body>
</html>

 

注意

HTMLCollection 不是一个数组！

HTMLCollection 看起来可能是一个数组，但其实不是。

你可以像数组一样，使用索引来获取元素。

HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

更多推荐

HTML遍历某个元素下的子元素