在dom scrape中尋找子元素的選擇器

Question

我無法更改相關網站上的任何html。

這是一些HTML：

<ul id="utility-menu" class="menu menu--primary">

        <li><a class="" href="https://www.example.com/newsstand" target="_blank">Magazines</a></li>

        <li><a class="" href="https://secure.bla.com/example/promo/GiveAGift/" target="_blank">Gifts</a></li>

        <li>

          <a href="/email_check?lang=fr">Français</a>
        </li>

            <li><a class="" href="/signin">Sign In</a></li>

        <li>
          <div class="i-am-canadian">
            <img alt="Canadian flag" height="23px;" src="https://secure.example.com/assets/images/icons/ui/i-canadian-c8a132ad64588dcc0b2e61cc589dfef3.png" width="40px;">
          </div>
        </li>
      </ul>

我設法使用以下方法選擇菜單：

document.querySelectorAll('.menu--primary')[0]

我感興趣的元素是：

<a href="/email_check?lang=fr">Français</a>

該元素是網站訪問者的語言選擇，將是“英語”或“法語”。

如果用戶在英語頁面上，則該元素的值將顯示。 但是，如果使用等效的法語，則該元素將為<a href="/email_check?lang=en">English</a>

我想要一個返回“英語”或“法語”的選擇器。

我該怎么辦？

Answer 1

回答：

var el = document.querySelector('#utility-menu a[href^="/email_check?lang="').textContent;

它將首先在#utility-menu選擇一個屬性href為/email_check?lang= a元素。 可能您可以使用.trim()文本來消除空格。

Answer 2

如果您的html不會有太大變化，則可以使用

var test = document.querySelector("ul > li > a[href='/email_check?lang=fr']");

console.log(test.textContent); // Français

https://jsfiddle.net/u4vjq8ah/