Javascript document.getElementsByTagName正在工作，但document.getElementById无法使用相同的功能

我试图使用Javascript更改输入标记占位符的颜色。如果我使用document.getElementsByTagName，我可以实现这一点，但是如果我使用document.getElementById，那么它就不起作用了

HTML:

JavaScript（带有document.getElementsByTagName）：

函数changep占位符颜色（）{
var textboxs=document.getElementsByTagName（“输入”）；
对于（变量i=0；i

JavaScript（带有document.getElementById）：

函数changep占位符颜色（）{
var textboxs=document.getElementById（“输入”）；
对于（变量i=0；i

---

我无法理解为什么会发生这种情况。

您必须将函数

changep占位符color（）

更改为：

function ChangePlaceHolderColor() {
    var textBoxes = document.getElementById("input");
    if (textBoxes.type == "text") {
        if (textBoxes.value == "") {
                textBoxes.className += " Red";
        }
    }
}

---

这是因为getElementsByTagName将返回一个HTML元素数组，而getElementsById将始终返回单个HTML元素

function ChangePlaceHolderColor() {
    //no loop because the return is one element.
    var textBoxes = document.getElementById("input");
        if (textBoxes.type == "text") {
            if (textBoxes.value == "") {
                textBoxes.className += " Red";
            }
        }

}

---

在HTML中，元素ID在任何给定页面上都必须是唯一的。

getElementById只返回1个元素，而不是数组

函数changep占位符colorx（）{
var textboxs=document.getElementsByTagName（“输入”）；
对于（变量i=0；i

.Red{
颜色：红色；
}

不要否决我的问题。我有一个真正的疑问，这就是我问这个问题的原因。仔细看，注意

getElementById（）

有

Element

而没有“s”。也就是说，它是单数的，只返回单个元素，而不是像

getElementsByTagName（）

这样的元素列表。如果您确实费心查找

getElementById（）

的规范，您就不必问这个问题了。换句话说，在提出问题之前，你没有尽到最小的努力，这可能就是你被否决的原因。

function ChangePlaceHolderColor() {
    var textBoxes = document.getElementById("input");
    for (var i = 0; i < textBoxes.length; i++) {
        if (textBoxes[i].type == "text") {
            if (textBoxes[i].value == "") {
                textBoxes[i].className += " Red";
            }
        }
    }
}

function ChangePlaceHolderColor() {
    var textBoxes = document.getElementById("input");
    if (textBoxes.type == "text") {
        if (textBoxes.value == "") {
                textBoxes.className += " Red";
        }
    }
}

function ChangePlaceHolderColor() {
    //no loop because the return is one element.
    var textBoxes = document.getElementById("input");
        if (textBoxes.type == "text") {
            if (textBoxes.value == "") {
                textBoxes.className += " Red";
            }
        }

}