Выберите элементы на основе класса и типа элемента

Question

Как выбрать все элементы в документе HTML с определенным классом и конкретным типом элемента?

Я пытаюсь выбрать все якоря с классом title loggedin из документа HTML (а затем открыть их в браузере). Они в параграфах с классом title.

Это листы в следующем дереве DOM:

+ body
  + div class='content'
    + div id='siteTable' class='sitetable linklisting'
      + div class='thing id-t3_xxxx xxx xxx link'
        + div class='entry unvoted'
            + p class='title'
              + a class='title loggedin '

Где x обозначает переменное содержимое.

(Я хочу сделать это в сыром JavaScript, т. Е. Не в jQuery.)

Answer 1

Попробуйте это:

var aElems = document.getElementsByTagName("a");
for (var i=0; i<aElems.length; ++i) {
    var classesArr = aElems[i].className.split(/\s+/),
        classesObj = {};
    for (var j=0; j<classesArr.length; ++j) {
        classesObj[classesArr[i]] = true;
    }
    if (classesObj.hasOwnProperty("title") && classesObj.hasOwnProperty("loggedin")) {
        // action
    }
}

Некоторые объяснения:

• document.getElementsByTagName возвращает массив элементов данного типа (в данном случае a)
• для каждого элемента в этом массиве извлекаются имена классов массива (см. aElems[i].className.split)
• каждое имя класса затем используется в качестве имени свойства для объекта индекса
• Затем ищется индекс для двух имен классов (см. aElems[i].className.split)

Answer 2

Технически это не один класс, это два класса: title и loggedin. Для этого вы можете использовать document.getElementsByClassName().

var elements = document.getElementsByClassName("title loggedin");

Вы можете передать два класса этому методу.

Answer 3

Выборка всех элементов определенного типа тега с использованием document.getElementsByTagName() и просмотр списка должны работать. С несколькими классами вам придется анализировать свойство className (которое будет содержать полную строку title loggedin) вручную.

Полагаю, у вас есть веская причина сделать это на чистом JavaScript; было бы намного удобнее использовать такие фреймворки, как jQuery или Prototype.

Answer 4

Я знаю, что это старый вопрос, но если вы когда-нибудь хотели узнать, как jQuery выбирает элементы, вы можете просмотреть источник их автономного механизма выбора Sizzle.js , который на протяжении многих лет разрабатывался много умных людей, которые потратили много времени на производительность :) 1003 *