Поиск элемента в документе XHTML
Функция getLikeElements(), код которой приведен ниже, просканирует дерево документа и вернет набор искомых элементов. Найти элементы можно по названию тэга, по названию атрибута и по его значению (аргументы функции).
JavaScript:
function getLikeElements(tagName, attrName, attrValue) {
var startSet;
var endSet = new Array( );
if (tagName) {
startSet = document.getElementsByTagName(tagName);
} else {
startSet = (document.all) ? document.all :
document.getElementsByTagName("*");
}
if (attrName) {
for (var i = 0; i Функции не обязательно передавать все аргументы. Если не будет передано ни одного аргумента, то функция вернет набор всех элементов документа. Определите только первый аргумент tagName и функция вернет набор элементов с указанным названием тэга. Если определите tagName и attrName - функция вернет набор элементов с указанными названиями тэга и атрибута, при этом значение атрибута не учитывается. Если ищете элемент по значению атрибута - следует указывать и название атрибута: attrName, attrValue. Варианты правильного вызова функции getLikeElements():
// все элементы документа
var collection = getLikeElements( );
// все элементы div
var collection = getLikeElements("div");
// все элементы с атрибутом class
var collection = getLikeElements("", "class");
// все элементы class="highlight"
var collection = getLikeElements("", "class", "highlight");
// все
var collection = getLikeElements("td", "align", "center");
O'Reilly:JavaScript & DHTML Cookbook
Много комментариев (16) к “Поиск элемента в документе XHTML”
Наверно, можно было бы еще упомянуть о специальных возможностях для поиска элементов на странице, которые предоставляет DOM level 2, а именно: объекты NodeIterator и TreeWalker.
Это очень мощные средства и доступны они в той или иной мере в Mozilla, Opera 8+, Konqueror/Safari.
2006-06-05 at 12:28 pm
Класс, то что нужно.
2006-06-16 at 5:47 pm
Дайте пожалуйста полный пример использования, а то при
var collection = getLikeElements( );
alert(collection[0]); // выдает [object]
или я что-то недопонял?
2006-06-21 at 3:13 pm
Andrey, полнее вряд ли возможно, т.к. Вы получили вполне адекватный запросу результат. Определитесь, что хотите от полученного объекта – узнать его свойства, изменить их и т.п.
2006-06-21 at 3:35 pm
У меня та же проблема. При попытке изменить значение свойства элемента, найденого функцией получаю ошибку “element null or not an object”. При этом в отладчике видно, что в переменной лежит-таки нужный мне input. Думал раньше, что JS – язык динамически типизированый…
2006-07-05 at 11:02 am
Баранов Андрей: функция возвращает список ссылок на собственно объекты, а не список имён этих объектов.
P. S. Автору статьи: по-вашему, авторские права автора книги-источника — Д. Гудман — подобная статья не нарушает?.. ;-)
2006-07-05 at 2:56 pm
MT, в чем Вы видите нарушение авторских прав?
2006-07-05 at 3:19 pm
2 Rafiki
Cоздайте в форуме тему и я научу Вас (а заодно и всех остальных, у кого не получается) пользоваться этой функцией…
2 MT
…функция возвращает список ссылок на собственно объекты, а не список имён этих объектов ???
2006-07-05 at 9:49 pm
? вправду, почему не предусмотрена работа функции при смене style value?
var get = getLikeElements ( ‘div’, ‘class’, ‘main’ ).style.background = ‘000′;
Что я неправильно делаю?
2006-07-09 at 6:57 pm
Wizard
А Вы посмотрите, что возвращает эта функция…
2006-07-09 at 8:12 pm
Баранов Андрей: в создании статьи на основе материала книги, письменного согласия автора которой, предположительно, нет. Не настаиваю. ;-)
AKS: реплика служила ответом для Andrey, имя Баранова Андрея указал случайно.
–
Кстати, странновато функция ведёт себя в IE при поиске произвольных (не заданных явно в соответствующем параметре) элементов с заданным классом, возвращая пустой массив.
2006-07-15 at 4:44 pm
2 MT
Да, точно, все те же проблемы у IE с классами элементов. Нужно в функцию для IE вставлять дополнительную проверку…
2006-07-15 at 6:49 pm
Вот так функция, надеюсь, будет работать в IE и с именами классов:
function getLikeElements(tagName, attrName, attrValue) {
var start, end = [], re = new RegExp("(^|\\s)"+attrValue+"(\\s|$)");
if(tagName) start = document.getElementsByTagName(tagName);
else {
start = (document.all) ? document.all :
document.getElementsByTagName("*");
}
if(attrName) {
for(var i = 0, l = start.length; i if(attrName == "class" || start[i].getAttribute(attrName)) {
if(attrValue) {
if (re.test(start[i].className) || start[i].getAttribute(attrName) == attrValue) {
end.push(start[i]);
}
}
else end.push(start[i]);
}
}
}
else end = start;
return end;
}
2006-07-29 at 9:02 am
строку
startSet = (document.all) ? document.all : document.getElementsByTagName("*")лучше заменить наstartSet = (document.all && !window.opera) document.all : document.getElementsByTagName("*"), защита от дурацкой поддержки оперой 9 коллекцииdocument.all2006-08-11 at 7:30 pm
Все оказывается намного сложнее с этой функцией…
В варианте, который предлагал я, условие:
if(attrName == “class” || start[i].getAttribute(attrName))
нужно делать таким:
if (attrName == “class” && startSet[i].className || startSet[i].getAttribute(attrName))
или просто:
if (attrName == “class” && startSet[i].className)
? все равно, если, например, искать элементы только с аттрибутом readonly будут разные результаты…
2006-08-14 at 10:22 am
Спасибо за инфу, пригодиться!
2007-11-07 at 6:21 pm