我有一些 HTML 可以包含<span>具有特定類的 s（我們稱之為 s marker）。這些跨度可以位于特定檔案中的任何位置<div>- 作為直接子節點，或任意深入地嵌套在其他節點中。
然后，我選擇了一段特定的文本（因此我可以使用window.getSelection()呼叫從 中查找錨節點Selection.anchorNode）。我想知道的是，根據需要使用 Javascript 和 jQuery，是在該選擇之前出現在檔案中的最后一個 marker <span>。例如：
<div class="container">
<div>
<div>
<span>Some text<span class="marker">Marker 1</span></span>
</div>
<div>
<div>
<span>Foo</span>
<span>THIS IS THE SELECTION ANCHOR NODE</span>
</div>
<span class="marker">Marker 2</span>
</div>
</div><!-- end of container -->
會發現Marker 1，即使他們是“表親”。
是否有一種“標準”方法來確定元素在 DOM 中的相對“線性”位置，以便我可以決定一個元素是否“在”另一個元素之前？
我不關心頁面上的位置 (x, y)，所以像 CSS 這樣的東西order并不重要。
我已經想到的事情，但似乎不是最理想的：
.marker使用[closest()][2]和構建某種節點的字典順序來遍歷每個（和選擇范圍）的父節點，這似乎很昂貴且容易出錯- 遍歷
.markers其中找到的跨度的父項并存盤其串列
這兩個似乎都需要大量的簿記和手動 DOM 遍歷來處理聽起來像是 DOM 已經知道的事情（因為檔案有其特定的順序）。
uj5u.com熱心網友回復：
您可以使用該Node.prototype.compareDocumentPosition方法來確定一個元素是否在另一個元素之前：
const anchor = document.getElementById("anchor");
const markers = document.querySelectorAll(".marker"); // get all the markers in DOM order
const previous = [...markers].filter( // get only the markers before
(elem) => anchor.compareDocumentPosition(elem) === Node.DOCUMENT_POSITION_PRECEDING
).pop(); // get the last one
console.log( previous );<div class="container">
<div>
<div>
<span>Some text<span class="marker">Marker 0</span></span>
<span>Some text<span class="marker">Marker 1</span></span>
</div>
<div>
<div>
<span>Foo</span>
<span id="anchor">THIS IS THE SELECTION ANCHOR NODE</span>
</div>
<span class="marker">Marker 2</span>
</div>
</div><!-- end of container -->uj5u.com熱心網友回復：
如果我理解正確，這應該會讓你到達那里：
let xpath = '(//span[@][not(.//preceding::*[contains(.,"SELECTION ANCHOR")])])[last()]',
result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
console.log(result.textContent);
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/318154.html
標籤：javascript html 查询 dom