GetElementsByClassName() не работает в старых Internet Explorer, таких как IE6, IE7, IE8
Следующий код:
var borderTds = document.getElementsByClassName('leftborder');
дает мне сообщение об ошибке в Internet Explorer 6, 7 и 8:
Объект не поддерживает этот метод
Как я могу выбрать элементы по их классу в этих браузерах?
Я предпочитаю не использовать JQuery.
Ответы
Ответ 1
Это решение может помочь. Это пользовательская функция getElementsByClassName
, реализованная в чистом javascript, который работает в IE.
По сути, этот script делает, это один за другим, все возможные варианты и выбирает лучший доступный. Эти параметры:
- Нативная функция
document.getElementsByClassName
.
-
document.evaluate
, которая позволяет оценивать запросы XPath.
- Перемещение дерева DOM.
Конечно, первый из них является лучшим по производительности, однако последний должен быть доступен везде, включая IE 6.
Пример использования, который также доступен на странице, выглядит следующим образом:
getElementsByClassName("col", "div", document.getElementById("container"));
Таким образом, функция позволяет использовать 3 параметра: класс (обязательно), имя тега (необязательно, поиск всех тегов, если не указано), корневой элемент (необязательный, документ, если не указан).
Обновление. Решение, связанное с сообщением в блоге, размещено в коде Google, который закрывается в январе 2016 года. Однако автор сделал его доступным на GitHub. Kudos to flodin, указав это в комментариях.
Ответ 2
IE6, Netscape 6+, Firefox и Opera 7+ скопируйте следующий script на свою страницу:
document.getElementsByClassName = function(cl) {
var retnode = [];
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
if((' ' + elem[i].className + ' ').indexOf(' ' + cl + ' ') > -1) retnode.push(elem[i]);
}
return retnode;
};
Ответ 3
Метод не существует в IE6. Если вы хотите выбрать элементы по классу и не хотите использовать библиотеку, вам просто нужно пропустить все элементы на странице и проверить класс в свойстве className
.
function getElementsByClassName(className) {
var found = [];
var elements = document.getElementsByTagName("*");
for (var i = 0; i < elements.length; i++) {
var names = elements[i].className.split(' ');
for (var j = 0; j < names.length; j++) {
if (names[j] == className) found.push(elements[i]);
}
}
return found;
}
Демо: http://jsfiddle.net/kYdex/1/
Ответ 4
Internet Explorer 8 и старше не поддерживают getElementsByClassName()
. Если вам нужно только решение для IE8, оно поддерживает querySelectorAll()
, вы можете использовать один из них. Для старых IE вы должны предоставить свою собственную реализацию, а для некоторых других старых браузеров, которые ее поддерживают, вы также можете использовать evaluate()
, который запускает выражения XPath.
Этот код предоставляет метод document.getElementsByClassName
, если он еще не существует с помощью описанных методов:
if (!document.getElementsByClassName) {
document.getElementsByClassName = function(search) {
var d = document, elements, pattern, i, results = [];
if (d.querySelectorAll) { // IE8
return d.querySelectorAll("." + search);
}
if (d.evaluate) { // IE6, IE7
pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
elements = d.evaluate(pattern, d, null, 0, null);
while ((i = elements.iterateNext())) {
results.push(i);
}
} else {
elements = d.getElementsByTagName("*");
pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
for (i = 0; i < elements.length; i++) {
if ( pattern.test(elements[i].className) ) {
results.push(elements[i]);
}
}
}
return results;
}
}
Если вам что-то не нравится, вы можете использовать свою любимую поисковую систему, чтобы найти другую.
Ответ 5
Я знаю, что вы просите не использовать jQuery, но использование jQuery даст вам одно из самых элегантных решений.
Просто добавьте эту функцию в свой код javascript:
function defineGetElementsByClassName()
{
// define 'getElementsByClassName' - isn't supported in IE web browser
if (!document.getElementsByClassName)
{
document.getElementsByClassName =
function (className)
{
return this.querySelectorAll("." + className); }
}
}
defineGetElementsByClassName();
Ответ 6
Если getElementsByClassname не поддерживает ошибку в некоторых старых браузерах
Просто попробуйте
var modal = document.getElementById('myModal');
modal.onclick = function() { Затем выполните функцию ifclick или другую функцию, используя getElementById modal.style.display = "none";
}