Как выбрать массив узлов, используя стандартные методы javascript

Question

У меня есть массив элементов, которые я хотел бы извлечь из списка, я не могу изменить элементы, я бы обычно использовал jQuery, и вызов будет:

$("//div/ol/li/h3/a"); 

Однако я не могу подать в суд на jquery или другую структуру селектора в этом отношении, как это сделать.

Answer 1

Примечание: Похоже, что //div/ol/li/h3/a - выражение XPath, которое больше не поддерживается jQuery afaik.

Если ваши целевые браузеры поддерживают его, вы можете просто использовать querySelectorAll^[MDN]:

var links = document.querySelectorAll('div > ol > li > h3 > a'); 

В противном случае, прямое преобразование будет:

// root is the element you start with, e.g. `document.body` 
var selector = ['ol', 'li', 'h3', 'a'], 
    set = root.getElementsByTagName('div'); 

for(var i = 0, len = selector.length; i < len; i++) { 
    var tag = selector[i], 
     new_set = []; 

    for(var j = 0, lenj = set.length; j < lenj; j++) { 
     for(var child = set[j].firstChild; child; child.nextSibling) { 
      if(child.nodeName.toLowerCase() === tag) { 
       new_set.append(child); 
      } 
     } 
    } 

    set = new_set; 
} 

В конце концов, set будет содержать все ссылки. Можно также написать рекурсивную функцию или упростить код, если будет предоставлена ​​дополнительная информация о структуре HTML.

Answer 2

Из того, что я понимаю по вашему вопросу, вы хотите получить все div, ol, li, h3 или элементы из вашего документа в одном массиве без каких-либо зависимостей от любых фреймворков javascript.

Я думаю, что я сделал бы что-то подобное.

http://jsfiddle.net/UP3nH/

---

UPDATE

@Felix Клинг отметил, что ОП пытается селекторе использование XPath в вопросе. (это было устаревшим в более поздних версиях JQuery)

Чтобы создать массив элементов, которые соответствовали XPath запрос //div/ol/li/h3/a вы могли бы сделать это.

var tags = ['ol', 'li', 'h3', 'a']; 
var result = []; 
var leafs = document.getElementsByTagName(tags[tags.length - 1]); 

for (var i = 0; i < leafs.length; i++) { 
    var a = leafs[i], 
     j = (tags.length - 1); 
    while (a && a.nodeName.toLowerCase() == tags[j].toLowerCase()) { 
     j--; 
     a = a.parentNode; 
     if (j < 0) { 
      result.push(leafs[i]); 
      break; 
     } 
    } 
} 

console.log(result);​