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 返回具有所有给定类名的所有子元素的类似数组的对象.

如果您想按类进行,请使用此选项

DEMO 1 - > http://jsfiddle.net/1r0u5d3o/2/

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

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

DEMO 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";
    }
}

Answer 2

getElementById返回 ID 与您的查询匹配的单个 DOM 元素。getElementsByClassName返回一个HtmlCollection类似数组的结构，其中包含与您的查询匹配的 DOM 元素。您必须迭代数组中的每个元素才能应用您的样式。