在 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>

我设法select菜单使用：

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

我感兴趣的元素是：

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

此元素是网站访问者的语言 selection，可以是 "English" 或 "Français"。

如果用户在英文页面上，元素的值将显示为该值。但是，如果它们是等效的法语，则该元素将为 <a href="/email_check?lang=en">English</a>

我想要 select 或者 returns "English" 或 "Français"。

我该怎么做？

Answer 1

答案：

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

它将 select 第一个 a 属性为 href 且在 #utility-menu 中以 /email_check?lang= 开头的元素。也许你可以 .trim() text 来去掉空格。

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/

在 dom scrape 中寻找子元素的选择器

Seeking a selector for child elements in dom scrape

javascript

selector