I have the following code on the webpage it contains multiple divs with a common data attribute for b tag and p tag as prescription name (title) and prescription description, I need to capture title description combination with pipe using DOM scrapping javascript output I need is T1 D1|T2 D2 |T3 D3 and so on in a variable as soon as a user lands on this page how to capture this ?
<div data-v-46636d4a="" class="panel_2N_jF"><div data-v-46636d4a="" data-purpose="selected-prescription"><b data-v-46636d4a="" data-purpose="prescription-name">T1 title1</b> <p data-v-46636d4a="" data-purpose="prescription-description">D1 description1</p></div><div data-v-46636d4a="" data-purpose="selected-prescription"><b data-v-46636d4a="" data-purpose="prescription-name">T2 title 2</b> <p data-v-46636d4a="" data-purpose="prescription-description">D2 description2</p></div><div data-v-46636d4a="" data-purpose="selected-prescription"><b data-v-46636d4a="" data-purpose="prescription-name">T3 title3</b> <p data-v-46636d4a="" data-purpose="prescription-description">D3 description3</p></div> </div></div>
I tried this code and it gives me the result but what if I have multiple divs with b tag and p tag but same data custom attribute like this then how to code this better ?
console.log(document.querySelector("body > div:nth-child(1) > div:nth-child(1) > b").textContent+' '+document.querySelector("body > div:nth-child(1) > div:nth-child(1) > p").textContent+' '+'|'+document.querySelector("body > div:nth-child(1) > div:nth-child(2) > b").textContent+' '+document.querySelector("body > div:nth-child(1) > div:nth-child(2) > p").textContent+' '+'|'+document.querySelector("body > div:nth-child(1) > div:nth-child(3) > b").textContent+' '+document.querySelector("body > div:nth-child(1) > div:nth-child(3) > p").textContent);