Alert didn't show up - getAttribute('href')

Question

its mainly a basic thing, but I didn't get it to work. This is the 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>

This is my JS;

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

I wanna pick up the "href" URL from the class "reply-link". I tried several combinations and none of them work. Please help me out.

Scott Marcus · Answer 1 · 2018-09-03T15:50:05.937

document.getElementsByClassName('reply-link') returns a node list. Node lists don't have a .getAttribute() method. You need to select a node from the list and work with that.

You can do that by passing an index to the returned node list as shown here:

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>

But, there are two reasons not to use .getElementsByClassName() in the first place.

It returns a "live" node list that requires that the entire DOM be re-queried every time the pick variable is accessed so that it can always contain a collection of the most current nodes. This is very wasteful in terms of performance and should only be considered in situations where the DOM dynamically changes frequently.
You're scanning the entire DOM, making a collection of all matching nodes and then throwing all but one of them away. Again wasteful.

Instead, use .querySelector() to get a single node that matches a CSS selector.

Also, while .getAttribute() perfectly fine, you can also access any HTML attribute as a DOM object property.

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>

Yes, that was my first line too. But I don't get an alert here.... — maschroom, Sep 03 '18 at 15:46
@maschroom Any error in your code prior to the `alert()` will prevent it from getting that far. As you can see, it works here, so you must have other problems in your code. Look at your developer's tools Console to see errors. — Scott Marcus, Sep 03 '18 at 15:51
ERROR: Execution of script 'myScript' failed! Cannot read property 'getAttribute' of undefined — maschroom, Sep 03 '18 at 16:07
@maschroom So that means that your `.getElementsByClassName()` isn't returning any nodes. Make sure that your ` — Scott Marcus, Sep 03 '18 at 16:09
It's indeed a question of loading order. So my path was correct from the beginning. But how can I make sure that the page is really loaded before the script starts working? I tried reaching a thats located on the bottom of the page and of course the window.onload. But both approaches won't help. I have to use Tampermonkey, so the script always kicks in, when the page is loaded. Their are some adjustments possible inside the plugin, but that didn't make anything else different. — maschroom, Sep 04 '18 at 16:42

Alert didn't show up - getAttribute('href')

1 Answers1