Question

我正在尝试从网站获取'a'标签的值。我正在Google Chrome控制台中运行以下代码。

document.querySelector('#container > article:nth-child(1) > div > h1 > a');

执行时返回此标记：

<a class="name-link" href="/shop/blarg/foo/bar">blarg</a>

我正在尝试返回“ blarg”，最好是在变量中。我尝试了以下方法：

document.querySelector('#container > article:nth-child(1) > div > h1 > a').value;

但是，它只是返回“ undefined”。任何帮助将不胜感激，谢谢

Answer 1

您应该选择innerHTML

document.querySelector('#container > article:nth-child(1) > div > h1 > a').innerHTML;

您还可以像这样编辑html

document.querySelector('#container > article:nth-child(1) > div > h1 > a').innerHTML="new value";

Answer 2

这应该为您解决问题。要获取内部文本而不是.value，您应该使用.text

document.querySelector('#container > article:nth-child(1) > div > h1 > a').text;

Answer 3

使用textContent属性获取文本，因为标记没有value属性，并且将返回undefined

<div id="container">
    <article>
      <div>
        <h1>
          <a class="name-link" href="/shop/blarg/foo/bar">blarg</a> 
        </h1>
      </div>
    </article>
    <article></article>
</div>

{{1}}

Answer 4

使用innerHTML代替值。即

document.querySelector('#container > article:nth-child(1) > div > h1 > a').innerHTML;

querySelector返回与指定选择器组匹配的第一个网页元素（对象）。因此，不能将 value 与querySelector的返回结果一起使用。

使用document.querySelector从网站获取值/名称

4 个答案: