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 用例：我在ajax请求中发送document.location，并接收内容部分＆＃39;内容的html代码（作为字符串）。请求发送的页面（我为重言式道歉）。然后我需要获取该content容器的CSS路径。这就是我将字符串转换为html对象并尝试在文档中找到它的原因。

Answer 1

如果您返回文档片段，可以使用`querySelector [All]查询它，例如：

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>

如何在文档中找到html对象？

1 个答案: