javascript - 如何使用queryselector javascript查找特定数据集（data-*）的innerText或textContent？

Question

我不知道javascript，我在尝试一个项目时正在学习。

我在阅读textContent特定的dataset attribute.

例如<span data-field="member.firstName">JOHN</span>
，我需要阅读“member.firstname”，它应该返回“JOHN”

我正在创建书签，这似乎也限制了我的使用。我找到了涉及 jQuery 的答案，但我...... 不懂语法。湾。甚至不知道我是否可以在书签中使用它。

使用，除了在我的选择器中使用或参与使用queryselector之外，我得到的唯一结果。NULLUndefinednth-child[]

javascript:(function(){console.log(document.querySelector('#calldetails-tab-summary > div > div.d3ui-col-6.calldetails-tab-content-col1 > fieldset:nth-child(1) > div.d3ui-tab-content-widget-content-readonly > div:nth-child(1) > span:nth- child(2) > span'));})();

但是我正在查询的容器中的节点不是恒定的，并且此代码仅返回<span data-field="member.firstName">JOHN</span>

这个 html 片段应该适合作为独立的测试人员。

<div id="calldetails-tab-summary" class="d3ui-container ui-tabs-panel ui- 
widget-content ui-corner-bottom" data-tabkey="E1-SUMMARY">
<div class="d3ui-row">
<div class="d3ui-col-6 calldetails-tab-content-col1"><fieldset data- 
groupkey="E1-SUMMARY-MEMBER-SUMMARY" data-editable="true" class="d3ui-tab- 
content-widget " title="Member Summary">
<div class="d3ui-tab-content-widget-header">
<div class="d3ui-tab-content-widget-header-text ">Member Summary</div>
</div>
<div class="d3ui-tab-content-widget-content-readonly">
<div data-audit="" class="" data-fieldkey="memberName" title="Name">
<label>Name</label>
<span class="">
<span data-field="member.firstName">JOHN</span>
</span>
<span class="">
<span data-field="member.lastName">DOE</span>
</span>

标签： javascriptdatasetbookmarkletselectors-api

Answer 1

数据集 MDN

const el = document.querySelector('#firstname');
console.log(el.dataset.field)

<span id="firstname" data-field="member.firstName">JOHN</span>