Javascript “document.getElementByClass 不是函数”

"document.getElementByClass is not a function"

提问by user547794

I am trying to run a function onclickof any button with class="stopMusic". I'm getting an error in Firebug

我正在尝试onclick使用class="stopMusic". 我在 Firebug 中遇到错误

document.getElementByClass is not a function

document.getElementByClass 不是函数

Here is my code:

这是我的代码：

var stopMusicExt = document.getElementByClass("stopButton");
    stopButton.onclick = function() {
        var ta = document.getElementByClass("stopButton");
        document['player'].stopMusicExt(ta.value);
        ta.value = "";
    };

回答by BoltClock

You probably meant document.getElementsByClassName()(and then grabbing the first item off the resulting node list):

您可能的意思是document.getElementsByClassName()（然后从结果节点列表中获取第一项）：

var stopMusicExt = document.getElementsByClassName("stopButton")[0];

stopButton.onclick = function() {
    var ta = document.getElementsByClassName("stopButton")[0];
    document['player'].stopMusicExt(ta.value);
    ta.value = "";
};

You may still get the error

您可能仍会收到错误消息

document.getElementsByClassNameis not a function

document.getElementsByClassName不是函数

in older browsers, though, in which case you can provide a fallback implementation if you need to support those older browsers.

但是，在较旧的浏览器中，如果您需要支持那些较旧的浏览器，则可以提供回退实现。

回答by jfriend00

As others have said, you're not using the right function name and it doesn't exist univerally in all browsers.

正如其他人所说，您没有使用正确的函数名称，并且并非在所有浏览器中都普遍存在。

If you need to do cross-browser fetching of anything other than an element with an id with document.getElementById(), then I would strongly suggest you get a library that supports CSS3 selectors across all browsers. It will save you a massive amount of development time, testing and bug fixing. The easiest thing to do is to just use jQuerybecause it's so widely available, has excellent documentation, has free CDN access and has an excellent community of people behind it to answer questions. If that seems like more than you need, then you can get Sizzlewhich is just a selector library (it's actually the selector engine inside of jQuery and others). I've used it by itself in other projects and it's easy, productive and small.

如果您需要跨浏览器获取带有 id 的元素以外的任何内容document.getElementById()，那么我强烈建议您获得一个支持所有浏览器的 CSS3 选择器的库。它将为您节省大量的开发时间、测试和错误修复。最简单的方法就是使用jQuery，因为它的应用范围非常广泛，拥有出色的文档，拥有免费的 CDN 访问权限，并且背后有一个优秀的人员社区来回答问题。如果这看起来超出了您的需要，那么您可以获得Sizzle，它只是一个选择器库（它实际上是 jQuery 和其他内部的选择器引擎）。我已经在其他项目中单独使用过它，它简单、高效且小巧。

If you want to select multiple nodes at once, you can do that many different ways. If you give them all the same class, you can do that with:

如果您想一次选择多个节点，您可以采用多种不同的方式。如果你给他们所有相同的类，你可以这样做：

var list = document.getElementsByClassName("myButton");
for (var i = 0; i < list.length; i++) {
    // list[i] is a node with the desired class name
}

and it will return a list of nodes that have that class name.

它将返回具有该类名的节点列表。

In Sizzle, it would be this:

在 Sizzle 中，它是这样的：

var list = Sizzle(".myButton");
for (var i = 0; i < list.length; i++) {
    // list[i] is a node with the desired class name
}

In jQuery, it would be this:

在 jQuery 中，它会是这样的：

$(".myButton").each(function(index, element) {
    // element is a node with the desired class name
});

In both Sizzle and jQuery, you can put multiple class names into the selector like this and use much more complicated and powerful selectors:

在 Sizzle 和 jQuery 中，您都可以像这样将多个类名放入选择器中，并使用更复杂和更强大的选择器：

$(".myButton, .myInput, .homepage.gallery, #submitButton").each(function(index, element) {
    // element is a node that matches the selector
});

回答by neo

Before jumping into any further error checking please first check whether its

在跳入任何进一步的错误检查之前，请首先检查它是否

document.getElementsByClassName() itself.

document.getElement sByClassName() 本身。

double check its getElementsand not getElement

仔细检查其getElement小号，而不是getElement

回答by Saket

It should be getElementsByClassName, and not getElementByClass. See this - https://developer.mozilla.org/en/DOM/document.getElementsByClassName.

应该是getElementsByClassName，而不是getElementByClass。看到这个 - https://developer.mozilla.org/en/DOM/document.getElementsByClassName。

Note that some browsers/versions may not support this.

请注意，某些浏览器/版本可能不支持此功能。

回答by KuN

document.querySelectorAllworks pretty well and allows you to further narrow down your selection.

document.querySelectorAll效果很好，并允许您进一步缩小选择范围。

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

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

回答by Ande Caleb

you spelt it wrongly, it should be " getElementsByClassName ",

你拼错了，应该是“getElementsByClassName”，

var objs = document.getElementsByClassName("stopButton");
var stopMusicExt = objs[0]; //retrieve the first node in the stack

//your remaining function goes down here.. 
document['player'].stopMusicExt(ta.value);
ta.value = "";

document.getElementsByClassName - returns a stack of nodes with more than one item, since CLASS attributes are used to assign to multiple objects...

document.getElementsByClassName - 返回包含多个项目的节点堆栈，因为 CLASS 属性用于分配给多个对象...

回答by Kamil Kie?czewski

The getElementByClassdoes not exists, probably you want to use getElementsByClassName. However you can use alternative approach (used in angular/vue/react... templates)

将getElementByClass不存在，可能要使用getElementsByClassName。但是，您可以使用替代方法（在 angular/vue/react... 模板中使用）

function stop(ta) {
  console.log(ta.value) // document['player'].stopMusicExt(ta.value);
  ta.value='';
}

<input type="button" onclick="stop(this)" class="stopMusic" value='Stop 1'>
<input type="button" onclick="stop(this)" class="stopMusic" value='Stop 2'>

回答by Sanket Jagtap

If you wrote this "getElementByClassName" then you will encounter with this error "document.getElementByClass is not a function" so to overcome that error just write "getElementsByClassName". Because it should be Elements not Element.

如果您编写了此“getElementByClassName”，那么您将遇到此错误“document.getElementByClass 不是函数”，因此要克服该错误，只需编写“getElementsByClassName”即可。因为它应该是元素而不是元素。

回答by Gajender Singh

    enter code here
var stopMusicExt = document.getElementByClass("stopButton").value;
    stopButton.onclick = function() {
        var ta = document.getElementByClass("stopButton");
        document['player'].stopMusicExt(ta.value);
        ta.value = "";
    };


// .value will hold all data from class stopButton