Как найти html-объект в документе?

Question

Я создаю объект HTML с помощью такого кода:

var parseHTML = function(str) { 
    var tmp = document.implementation.createHTMLDocument(); 
    tmp.body.innerHTML = str; 
    return tmp.body.children; 
}; 

var htmlCollection = parseHTML('<div><article><h1>Article heading</h1></article></div>'); 
var articleNode = htmlCollection[0].childNodes[0]; 

В моем HTML коде у меня есть такой элемент:

<article> 
    <h1>Article heading</h1> 
</article> 

Таким образом, вопрос: как я могу найти article элемент в моем HTML документа используя articleNode?

Решение, отличное от jQuery, является предпочтительным.

UPD:articleNode и статья в html - это два отдельных элемента. Мне нужно ссылаться на второй, используя первый один

UPD2 потребительной случай: я отправляю document.location в Ajax запрос и получить HTML код (в виде строки) для содержания «содержательной части» страницы из который посылал запрос (я прошу прощения за тавтологию). Затем мне нужно получить путь CSS для этого контейнера content. Вот почему я конвертирую строку в объект html и пытаюсь найти ее в документе.

Answer 1

Если вы возвращаете фрагмент документа, вы можете запросить его с помощью `querySelector [все], что-то вроде:

window.onload = function() { 
 

 
    var parseHTML = function(str) { 
 
    var tmp = document.implementation.createHTMLDocument(); 
 
    tmp.body.innerHTML = str; 
 
    return tmp; 
 
    }; 
 

 
    var htmlCollection = parseHTML('<div><article><h1>Article heading</h1>'+ 
 
           '</article><article><h1>Article heading 2</h1>'+ 
 
           '</article></div>'); 
 
    var result = document.querySelector('#result'); 
 
    var articleNodes = htmlCollection.querySelectorAll('div, article'); 
 

 
    result.innerHTML = 'first article: '+articleNodes[1].outerHTML+'<br>'; 
 
    result.innerHTML += 'the whole enchilada: '+articleNodes[0].outerHTML; 
 
    
 
};

<div id="result"></div>