为什么 "document.querySelector('a.some class') [0].href" 返回 null？

Question

我被建议（在这里）使用：

var nextPageUrl = document.querySelector('a.some class')[0].href;

获取包含在锚中的 URL。但是 Firebug 控制台说 returns null:

TypeError: document.querySelector(...) is null

语法似乎正确，"somme class" 锚确实存在，如下所示。

<a href="mypage02.html" target="_self" class="some class" title="My Second Page">

我试过

var nextPageUrl = document.querySelectorALL('a.some class')[0].href;

然后我收到 "undefined" 错误。

非常感谢

Answer 1

由于 some 和 class 是同一元素中的 2 个不同的 class，您需要使用 .some.class，如果您在两者之间给出 space它们将成为后代选择器。

<a href="mypage02.html" target="_self" class="some class" title="My Second Page">

有一些和 class 有 2 个不同 classes

var nextPageUrl = document.querySelectorAll('a.some.class')[0].href;

您正在寻找具有标记名 class 的元素，它是具有 class some 的锚点的后代 like

<a href="mypage02.html" target="_self" class="some" title="My Second Page">
    <maybe-some-parents>
        <some></some>
    </maybe-some-parents>
</a>

Answer 2

a.some class 被解释为

<a class="some">
  <doesn'tMatterHowDeep>
     <class>Only I'm selected</class>
  </doesn'tMatterHowDeep>
</a>

由于您使用的是 space，它正在考虑 select 标签名称为 class 且位于 a.some 下的元素，而实际上，他们是两个不同的类.

你需要的是a.some.class

Answer 3

你的代码有很多错误：

document.querySelector()

returns单个元素，不能[0]单个元素。使用

document.querySelectorAll('a.some class')[0].href;

相反。

此外，您的 class 名称不能有 space，每个 space 都会分隔一个新的 class，因此不要匹配 a.some class 而匹配 a[class="some class"].

Answer 4

class 'some' 和 'class' 现在是您代码的两个 class。 class 'some' 可以。但是，不允许使用带有 'class' 名称的 class。它是一个关键字。因此，要么使 'some_class' 或 'some-class' 或 'SomeClass'.

为什么 "document.querySelector('a.some class') [0].href" 返回 null？

Why does "document.querySelector('a.some class') [0].href" retun null?

html

javascript

firefox