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 - ＆gt; http://jsfiddle.net/1r0u5d3o/2/

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

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

DEMO 2 - ＆gt; 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元素。您必须遍历数组中的每个元素以应用您的样式。

Answer 3

document.getElementById("move") returns html element

document.getElementsByClassName("move") returns html collection

style是html元素的属性，因此适用于getElementById

供参考 -

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Answer 4

我们希望获得唯一元素并将其分配到变量中，这可以通过使用getElementById来完成。但是当我们想要获取所有产品元素并将它们分配到变量中时，基本上我们使用的是getElementByClassName。

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

4 个答案: