使用 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>
我得到了 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>