Example:

<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>

How can i get the element Col 1 with querySelector?

Example:

<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>

How can i get the element Col 1 with querySelector?

• javascript
• html
• css
• css-selectors

• 1 you can not put tow classes attribute in one tag – לבני מלכה Commented May 16, 2018 at 11:17
• All of those links only have one class, toggle-vis. You can not repeat HTML attributes on an element! – C3roe Commented May 16, 2018 at 11:18
• I forgot that that, thanks – user9324524 Commented May 16, 2018 at 11:30

3 Answers 3

If you need the Col 1, you should use:

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

But you should not duplicate the class attribute. Use the classes as given below:

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>

DO NOT put tow classes attribute in one tag
Learn about class attribute here:https://www.w3schools./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>

You can use the .innerText() method to access the value of the col.

You've made a mistake specifying twice the keyword class=""

Look at the following snippet :

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>