在使用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>
&#13;
提前感谢您的帮助!
答案 0 :(得分:2)
正如documentation中所述:
document.evaluate(".//h3", levelResult, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null)
.// h3 xpathExpression非常重要,表明查询应该从上下文节点(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);
}
&#13;
<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>
&#13;