使用 XPath 查找具有重疊類的元素

本文旨在解決使用XPath 查找具有多個共享類的HTML 元素的問題。通過分析XPath 的局限性，以及CSS 選擇器的優勢，提供了一種更有效、更可靠的解決方案，即使用querySelectorAll 方法和CSS 選擇器來定位目標元素。

在使用XPath 定位HTML 元素時，特別是當元素具有多個類名時，可能會遇到一些問題。例如，以下兩個span 元素：

 <span class="a8Pemb OFFNJ Jz5Gae">...</span>
<span class="a8Pemb OFFNJ">...</span>

如果嘗試使用XPath 表達式//span[@class='a8Pemb OFFNJ'] 來查找它們，只會返回第二個元素，因為該表達式要求class 屬性的值必須完全等於'a8Pemb OFFNJ'。第一個元素的class 屬性包含額外的類名Jz5Gae，因此不匹配。

XPath 的局限性

XPath 1.0 (HTMLUnit 中使用的版本) 不支持將class 屬性值拆分為單獨的to​​ken 進行比較。雖然可以使用contains() 函數構建更複雜的XPath 表達式來檢查class 屬性是否包含所需的每個類，但這種方法通常更複雜且容易出錯。

更佳的解決方案：CSS 選擇器

一個更簡單、更可靠的解決方案是使用CSS 選擇器和querySelectorAll 方法。 CSS 選擇器允許您根據元素的類名來定位元素，而無需考慮類名的順序或是否存在其他類名。

例如，要查找具有a8Pemb 和OFFNJ 類的所有span 元素，可以使用以下CSS 選擇器：

 span.a8Pemb.OFFNJ

然後，可以使用querySelectorAll 方法在文檔中查找與此選擇器匹配的所有元素：

 const elements = document.querySelectorAll('span.a8Pemb.OFFNJ');

// elements 是一個NodeList，包含所有匹配的span 元素elements.forEach(element => {
  console.log(element);
});

示例代碼

以下是一個完整的示例，演示如何使用CSS 選擇器和querySelectorAll 方法來查找具有重疊類的元素：

 


  <title>查找具有重疊類的元素</title>


  <span class="a8Pemb OFFNJ Jz5Gae">第一個元素</span>
  <span class="a8Pemb OFFNJ">第二個元素</span>
  <span class="a8Pemb">第三個元素</span>

  <script>
    const elements = document.querySelectorAll(&#39;span.a8Pemb.OFFNJ&#39;);

    elements.forEach(element => {
      console.log(element);
    });
  </script>

此代碼將輸出包含前兩個span 元素的NodeList，因為它們都具有a8Pemb 和OFFNJ 類。

注意事項

• querySelectorAll 方法返回一個NodeList，它不是一個數組。可以使用Array.from(elements) 將其轉換為數組。
• CSS 選擇器區分大小寫。
• 確保選擇器中的類名拼寫正確。

總結

當需要查找具有多個共享類的HTML 元素時，使用CSS 選擇器和querySelectorAll 方法比使用XPath 更簡單、更可靠。這種方法可以避免XPath 的局限性，並提供更清晰、更易於維護的代碼。

以上是使用 XPath 查找具有重疊類的元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！