Как найти innerText или textContent определенного набора данных (data- *), используя javascript queryselector? - PullRequest
Новая
       11

Как найти innerText или textContent определенного набора данных (data- *), используя javascript queryselector?

0 голосов
/ 22 января 2019

Я не знаю javascript, я учусь, когда пытаюсь выполнить проект.

У меня проблемы с чтением textContent с определенного dataset attribute.

, например, <span data-field="member.firstName">JOHN</span>
Мне нужно прочитать 'member.firstname', которое должно возвращать "JOHN"

Я создаю букмарклеты, которые также ограничивают мое использование.Я нашел ответы, связанные с JQuery, но я ... а.Не понимаю синтаксис.б.Даже не знаю, смогу ли я использовать его в букмарклетах.

Используя 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>

Ответы [ 3 ]

0 голосов
/ 22 января 2019

Попробуйте это: 

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

Ссылка на скрипку (ES6): https://jsfiddle.net/hcrov42e/

0 голосов
/ 22 января 2019

Вы можете попробовать это 

  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/

0 голосов
/ 22 января 2019

Набор данных MDN 

const el = document.querySelector('#firstname');
console.log(el.dataset.field)
<span id="firstname" data-field="member.firstName">JOHN</span>
...