using document.querySelector to get a value/name from a website

Question

I'm trying to get the value of the 'a' tag from a website. I'm running the code below in the console of Google Chrome.

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

Executing that returns this tag:

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

I'm trying to get 'blarg' returned, preferably in a variable. I have tried the following:

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

However it simply returns 'undefined'. Any help would be much appreciated, thank you

[https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) — Olafant, Feb 28 '19 at 10:48

score 3 · Answer 1 · answered Feb 28 '19 at 10:52

3

You should select innerHTML

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

You can also edit that html like this

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

answered Feb 28 '19 at 10:52

pavelbere

964
10
21

score 2 · Accepted Answer · answered Feb 28 '19 at 10:47

2

This should do the trick for you. To get innner text instead of .value you should use .text

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

answered Feb 28 '19 at 10:47

Shubham Jain

930
1
14
24

Thank you! Is there any difference from using this and .textContent? – aboruchovas Feb 28 '19 at 11:00
1

@aboruchovas Read this for better understanding https://stackoverflow.com/a/13172461/5147832 – Shubham Jain Feb 28 '19 at 11:03

score 2 · Answer 3 · edited Feb 28 '19 at 10:56

2

Use the textContent property to get the text as a tag does not have an value property and will return undefined

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

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

edited Feb 28 '19 at 10:56

Shubham Jain

930
1
14
24

answered Feb 28 '19 at 10:48

ellipsis

12,049
2
17
33

Works great thank you! Is there any difference in using this as opposed to .text instead? – aboruchovas Feb 28 '19 at 10:56
1

They are almost the same just inherited from different objects – ellipsis Feb 28 '19 at 11:12

score 2 · Answer 4 · edited Feb 28 '19 at 12:01

2

Use innerHTML instead of value. i.e.

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

querySelector returns the first web page element (object) that matches the specified group of selectors. So you can not use value with the return result of querySelector.

edited Feb 28 '19 at 12:01

Awad Maharoof

2,260
1
24
36

answered Feb 28 '19 at 11:26

Divya Srivastav

51
1

using document.querySelector to get a value/name from a website

4 Answers4