Селектор запросов для элемента со смешанным родительским идентификатором и дочерним классом

Question

Пример:

<div id="dataTableColToggler">
<a class="toggle-vis col0" data-column="0" >Col 0</a> - 
<a class="toggle-vis col1" data-column="1" >Col 1</a> - 
<a class="toggle-vis col2" data-column="2" >Col 2</a>
</div>

Как получить элемент Col 1 с querySelector?

Answer 1

НЕ положить буксировку classes attribute в один tag
Узнайте о классе attribute здесь: https://www.w3schools.com/tags/att_global_class.asp

var col2 = document.querySelector("#dataTableColToggler .col2");
console.log(col2);

<div id="dataTableColToggler">
<a class="toggle-vis col0" data-column="0">Col 0</a> - 
<a class="toggle-vis col1" data-column="1">Col 1</a> - 
<a class="toggle-vis col2" data-column="2">Col 2</a>
</div>

Answer 2

Вы можете использовать метод .innerText () для доступа к значению столбца.

Вы сделали ошибку, указав дважды ключевое слово class=""

---

Посмотрите на следующий фрагмент:

var col2 = document.querySelector("#dataTableColToggler .col2").innerText;

console.log(col2);

<div id="dataTableColToggler">
  <a data-column="0" class="toggle-vis col0">Col 0</a> -
  <a data-column="1" class="toggle-vis col1">Col 1</a> -
  <a data-column="2" class="toggle-vis col2">Col 2</a>
</div>

Answer 3

Если вам нужен Col 1, вы должны использовать:

var col2 = document.querySelector("#dataTableColToggler .col1");

Но вы должны не дублировать атрибут class.Используйте классы, как указано ниже:

var col2 = document.querySelector("#dataTableColToggler .col1");
console.log(col2.innerHTML);

<div id="dataTableColToggler">
  <a class="toggle-vis col0" data-column="0">Col 0</a> -
  <a class="toggle-vis col1" data-column="1">Col 1</a> -
  <a class="toggle-vis col2" data-column="2">Col 2</a>
</div>