Использование jQuery для обхода DOM, возврат HTML-атрибутов из узла

#javascript #jquery #dom #dom-traversal

#javascript #jquery #dom #dom-обход

Вопрос:

Я хочу просмотреть DOM и определить HTML-атрибуты определенных узлов. Например, значение класса для всех тегов.

Следующий код был предложен другим участником Stackoverflow для обхода DOM: http://jsfiddle.net/FJeaY /

Это работает хорошо, и я могу использовать его для идентификации идентификатора узла и его родителей. Также довольно легко фильтровать гиперссылки:

 walk_the_DOM(document.body, function(node) {
    if(node.nodeName == "A")
        alert(node.nodeName   ' id: '   node.id);
});
  

Однако я не уверен, что использовать для идентификации класса (или любого другого атрибута HTML). Все, что я пробовал до сих пор, начиная с поиска документации jQuery, завершилось неудачей.

Любые идеи приветствуются, заранее благодарю вас.

Комментарии:

1. вы пробовали node.className ?

Ответ №1:

Рассматриваемая функция на самом деле вообще не использует jQuery, а документация jQuery не подходит для изучения DOM в целом.

Взгляните на ссылку HTMLElement MDC. То, что вам нужно, это className атрибут:

 walk_the_DOM(document.body, function(node) {
    if(node.nodeName == "A") {
        alert(node.nodeName   ' class: '   node.className);
    }
});
  

Комментарии:

1. Отлично. Спасибо за ссылку на справочник Felix. Вы абсолютно правы, базовый код, который у меня был, не был jQuery. То, что я планирую делать с каждым узлом, будет связано с jQuery, и мне удалось запутаться.

2. @Tama: Ну, если вы все равно планируете использовать jQuery, то вы могли бы просто сделать: $('a').each(function(){/* do you stuff here */) . Вероятно, это будет быстрее, поскольку jQuery использует методы браузера, если они доступны.

Ответ №2:

.hasClass() может использоваться для проверки, есть ли определенный класс среди классов, назначенных элементу. Вернет либо true, либо false.

 $(node).hasClass('myclass')
  

Или вы можете использовать .attr() для получения class атрибута элемента.

 var klassz=$(node).attr('class');
  

Вместо последнего вы можете просто использовать node.className любой.

Ответ №3:

Оформить заказ http://jsfiddle.net/tahir/7gfuT /

Этот код использует DOM напрямую (просто для пояснения концепций). Вы можете использовать функции-оболочки jquery, предложенные bazmegakapa, чтобы упростить доступ к атрибутам DOM

Комментарии:

1. Спасибо, Тахир, тоже очень полезно.

2. Добро пожаловать. Щелчок по маленькому треугольнику, помимо ответа, указывающего вверх, — это еще один способ поблагодарить StackOverflow 😉