Поиск элемента в документе 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 < startSet.length; i++) {
      if (startSet[i].getAttribute(attrName)) {
        if (attrValue) {
          if (startSet[i].getAttribute(attrName) == attrValue) {
            endSet[endSet.length] = startSet[i];
          }
        } else {
          endSet[endSet.length] = startSet[i];
        }
      }
    }
  } else {
    endSet = startSet;
  }
  return endSet;
}

Функции не обязательно передавать все аргументы. Если не будет передано ни одного аргумента, то функция вернет набор всех элементов документа. Определите только первый аргумент 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");
// все <td align="center">
var collection = getLikeElements("td", "align", "center");

O'Reilly:JavaScript & DHTML Cookbook



Много комментариев (16) к “Поиск элемента в документе XHTML”

  1. AKS :

    Наверно, можно было бы еще упомянуть о специальных возможностях для поиска элементов на странице, которые предоставляет DOM level 2, а именно: объекты NodeIterator и TreeWalker.
    Это очень мощные средства и доступны они в той или иной мере в Mozilla, Opera 8+, Konqueror/Safari.


  2. Wizard :

    Класс, то что нужно.


  3. Andrey :

    Дайте пожалуйста полный пример использования, а то при

    var collection = getLikeElements( );
    alert(collection[0]); // выдает [object]

    или я что-то недопонял?


  4. Баранов Андрей :

    Andrey, полнее вряд ли возможно, т.к. Вы получили вполне адекватный запросу результат. Определитесь, что хотите от полученного объекта – узнать его свойства, изменить их и т.п.


  5. Rafiki :

    У меня та же проблема. При попытке изменить значение свойства элемента, найденого функцией получаю ошибку “element null or not an object”. При этом в отладчике видно, что в переменной лежит-таки нужный мне input. Думал раньше, что JS – язык динамически типизированый…


  6. MT :

    Баранов Андрей: функция возвращает список ссылок на собственно объекты, а не список имён этих объектов.

    P. S. Автору статьи: по-вашему, авторские права автора книги-источника — Д. Гудман — подобная статья не нарушает?.. ;-)


  7. Баранов Андрей :

    MT, в чем Вы видите нарушение авторских прав?


  8. AKS :

    2 Rafiki
    Cоздайте в форуме тему и я научу Вас (а заодно и всех остальных, у кого не получается) пользоваться этой функцией…
    2 MT
    …функция возвращает список ссылок на собственно объекты, а не список имён этих объектов ???


  9. Wizard :

    И вправду, почему не предусмотрена работа функции при смене style value?
    var get = getLikeElements ( ‘div’, ‘class’, ‘main’ ).style.background = ‘000′;
    Что я неправильно делаю?


  10. AKS :

    Wizard
    А Вы посмотрите, что возвращает эта функция…


  11. MT :

    Баранов Андрей: в создании статьи на основе материала книги, письменного согласия автора которой, предположительно, нет. Не настаиваю. ;-)

    AKS: реплика служила ответом для Andrey, имя Баранова Андрея указал случайно.

    Кстати, странновато функция ведёт себя в IE при поиске произвольных (не заданных явно в соответствующем параметре) элементов с заданным классом, возвращая пустой массив.


  12. AKS :

    2 MT
    Да, точно, все те же проблемы у IE с классами элементов. Нужно в функцию для IE вставлять дополнительную проверку…


  13. AKS :

    Вот так функция, надеюсь, будет работать в 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 < l; 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;
    }


  14. alshur :

    строку startSet = (document.all) ? document.all : document.getElementsByTagName("*") лучше заменить на startSet = (document.all && !window.opera) document.all : document.getElementsByTagName("*"), защита от дурацкой поддержки оперой 9 коллекции document.all


  15. AKS :

    Все оказывается намного сложнее с этой функцией…
    В варианте, который предлагал я, условие:
    if(attrName == “class” || start[i].getAttribute(attrName))
    нужно делать таким:
    if (attrName == “class” && startSet[i].className || startSet[i].getAttribute(attrName))
    или просто:
    if (attrName == “class” && startSet[i].className)
    И все равно, если, например, искать элементы только с аттрибутом readonly будут разные результаты…


  16. Sanches :

    Спасибо за инфу, пригодиться!



22 queries 0.199 seconds.