IE7 Queryselector не находит элементы
if (!document.querySelectorAll)
document.querySelectorAll = function(selector) {
var head = document.documentElement.firstChild;
var styleTag = document.createElement("STYLE");
head.appendChild(styleTag);
document.__qsResult = [];
styleTag.styleSheet.cssText = selector+"{x:expression(document.__qsResult.push(this))}";
window.scrollBy(0, 0);
head.removeChild(styleTag);
var result = [];
for (var i in document.__qsResult)
result.push(document.__qsResult[i]);
return result;
}
var tabs = document.querySelectorAll(".tab");
var descriptionTabs = document.querySelectorAll(".descriptionTab");
var hireTabs = document.querySelectorAll(".hireTab");
var salesTabs = document.querySelectorAll(".salesTab");
var lazyImages = document.querySelectorAll(".lazy");
console.info(tabs.length);
console.info(hireTabs.length);
console.info(salesTabs.length);
console.info(descriptionTabs.length);
console.info(lazyImages.length);<img class = "imageThumbs lazy" src = "">
<img class = "imageThumbs lazy" src = "">
<img class = "imageThumbs lazy" src = "">
<img class = "imageThumbs" src = "">
<div class = "tabContainer">
<div class = "descriptionTab tab">Description</div>
<div class = "hireTab tab">HireTab</div>
<div class = "salesTab tab">SalesTab</div>
</div>У меня странная проблема с IE, режим документа 7.
Самое странное в этом то, что мои функции отлично работают в режимах документа 5 и 8.
Некоторые элементы не обнаружены. Когда я проверяю инструменты разработчика браузера, они там, в HTML-документе.
Я не понимаю, почему они неверны в этой конкретной версии IE, а все остальные работают нормально.
Надеюсь, у кого-то есть идея. Заранее спасибо.
Обновлено:
Это отдельный сценарий, предназначенный только для более ранних версий IE. Я использую getElementsByClassName в другом скрипте.
Тег скрипта находится внизу HTML-страницы.
Работает везде, кроме IE7.
Обновлено: измените код на фрагмент.
Обновлено: Я определил проблему, пройдя через нее.
styleTag.styleSheet.cssText = selector+"{x:expression(document.__qsResult.push(this))}";
Эта строка, похоже, работает с некоторыми элементами, а не с другими, поэтому они не нажимаются. Насколько я понимаю, разницы между
var descriptionTabs = document.querySelectorAll(".descriptionTab");
Что работает и
var hireTabs = document.querySelectorAll(".hireTab");
Но это не так.
FinalEdit (я сдаюсь): кажется, что результаты различаются в зависимости от того, в каком порядке расположены селекторы запросов.
Вы можете подтвердить, что вызываете все это, когда дом будет готов?
Было бы очень легко сказать пользователю IE7 использовать современный браузер. Так много причуд в старых версиях. Раньше были целые сайты посвященные "IE Hacks"
Это отдельный сценарий, предназначенный только для более ранних версий IE. Я использую getElementsByClassName в другом скрипте.
Не будет ли проще просто добавить идентификаторы к родительским элементам и отфильтровать их список childNodes, чтобы он работал во всех браузерах? Тогда браузер сможет хотя бы оптимизировать эти циклы childNode. По сравнению с выражениями CSS, которые необходимо проанализировать, а затем в любом случае перебирать DOM в цикле, чтобы найти правильные элементы. Это просто вызывает множество дополнительных проблем (отдельный скрипт для IE, проблемы безопасности из-за выражений CSS с использованием eval, несовместимость между версиями IE, не все селекторы CSS, доступные в IE), просто чтобы иметь возможность использовать синтаксис querySelector ().
Не совсем потому, что на каждой странице будет разное количество элементов.
Обновите свой вопрос, добавив минимальный воспроизводимый пример, демонстрирующий проблему (включая HTML), в идеале работоспособный с использованием Stack Snippets (кнопка панели инструментов [<>]; вот как это сделать). Например, элементы .tab не обнаружены. Здорово! Таким образом, вы сможете создать MCVE с одним элементом .tab.
Я добавил фрагмент, но проблема, с которой я столкнулся, связана с IE7. Проблема не будет воспроизведена во фрагменте.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Не поддерживается, https://caniuse.com/#feat=queryselector
Вы можете использовать альтернативы, такие как findElementById или findElementByClassName.
Вот почему у меня есть функция сверху как полифилл. если (! document.querySelectorAll)
Может это поможет? stackoverflow.com/questions/18404362/…
Селектор запросов работает. Если вы можете видеть мой код в некоторых журналах консоли, он возвращает правильную сумму.
@Shemiroth, Подскажите пожалуйста подробно или на примере. что вы имеете в виду под «кажется, что результаты различаются в зависимости от того, в каком порядке расположены селекторы запросов»? Я также хочу подтвердить вам, с какой актуальной версией IE вы пытаетесь протестировать? Если это IE 11, то я предлагаю вам провести тест с фактическим IE 7. Режим документа не даст точных результатов во многих условиях.
Покопавшись, я нашел решение на Github.
https://gist.github.com/Fusselwurm/4673695
(function () {
var
style = document.createStyleSheet(),
select = function (selector, maxCount) {
var
all = document.all,
l = all.length,
i,
resultSet = [];
style.addRule(selector, "foo:bar");
for (i = 0; i < l; i += 1) {
if (all[i].currentStyle.foo === "bar") {
resultSet.push(all[i]);
if (resultSet.length > maxCount) {
break;
}
}
}
style.removeRule(0);
return resultSet;
};
// be rly sure not to destroy a thing!
if (document.querySelectorAll || document.querySelector) {
return;
}
document.querySelectorAll = function (selector) {
return select(selector, Infinity);
};
document.querySelector = function (selector) {
return select(selector, 1)[0] || null;
};
}());
Это работает во всех более ранних версиях IE. Я просто заменил полифилл, который использовал ранее.
Если все, что вам нужно сделать, это сопоставить теги, идентификаторы и имена классов, я бы предпочел использовать getElementById (), getElementsByClassName () и getElementsByTagName () вместо взлома CSS, который работает только с определенными экземплярами IE. Имхо, единственная причина использовать этот хак - это когда вам нужны сложные селекторы CSS.