Select all a element in website using pure js

Question

I want to select all the countries names in the tbody

website: https://www.worldometers.info/coronavirus/

i tried

document.querySelector("#main_table_countries > tbody:nth-child(2) > tr:nth-of-type(1n) > td:nth-of-type(1n) > a").innerText

it gives only the first country

i think i need to use loop to fetch lines but i don't know how

Use `querySelectorAll()` to get all matches. `querySelector()` just returns the first. — Barmar, Mar 15 '20 at 21:30
@Barmar `Uncaught TypeError: Failed to execute 'querySelectorAll' on 'Document': 1 argument required, but only 0 present. at :1:10 ` — user11845248, Mar 15 '20 at 21:33
You left out the argument containing the selector expression. — Barmar, Mar 15 '20 at 21:36

score 1 · Answer 1 · answered Mar 15 '20 at 21:32

1

querySelector returns the first matching element. You need to use querySelectorAll to get all matching elements, then you can iterate the collection based on your requirements.

answered Mar 15 '20 at 21:32

Amit

45,440
9
78
110

Uncaught TypeError: Failed to execute 'querySelectorAll' on 'Document': 1 argument required, but only 0 present. at :1:10 – user11845248 Mar 15 '20 at 21:33
You need to provide the css selector as an argument (the same value you used in the question) – Amit Mar 15 '20 at 21:34
@Amit i did `document.querySelectorAll("#main_table_countries > tbody:nth-child(2) > tr:nth-of-type(1n) > td:nth-of-type(1n) > a").innerText` – user11845248 Mar 15 '20 at 21:36
2

It returns a list of elements, you need to loop over them to get all their `innerText`. – Barmar Mar 15 '20 at 21:37
@Barmar sorry, i got `undefined` – user11845248 Mar 15 '20 at 21:40
because you need to loop. See https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method – Barmar Mar 15 '20 at 21:41
I@Amit `document.querySelectorAll` will return an array, you need to iterate (loop) over those results. – rhys_stubbs Mar 15 '20 at 21:43
@rhys_stubbs it returns a NodeList, not an array. – VLAZ Mar 15 '20 at 21:44
i'm wondering why you don't just post the answer if you already know it, i'm not a javascript dev, and trying to work with selectors just hard for me atleast for now – user11845248 Mar 15 '20 at 21:47
@VLAZ Indeed it does, the OP is clearly a new to programming so I thought I would add a simple explanation that they may better understand. For the sake of simplicity, the OP may want to use `Array.from` to convert the NodeList to a normal array – rhys_stubbs Mar 15 '20 at 21:49
@rhys_stubbs `document.querySelectorAll("#main_table_countries > tbody:nth-child(2) > tr:nth-of-type(1n) > td:nth-of-type(1n) > a")` give NodeList that there text contain the country name, how can extract those countries using loop ? – user11845248 Mar 15 '20 at 21:50

Christos Lytras · Accepted Answer · 2020-03-15T22:19:19.283

1

You have to use querySelectorAll instead of querySelector.

UPDATE

Most country elements do not have links, so you have to just get the td without the a tag. Please check the updated code with the updated selector #main_table_countries > tbody:nth-child(2) > tr > td:nth-child(1).

To print the values:

const selector = "#main_table_countries > tbody:nth-child(2) > tr > td:nth-child(1)";

document.querySelectorAll(selector).forEach(el => console.log(el.textContent.trim()));

To get an array with the values:

const selector = "#main_table_countries > tbody:nth-child(2) > tr > td:nth-child(1)";

const counties = [...document.querySelectorAll(selector)].map(el => el.textContent.trim());

edited Mar 15 '20 at 22:19

answered Mar 15 '20 at 22:00

Christos Lytras

36,310
4
80
113

it doesn't give all the list, because the other countries have different seletor, without a tag – user11845248 Mar 15 '20 at 22:06
You have to change the selector and exclude the anchor tag `a`, because most countries do not have links. Please check my updated code and selector. **TIP**: You can add `.trim()` at the end of `el.textContent.trim()` to get rid of the spaces. – Christos Lytras Mar 15 '20 at 22:20

rhys_stubbs · Answer 3 · 2020-03-15T22:02:03.530

0

const nodeList = document.querySelectorAll("#main_table_countries > tbody:nth-child(2) > tr:nth-of-type(1n) > td:nth-of-type(1n) > a");

// iterate over the NodeList
nodeList.forEach(element => {

    // access each element here
    console.log(element.innerText);

});

// OR iterate over an array
const elementsArray = Array.from(nodeList);

elementsArray.forEach(element => {

    // access each element here
    console.log(element.innerText);

});

edited Mar 15 '20 at 22:02

answered Mar 15 '20 at 21:55

rhys_stubbs

538
6
16

it doesn't give all the list, because the other countries have different seletor, without a tag – user11845248 Mar 15 '20 at 22:06
@user11845248 If the CSS selector that you have given does not work you need to provide a better example of the HTML. – rhys_stubbs Mar 15 '20 at 22:13
@user11845248 My mistake, unfortunately I’m on a smart phone and unable to inspect the source. – rhys_stubbs Mar 15 '20 at 22:15
Thanks to you and @xxMePHDxx, i got the answer, thank you – user11845248 Mar 15 '20 at 22:17

score 0 · Answer 4 · answered Mar 15 '20 at 22:11

0

First, you will have to use querySelectorAll to return a NodeList of elements and use selector that selects all first column from table with id main_table_countries as below

let countries = [...document.querySelectorAll('table#main_table_countries tbody:nth-child(2) tr td:nth-child(1)')].map(e=>e.innerText);
console.log(countries);

answered Mar 15 '20 at 22:11

xxMrPHDxx

657
5
11

Thanks to you and @rhys_stubbs, i got the answer, thank you – user11845248 Mar 15 '20 at 22:17

score 0 · Answer 5 · answered Mar 15 '20 at 22:16

Combining @xxMrPHDxx and @rhys_stubbs answers, i finally figure it out

const nodeList = document.querySelectorAll("table#main_table_countries tr td:nth-child(1)");

// iterate over the NodeList
nodeList.forEach(element => {

    // access each element here
    console.log(element.innerText);

});

// OR iterate over an array
const elementsArray = Array.from(nodeList);

elementsArray.forEach(element => {

    // access each element here
    console.log(element.innerText);

});

Actually you'll need the `tbody:nth-child(2)` part to avoid **Total** column in the last row — xxMrPHDxx, Mar 15 '20 at 22:18

Select all a element in website using pure js

5 Answers5