Question

我不懂javascript，尝试项目时正在学习。

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

例如<span data-field="member.firstName">JOHN</span>
我需要阅读“ member.firstname”，它应该返回“ 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'));})();

但是节点在我查询的容器中不是恒定的，此代码仅返回<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);

链接到小提琴（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？

3 个答案: