使用 Javascript 从属性 "pseudo-element" 获取值

get value from attribute "pseudo-element" using Javascript

我得到了 DOM 元素,其中有许多 Div 标签,没有任何 class 或 ID。 我想要的只是使用 Javascript(没有 JQuery 或任何其他库)从 div 属性“data-as-pseudo-element”获取值。

结果应该是:

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>
  
  

提前致谢!

使用 querySelectorAll 查找元素并使用 dataset 提取值很容易:

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>

谢谢 Thomas 的解决方案。我不知道为什么,您的代码在我的测试页面上运行良好,但 return 在实际页面上未定义(Skype 调用网络版本)。

我想到了另一种方法:

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>