'get value from attribute "pseudo-element" using Javascript

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!

javascript simple-html-dom

Solution 1:^[1]

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>

Solution 2:^[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Thomas
Solution 2	Thi Hoang

'get value from attribute "pseudo-element" using Javascript

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]