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

【问题标题】：Difference between document.getElementById and document.getElementsByClassNamedocument.getElementById 和 document.getElementsByClassName 之间的区别
【发布时间】：2015-11-05 14:46:16
【问题描述】：

特别是为什么 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 标签等常见的东西，以减少代码长度。

【问题讨论】：

getElementsByClassName 返回一个集合，而不是单个元素。

标签： javascript jquery css html

【解决方案1】：

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

【讨论】：

【解决方案2】：

因为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";
    }
}

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：