Как получить имя элемента по имени?

Используя JavaScript, мы можем получить элемент по id, используя следующий синтаксис:

var x=document.getElementById("by_id");

Я попробовал следующее, чтобы получить элемент по классу:

var y=document.getElementByClass("by_class");

Но это привело к ошибке:

getElementByClass is not function

Как я могу получить элемент по его классу?

Ответы

Ответ 1

Название функции 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:

Ответ 3

Вам необходимо использовать 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 будет возвращен, если Безоперационная. элементы на странице есть это имя класса).

Ответ 4

вы можете использовать

getElementsByClassName

Предположим, что у вас есть некоторые элементы и применяется имя класса "test", поэтому вы можете получить такие элементы, как следующие

var tests = document.getElementsByClassName('test');

его возвращает экземпляр NodeList или его надмножество: HTMLCollection (FF).

Подробнее