在getElementById之后,getElementByClass不链接到DOM

时间:2018-07-26 09:18:01

标签: javascript html dom getelementbyid getelementsbyclassname

我不了解JavaScript中怪异行为的问题:

如果我得到像这样的元素(例如表中的一行):

var someElement = document.getElementById("row1");

然后尝试从该元素(例如,列)中按类查找元素,并更改innerHTML,什么也没发生:

someElement.getElementsByClassName("column1").innerHTML = "new text";

但是,如果我改为这样做:

someElement.childNodes[0].innerHTML= "new text";

innerHTML元素发生更改,并且在DOM上可见。为什么会这样呢?我认为类事情现在会为我生成更干净的代码,所以有没有办法让类方法按我认为的那样工作?

我正在使用最新版本的Chrome。

2 个答案:

答案 0 :(得分:2)

没有getElementByClassName()应该是getElementsByClassName()(请注意s末尾的elements

但是主要问题是,当您尝试在innerHTML的结果上调用对象getElementsByClassName()的属性时,该结果返回具有所有给定子元素的所有子元素的类似数组的对象类名。

无论如何,我建议使用querySelector()querySelectorAll()代替:

someElement.querySelector(".column1").innerHTML = "new text";
//Or
someElement.querySelectorAll(".column1")[0].innerHTML = "new text";

否则,您可以仅指向返回结果的第一个元素,例如:

someElement.getElementsByClassName("column1")[0].innerHTML = "new text";

答案 1 :(得分:1)

ID是唯一的,Class可以在多个元素上使用,这就是为什么函数被称为getElementsByClassName的原因,请注意元素中的S,要更改类中的任何内容,必须经过循环,因此可以使用它例如

    var a = document.getElementsByClassName("example"); 

    for( let i = 0; i< a.length;i++)
         a[i].style.top = "50px";

注意:这仅是示例,请使用您的innerhtml或所需的任何内容