查询选择器具有父ID和子类混合

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>

如何使用querySelector获取元素Col 1？

Answer 1

如果您需要Col 1，则应使用：

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

但是你应该不重复 class属性。使用下面给出的类：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

不要将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 3

您可以使用.innerText()方法访问col。

的值

您指定两次关键字class=""

时出错了

请看下面的代码：

＆＃13;

＆＃13;

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

console.log(col2);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;