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

Question

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

我无法从特定的 dataset attribute 读取 textContent。

例如<span data-field="member.firstName">JOHN</span>
我需要阅读 'member.firstname'，应该 return "JOHN"

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

使用 queryselector，除了 NULL 或 Undefined，我得到的唯一结果涉及在我的选择器中使用 nth-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'));})();

但是我正在查询的容器中的节点不是常量，此代码仅 returns <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>

Answer 1

Dataset MDN

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

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

Answer 2

试试这个：

alert(document.querySelectorAll("[data-field='member.firstName']")[0].innerText);

Link 到 fiddle (ES6)：https://jsfiddle.net/hcrov42e/

Answer 3

你可以试试这个

  var firstNameSpan = document.querySelector("[data-field~='member.firstName']");

  var lastNameSpan = document.querySelector("[data-field~='member.lastName']");

 console.log(firstNameSpan.innerHTML);  // this will be John
 console.log(lastNameSpan.innerHTML);  // this will be Doe

对于工作示例，检查这个 JSFiddle：http://jsfiddle.net/c_Dhananjay/crmpLj62/

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

How to find innerText or textContent of a specific dataset (data-*) using queryselector javascript?

javascript

bookmarklet

dataset

selectors-api