Javascript 对动态创建的文档的XPath求值无效_Javascript_Dom_Xpath

Javascript 对动态创建的文档的XPath求值无效

javascript dom xpath

Javascript 对动态创建的文档的XPath求值无效,javascript,dom,xpath,Javascript,Dom,Xpath,根据Mathias的评论更新/简化：我试图动态创建一个HTML文档，然后通过XPath在DOM中查找元素奇怪的是，创建的文档看起来是正确构造的，并使用Document查询它。例如，querySelector（“”）可以正常工作但是，document.evaluate总是为每个XPath返回null 更新#2:这对于Chrome+Safari来说是正确的。在Firefox中，一切正常 function createDocumentFromHTMLContent(htmlContent) {

根据Mathias的评论更新/简化：

我试图动态创建一个HTML文档，然后通过XPath在DOM中查找元素

奇怪的是，创建的文档看起来是正确构造的，并使用

Document查询它。例如，querySelector（“”）

可以正常工作

但是，

document.evaluate

总是为每个XPath返回null

更新#2:这对于Chrome+Safari来说是正确的。在Firefox中，一切正常

function createDocumentFromHTMLContent(htmlContent) {
  const htmlEl = document.createElement('HTML');
  htmlEl.innerHTML = htmlContent;

  const doctype = document.implementation.createDocumentType('html', '', '');
  const doc = document.implementation.createDocument('', 'html', doctype);
  doc.replaceChild(htmlEl, doc.firstElementChild);
  return doc;
}

function getElementByXpath(path, doc) {
  doc = doc || document;
  return doc.evaluate(path, doc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

const pageContent = `
<!DOCTYPE html>
<html>
<head>
  <title>Yup</title>
</head>
<body>
  <h1>Title</h1>
</body>
</html>
`;

const doc = createDocumentFromHTMLContent(pageContent);
const xpath = '/html[1]/body[1]/h1';
const onDoc = {
  viaXPath: getElementByXpath(xpath, doc),
  viaSelector: doc.querySelector('h1'),
};

const onDocument = {
  viaXPath: getElementByXpath(xpath, document),
  viaSelector: document.querySelector('h1'),
};

const summarize = (obj) => `XPath El: ${!!obj.viaXPath}, Selector El: ${!!obj.viaSelector}`;

const summaryEl = document.createElement('p');
summaryEl.innerHTML = `Via Document: ${summarize(onDocument)}<br />Via Doc: ${summarize(onDoc)}`;
document.body.appendChild(summaryEl);

函数createDocumentFromHTMLContent（htmlContent）{
const htmlEl=document.createElement（'HTML'）；
htmlEl.innerHTML=htmlContent；
const doctype=document.implementation.createDocumentType（'html'，''）；
const doc=document.implementation.createDocument（“”，'html'，doctype）；
doc.replaceChild（htmlEl，doc.firstElementChild）；
退货单；
}
函数getElementByXpath（路径，文档）{
文件=文件| |文件；
返回doc.evaluate（path，doc，null，XPathResult.FIRST\u ORDERED\u NODE\u TYPE，null）；
}
常量页面内容=`
是的
标题
`;
const doc=createDocumentFromHTMLContent（页面内容）；
constxpath='/html[1]/body[1]/h1'；
常数onDoc={
viapath:getElementByXpath（xpath，doc），
viaSelector:doc.querySelector（'h1'），
};
施工文件={
viaXPath:getElementByXpath（xpath，文档），
viaSelector:document.querySelector（'h1'），
};
const summary=（obj）=>`XPath El:${！！obj.viapath}，选择器El:${！！obj.viaSelector}`；
const summaryEl=document.createElement（'p'）；
summaryEl.innerHTML=`Via Document:${summary（onDocument）}
Via Doc:${summary（onDocument）}`；
文件.正文.附件（摘要）；

以下是JSFIDLE中的上述内容：

我不明白为什么XPath选择在一个文档对象上有效，而在另一个文档对象上无效

感谢您的帮助！非常困惑。

我不完全确定webkit浏览器中会发生什么，可能他们不喜欢

文档。replaceChild

文档元素，或者可能是因为您在

元素中设置了一些实际上无效的标记（例如，Doctype实际上应该设置在外部，它不能包含节点等。但是无论如何，将字符串解析为文档的正确方法是使用：

函数createDocumentFromHTMLContent（htmlContent）{
返回新的DOMParser（）.parseFromString（htmlContent，'text/html'）；
}
函数getElementByXpath（路径，文档）{
文件=文件| |文件；
返回doc.evaluate（path，doc，null，XPathResult.FIRST\u ORDERED\u NODE\u TYPE，null）；
}
常量页面内容=`
是的
标题
`;
const doc=createDocumentFromHTMLContent（页面内容）；
constxpath='/html[1]/body[1]/h1'；
常数onDoc={
viapath:getElementByXpath（xpath，doc），
viaSelector:doc.querySelector（'h1'），
};
施工文件={
viaXPath:getElementByXpath（xpath，文档），
viaSelector:document.querySelector（'h1'），
};
const summary=（obj）=>`XPath El:${！！obj.viapath}，选择器El:${！！obj.viaSelector}`；
const summaryEl=document.createElement（'p'）；
summaryEl.innerHTML=`Via Document:${summary（onDocument）}
Via Doc:${summary（onDocument）}`；
document.body.appendChild（summaryEl）；

Title

请在此处包含所有相关代码，而不是仅链接到小提琴。此外，请说出“未按预期工作”的内容意思是。如果您怀疑问题与XPath有关，那么直接显示代码中提取的HTML文档也是有意义的。谢谢！非常好的反馈，Mathias。谢谢。谢谢，我仍然不理解您所说的“XPath选择对一个文档对象有效，但对另一个文档对象无效”是什么意思如果我打开JSFIDLE，我会看到

通过Document:XPath El:true，Selector El:true

和

通过Doc:XPath El:true，Selector El:true

。你能解释一下你期望的输出与实际输出的对比吗？我想你在使用Firefox，对吗？在Google Chrome和Safari上，它在第二行输出false。