0

Why when I'm using document.querySelector on a dynamic HTML element, it won't give me the current dynamically set data? Is there a way to get the current data?

Example:

If I go to this stripe page with dynamic html, and I copy the JS path of this element:

enter image description here When I press paste and run the code in the console I get:

document.querySelector("#Full > table > tbody > tr > td:nth-child(1)")

returns-> <td>EUR</td>

But I would expect to get:

returns-> <td>USD</td>

I noticed that no matter what country I pick for Viewing support settlement currencies for which sets the dynamic HTML, the document query selector always returns the result as if that tab was on the first country in the list, Austria.

Dashiell Rose Bark-Huss
  • 2,173
  • 3
  • 28
  • 48
  • 1
    `.querySelector()` finds a matching element at the time that you call it. As long as you keep that element in the DOM, you can refer to it and access its properties. It does not work with elements that are created after you call it. – Scott Marcus Jan 27 '21 at 17:55
  • Also, please do not include pictures of your code. Always include the relevant code itself in your questions. – Scott Marcus Jan 27 '21 at 17:56
  • Because all the the data is there. It is hidden. So the selector matches the first one and returns it. – epascarello Jan 27 '21 at 17:59
  • There are multiple `elements` that hold the `id` attributes, so `querySelector` returns the first occurrence. – Onkar Jan 27 '21 at 18:00
  • 39 elements with the same id :) – epascarello Jan 27 '21 at 18:03
  • use something like this with coutry id form parent `document.querySelector('#US #Full table tbody tr td:first-child').textContent;` – Onkar Jan 27 '21 at 18:04
  • @ScottMarcus I didn't include pictures of my code. The code is copied and pasted. The only picture included is a picture of the stripe site to show which element I clicked on. – Dashiell Rose Bark-Huss Jan 27 '21 at 18:30
  • You've include 2 lines of code. We expect that you will include ALL the relevant code so that we can replicate your issue and provide a working answer. Also, you did provide a picture of your HTML, rather than all the HTML as code. – Scott Marcus Jan 27 '21 at 22:35
  • @ScottMarcus The two lines of code is ALL the code. The picture is not of my HTML- that is of the Stripe's public website- the site I was parsing. I did not share their code as I do not have it. I instead shared a link to the page so others can replicate my problem by parsing the site as well. – Dashiell Rose Bark-Huss Jan 27 '21 at 23:28

2 Answers2

2

querySelector returns the first item it finds that match. If you look at the source code the "dynamic" code is it just shows and hides a section. Each section has a table.

So what do they use to show it selected, but it is done on multiple levels. To get to the element that you are seeing as #Full, it would be

document.querySelector(".tabs-tab.selected .tabs-tab.selected")

The full selector would be

document.querySelector('.tabs-tab.selected .tabs-tab.selected > table > tbody > tr > td:nth-child(1)')
epascarello
  • 204,599
  • 20
  • 195
  • 236
0

If you really want to get data from that that path than you can use following code. just find the full xpath of website element using developer tools from chrome or firefox. Than replace fullXpath with your Fullxpath.

Note: I notice That normal xpath also does not work, so thats why use full xpath instead of xpath.

 let fullXpath =  "/html/body/div[2]/div/div[2]/div[2]/div/div/div/div[2]/div/div[1]/article/section[2]/div/div/div[34]/div/div/div[1]/table/tbody/tr[1]/td[1]";
    document.evaluate(fullXpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.innerHTML;

This will give you the desire result you are looking.

Sardar Badar Saghir
  • 65
  • 8