Question

主要是基本的事情，但是我没有使它起作用。这是HTML：

 <div class="metadata">
<span class="type">
  <a name="txn-777" href="Display.html?id=12345#txn-777">#</a>
</span>
<span class="date">Fr&nbsp;10.&nbsp;Aug&nbsp;11:12:29&nbsp;2018</span>
<span class="description">
  <span class="user" data-user-id="31"><a href="/homepage/User/Summary.html?id=31">admin</a></span>created
</span>
<span class="time-taken"></span>
<span class="actions">[<a href="Update.html?id=12345&amp;QuoteTransaction=777&amp;Action=Respond" class="reply-link">Antworten</a>]&nbsp;[<a href="Update.html?id=12345&amp;QuoteTransaction=777&amp;Action=Comment" class="comment-link">Kommentieren</a>]&nbsp;[<a href="Forward.html?id=12345&amp;QuoteTransaction=777" class="forward-link">Weiterleiten</a>]</span>

这是我的JS；

 var pick = document.getElementsByClassName('reply-link').getAttribute('href');
alert(pick);

我想从“回复链接”类中获取“ href” URL。我尝试了几种组合，但都不起作用。请帮帮我。

Answer 1

document.getElementsByClassName('reply-link')返回节点列表。节点列表没有.getAttribute()方法。您需要从列表中选择一个节点并对其进行处理。

您可以通过将索引传递到返回的节点列表来实现，如下所示：

var pick = document.getElementsByClassName('reply-link')[0].getAttribute('href');
alert(pick);

 <div class="metadata">
<span class="type">
  <a name="txn-777" href="Display.html?id=12345#txn-777">#</a>
</span>
<span class="date">Fr&nbsp;10.&nbsp;Aug&nbsp;11:12:29&nbsp;2018</span>
<span class="description">
  <span class="user" data-user-id="31"><a href="/homepage/User/Summary.html?id=31">admin</a></span>created
</span>
<span class="time-taken"></span>
<span class="actions">[<a href="Update.html?id=12345&amp;QuoteTransaction=777&amp;Action=Respond" class="reply-link">Antworten</a>]&nbsp;[<a href="Update.html?id=12345&amp;QuoteTransaction=777&amp;Action=Comment" class="comment-link">Kommentieren</a>]&nbsp;[<a href="Forward.html?id=12345&amp;QuoteTransaction=777" class="forward-link">Weiterleiten</a>]</span>

但是，首先有两个原因不使用.getElementsByClassName()。

它返回一个“活动”节点列表，该列表要求每次访问pick变量时都重新查询整个DOM，以便它始终可以包含最新节点的集合。就性能而言，这是非常浪费的，只应在DOM动态变化频繁的情况下考虑。
您正在扫描整个DOM，收集所有匹配的节点，然后将其中所有节点扔掉。再次浪费。

相反，请使用.querySelector()获得与CSS选择器匹配的单个节点。

.getAttribute()很好，但是您也可以将任何HTML属性作为DOM对象属性来访问。

alert(document.querySelector('.reply-link').href);

<div class="metadata">
<span class="type">
  <a name="txn-777" href="Display.html?id=12345#txn-777">#</a>
</span>
<span class="date">Fr&nbsp;10.&nbsp;Aug&nbsp;11:12:29&nbsp;2018</span>
<span class="description">
  <span class="user" data-user-id="31"><a href="/homepage/User/Summary.html?id=31">admin</a></span>created
</span>
<span class="time-taken"></span>
<span class="actions">[<a href="Update.html?id=12345&amp;QuoteTransaction=777&amp;Action=Respond" class="reply-link">Antworten</a>]&nbsp;[<a href="Update.html?id=12345&amp;QuoteTransaction=777&amp;Action=Comment" class="comment-link">Kommentieren</a>]&nbsp;[<a href="Forward.html?id=12345&amp;QuoteTransaction=777" class="forward-link">Weiterleiten</a>]</span>

警报未显示-getAttribute（'href'）

1 个答案: