`getElementsByClassName()`

Question

我试图在1个函数中分配2个命令而2个getElementsByClassName和2个getElementById没有用，但是当我尝试了两个类型中的一个时，它的工作原因有些原因。谁能告诉我，我在这里做错了什么？

工作版：

var i=1;

function change() 
{
    document.getElementsByClassName("money")[0].innerHTML = (i++) + " $";
    document.getElementById("dolla").style.color = "green";
}

不工作：

var i=1;

    function change() 
    {
        document.getElementsByClassName("money")[0].innerHTML = (i++) + " $";
        document.getElementsByClassName("money").style.color = "green";
    }

同样如此：

var i=1;

function change() 
{
    document.getElementById("dolla")[0].innerHTML = (i++) + " $";
    document.getElementById("dolla").style.color = "green";
}

在我使用2 getElementsByClassName / getElementById期间，当我将document.getElementById("dolla")/getElementsByClassName("money")指定为变量（x）但是x.style.color = "green";没有工作时，我在控制台中输入时出错，说它是“未定义的”。

HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <title>$ Button</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="container">
            <header>
                <h1>Click the button!</h1>
            </header>
            <article>
                <button type="button" onClick="change()">Click Here!</button>
                <h3>You currently have:<h3>
                <p></p>
                <b id="dolla" class="money" style="color:red">0 $</b>
                <script src="main.js"></script>
            </article>
        </div>
    </body>
</html>

Answer 1

`getElementsByClassName()`

返回具有所有给定类名的所有子元素的类数组对象。在文档对象上调用时，将搜索完整文档，包括根节点。您也可以在任何元素上调用getElementsByClassName（）;它将仅返回具有给定类名的指定根元素的后代元素。

我们通过在方括号中附加索引选择器来访问该类数组对象的元素。

那是

的原因

document.getElementsByClassName("money")[0].innerHTML = (i++) + " $";

有效，而

document.getElementsByClassName("money").style.color = "green";

没有按＆＃39;吨

我们无法将style应用于类似数组的对象。

`getElementById`

按ID返回对元素的引用; ID是一个字符串，可用于唯一标识HTML id属性中的元素。

这就是为什么

document.getElementById("dolla").style.color = "green";

作品。

Answer 2

您可以使用解决方案https://jsfiddle.net/y7zjh4s5/

＆＃13;

// Access using Class
var i=1;

changeWithClass = function() 
{
    document.getElementsByClassName("money")[0].innerHTML = (i++) + " $";
    document.getElementsByClassName("money")[0].style.color = "green";
}


// Access using ID
var i=1;

changeWithID = function() 
{
    document.getElementById("dolla").innerHTML = (i++) + " $";
    document.getElementById("dolla").style.color = "blue";
}

＆＃13;

<div id="container">
    <header>
        <h1>Click the button!</h1>
    </header>
    <article>
        <button type="button" onClick="changeWithClass()">Click Here (Using Class)!</button>
        <button type="button" onClick="changeWithID()">Click Here (Using ID)!</button>
        <h3>You currently have:<h3>
        <p></p>
        <b id="dolla" class="money" style="color:red">0 $</b>
    </article>
</div>

＆＃13;

getElementsByClass

的解决方案

代码应该是 var i = 1;

function change() 
{
    document.getElementsByClassName("money")[0].innerHTML = (i++) + " $";
    document.getElementsByClassName("money")[0].style.color = "green";
}

由于getElementsById返回一个元素数组，这些元素具有相同的类，用于访问您需要使用索引值访问它的任何元素。

getElementById

的解决方案

var i=1;

function change() 
{
    document.getElementById("dolla").innerHTML = (i++) + " $";
    document.getElementById("dolla").style.color = "green";
}

由于 ID 是唯一的，因此它会返回一个元素。您可以直接访问元素。

Answer 3

While changing color also you need to use the "getElementsByClassName("money")[0]"    
var i=1;

    function change() 
    {
        document.getElementsByClassName("money")[0].innerHTML = (i++) + " $";
        document.getElementsByClassName("money")[0].style.color = "green";
    }


For ID we do n't need [0]

var i=1;

function change() 
{
    document.getElementById("dolla").innerHTML = (i++) + " $";
    document.getElementById("dolla").style.color = "green";
}

为什么不能使用getElementById或getElementsByClassName？

3 个答案:

`getElementsByClassName()`

`getElementById`