Используя JavaScript, мы можем получить элемент по id, используя следующий синтаксис:
var x=document.getElementById("by_id");
Я попробовал следующее, чтобы получить элемент по классу:
var y=document.getElementByClass("by_class");
Но это привело к ошибке:
getElementByClass is not function
Как я могу получить элемент по его классу?
Название функции DOM на самом деле - getElementsByClassName, а не getElementByClassName, просто потому, что более одного элемента на странице могут иметь один и тот же класс, следовательно: Elements.
Возвращаемое значение этого будет экземпляром NodeList или надмножеством NodeList (FF, например, возвращает экземпляр HTMLCollection). В любом случае: возвращаемое значение является массивоподобным объектом:
var y = document.getElementsByClassName('foo');
var aNode = y[0];
Если по какой-то причине вам нужен возвращаемый объект в виде массива, вы можете сделать это легко благодаря его свойству магической длины:
var arrFromList = Array.prototype.slice.call(y);
//or as per AntonB comment:
var arrFromList = [].slice.call(y);
Поскольку yckart предложил, что querySelector querySelector('.foo') и querySelectorAll('.foo') были бы предпочтительнее, хотя, поскольку они, действительно, лучше поддерживаются (93,99% против 87,24%), согласно caniuse.com:
Другой вариант - использовать querySelector('.foo') или querySelectorAll('.foo'), который имеет более широкую поддержку браузера, чем getElementsByClassName.
Вам необходимо использовать document.getElementsByClassName('class_name');
и не забывайте, что возвращаемое значение является массивом элементов, поэтому, если вы хотите использовать первое:
document.getElementsByClassName('class_name')[0]
ОБНОВИТЬ
Теперь вы можете использовать:
document.querySelector(".class_name") чтобы получить первый элемент с CSS-классом class_name (null будет возвращено, если ни один из элементов на странице не имеет этого имени класса)
или document.querySelectorAll(".class_name"), чтобы получить NodeList элементов с class_name класса CSS (пустой NodeList будет возвращен, если Безоперационная. элементы на странице есть это имя класса).
вы можете использовать
getElementsByClassName
Предположим, что у вас есть некоторые элементы и применяется имя класса "test", поэтому вы можете получить такие элементы, как следующие
var tests = document.getElementsByClassName('test');
его возвращает экземпляр NodeList или его надмножество: HTMLCollection (FF).