Использование JavaScript, мы можем получить элемент по идентификатору, используя следующий синтаксис:Как получить имя элемента по имени?
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's comment:
var arrFromList = [].slice.call(y);
Как yckart предложил querySelector('.foo') и querySelectorAll('.foo') бы предпочтительнее, хотя, так как они, в самом деле, лучше поддерживается (93,99% против 87,24%), в соответствии с caniuse.com:
Спасибо. Возвращаемый массив – onmyway133
@ onmyway133: NP. Просто примечание стороны: возвращаемое значение - это * не * массив, это объект «NodeList», который ведет себя как массив разными способами, но есть разница. [проверьте документацию MDN] (https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/querySelectorAll) для получения подробной информации о типе возвращаемого кода и его спецификациях –
вы можете использовать
getElementsByClassName
Предположим, у вас есть какие-то элементы и применили имя класса 'тест', таким образом, вы можете получить элементы, подобные следующим
var tests = document.getElementsByClassName('test');
его возвращает экземпляр NodeList, или его надмножество: HTMLCollection (FF).
. голосовать без всякой причины – Talha
Это не так, но это происходит. Я не сделал DV, но я предполагаю, что кто-то подумал, что ваш ответ либо ничего не добавил _new_, и ваше правление заявляло, что 'getElementsByClassName' возвращает массив, что неверно. Отредактировал ваш ответ и +1, чтобы отменить -1 голос –
спасибо @EliasVanOotegem, но это случается иногда ... я тоже не ответил DV ur – Talha
Другой вариант заключается в использовании, querySelector('.foo') или querySelectorAll('.foo'), который имеет более широкую поддержку браузеров, чем getElementsByClassName.
+1 для querySelector, а не getElementsByClassName. –
+1, я ожидал бы, что соотношение поддержки будет наоборот, но, как оказалось, IE8 снова рвется мне в лицо :-), хотя я бы не стал говорить, что есть _ гораздо более широкая поддержка "_ –
@EliasVanOotegem Хорошо, хороший момент! Исправлено: – yckart
Вы должны использовать document.getElementsByClassName('class_name');
и не забывайте, что возвращаемое значение является массивом элементов, так что если вы хотите, первый из них использовать:
document.getElementsByClassName('class_name')[0]
Возвращаемое значение представляет собой * array-like * 'HTMLCollection', а не' Array' https://dom.spec.whatwg.org/#dom-document-getelementsbyclassname;) – yckart
Upvote для однострочного , –
Что заставляет вас думать, что 'document.getElementByClass' - это метод? Он появляется в любом поиске Google? –
http://www.w3schools.com/js/js_htmldom.asp упоминается, что получить элемент по имени класса, но не упоминается, как получить элемент по классу (никакого метода не упоминается там). Поэтому я подумал, что я должен попробовать с документом. getElementByClass – TDHM
опасайтесь использования w3schools.com в качестве источника информации. Есть намного лучшие места, чтобы учиться, чем это. Например, [MDN] (https://developer.mozilla.org/en-US/). – Spudley