CODEWITHSUNDEEP
javascriptsimple-html-dom
Thi Hoang
Thi Hoang

Reputation: 87

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!

Upvotes: 0

Views: 95

Answers (2)

Thi Hoang
Thi Hoang

Reputation: 87

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>

Upvotes: 0

Thomas
Thomas

Reputation: 182000

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>

Upvotes: 1

Related Questions