程序员经验分享-hwhale

使用 document.evaluate() 的 xpathResult 作为 contextNode 不起作用

2024-03-26

在使用 document.evaluate 时，我尝试再次使用 xpathResult 作为类似于所附示例的 contextNode，但没有成功，我错在哪里？

const getAllLiButton = document.querySelector("#get-all-li");
const getTitleAndTextButton = document.querySelector("#get-title-text");

getAllLiButton.addEventListener("click", getAllLi);
getTitleAndTextButton.addEventListener("click", getTitleAndText);

function getAllLi() {
  var records = [];

  let topLevelResults = document.evaluate("/html/body/ul/li", document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

  var levelResult = topLevelResults.iterateNext();
  while (levelResult) {
    records.push(levelResult);
    
    levelResult = topLevelResults.iterateNext();
  }

  console.log(records);
}

function getTitleAndText() {
  let topLevelResults = document.evaluate("/html/body/ul/li", document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

  var levelResult = topLevelResults.iterateNext();

  let titleText = document.evaluate("/h3", levelResult, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
  console.log(titleText);

  let textBox = document.evaluate("/span", levelResult, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
  console.log(textBox);
}
<button id="get-all-li">Get all li (works)</button>
<button id="get-title-text">Get single Title & Text (not works)</button>

<ul>
  <li><h3>Title #1</h3><span>some text</span></li>
  <li><h3>Title #2</h3><span>some text</span></li>
  <li><h3>Title #3</h3><span>some text</span></li>
  <li><h3>Title #4</h3><span>some text</span></li>
  <li><h3>Title #5</h3><span>some text</span></li>
</ul>

在此先感谢您的帮助！


据报道文档 https://developer.mozilla.org/en-US/docs/Web/API/Document/evaluate:

document.evaluate(".//h3", levelResult, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null)

The .//h3xpathExpression 很重要，它指示查询应该从上下文节点 (levelResult) 开始。

const getAllLiButton = document.querySelector("#get-all-li");
const getTitleAndTextButton = document.querySelector("#get-title-text");

getAllLiButton.addEventListener("click", getAllLi);
getTitleAndTextButton.addEventListener("click", getTitleAndText);

function getAllLi() {
    var records = [];

    let topLevelResults = document.evaluate("/html/body/ul/li", document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

    var levelResult = topLevelResults.iterateNext();
    while (levelResult) {
        records.push(levelResult);

        levelResult = topLevelResults.iterateNext();
    }

    console.log(records);
}

function getTitleAndText() {
    let topLevelResults = document.evaluate("/html/body/ul/li", document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

    var levelResult = topLevelResults.iterateNext();

    let titleText = document.evaluate(".//h3", levelResult, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
    titleText = titleText.iterateNext();
    console.log(titleText.textContent);

    let textBox = document.evaluate(".//span", levelResult, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
    textBox = textBox.iterateNext();
    console.log(textBox.textContent);
}
<button id="get-all-li">Get all li (works)</button>
<button id="get-title-text">Get single Title & Text (not works)</button>

<ul>
    <li><h3>Title #1</h3><span>some text</span></li>
    <li><h3>Title #2</h3><span>some text</span></li>
    <li><h3>Title #3</h3><span>some text</span></li>
    <li><h3>Title #4</h3><span>some text</span></li>
    <li><h3>Title #5</h3><span>some text</span></li>
</ul>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

使用 document.evaluate() 的 xpathResult 作为 contextNode 不起作用 的相关文章

随机推荐

热门标签