javascript - document.getElementById 和 document.getElementsByClassName 之间的区别

Question

特别是为什么 document.getElementsById 在这里起作用

<div id="move">add padding</div>

<button type="button" onclick="movefun()">pad</button>

<script>
function movefun() {
    document.getElementById("move").style.paddingLeft = "50px";
}
</script>

但是 document.getElementsByClassName 不起作用

<div class="move">add padding</div>

<button type="button" onclick="movefun()">Set left padding</button>

<script>
    function movefun() {
        document.getElementsByClassName("move").style.paddingLeft = "50px";
    }
</script>

我省略了 html 和 body 标签等常见内容以减少代码长度。

Answer 1

因为 getElementsByClassName 返回一个类数组对象，其中包含所有具有所有给定类名称的子元素。

如果你想在类里面做，请改用这个

演示 1 -> http://jsfiddle.net/1r0u5d3o/2/

document.getElementsByClassName("move")[0].style.paddingLeft = "50px";

或者如果你想对类的所有元素执行此操作，请使用循环

演示 2 -> http://jsfiddle.net/1r0u5d3o/1/

function movefun() {
    var elements = document.getElementsByClassName("move");
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.paddingLeft = "50px";
    }
}