I got DOM element which has many Div tags inside, without any class or ID. All I want is to get values from the div Attribute "data-as-pseudo-element" using Javascript (no JQuery or any other library).
The result should be:
Hello How Are You
ABC
XYZ
<div role="none" >
<div
data-as-pseudo-element="Hello How Are You" style="position: relative;display: inline;"
></div>
<div
data-as-pseudo-element="ABC" style="position: relative;display: inline;"
></div>
<div
data-as-pseudo-element="XYZ" style="position: relative;display: inline;"
></div>
</div>
Thanks in advance!
Easy to do using querySelectorAll to find the elements, and dataset to extract the value:
for (div of document.querySelectorAll('div[data-as-pseudo-element]')) {
console.log(div.dataset.asPseudoElement)
}<div role="none" >
<div
data-as-pseudo-element="Hello How Are You" style="position: relative;display: inline;"
></div>
<div
data-as-pseudo-element="ABC" style="position: relative;display: inline;"
></div>
<div
data-as-pseudo-element="XYZ" style="position: relative;display: inline;"
></div>
</div>Thank you, Thomas for the solution. I don't know why, your code works well on my testing page, but return undefined on real page (Skype call web version).
I figured out another way to do it:
var tranScript = "";
var divs = document.querySelectorAll('div[data-as-pseudo-element]'), i;
for (i = 0; i < divs.length; ++i) {
tranScript += divs[i].attributes["data-as-pseudo-element"].textContent.toString() +"\n" ;
}
console.log(tranScript); <div role="none" >
<div
data-as-pseudo-element="Hello How Are You" style="position: relative;display: inline;"
></div>
<div
data-as-pseudo-element="ABC" style="position: relative;display: inline;"
></div>
<div
data-as-pseudo-element="XYZ" style="position: relative;display: inline;"
></div>
</div>