querySelector（）不适用于所有类

Question

我的第一列应该是实际日期，但我的js脚本仅适用于我的html代码中的一个类。

问题：如何使我的js代码适用于html代码中的每个类，我使用querySelector()，但我应该使用像$（this）这样的东西，但我不知道如何。

var time = document.querySelector(".table_si_cell_stat-date");

time.innerHTML =new Date().toLocaleDateString([], {year:'numeric', month: 'long', day:'numeric', hour:'2-digit', minute:'2-digit'})

table thead th
{
	height:30px;
	padding:5px 0 5px 0;
}
table thead tr th:nth-child(1)
{
	width:200px;
}
table thead tr th:nth-child(2)
{
	width:150px;
}
table thead tr th:nth-child(3)
{
	padding-left:10px;
	padding-right:10px;
}
table tbody tr
{
	border-bottom:1px solid #bbb;

}
table thead tr
{
	border-bottom:1px solid #bbb;
	background-color:#ddd;
}
.table_si_cell_stat-date
{
	text-align:center;
}
.table_si_cell_stat-date-link
{
	text-align:center;
}
.table_si_cell_stat-date-user
{
	text-align:center;
	padding-left:20px;
	padding-right:20px;	
}
table
{
	border-collapse:collapse;
	font-family:Arial;
	font-size:14px;
	cursor:default;
	margin-top:10px;
	background-color:#fff;
	border:1px solid #ddd;
}
table a
{
	text-decoration:none;
	color:#08c;
}
table a:hover
{
	color:#05c;
}

<table>
  <thead>
	<tr>
	  <th>Date</th>
	  <th>Link</th>
	  <th>Users</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <td class="table_si_cell_stat-date"></td>
	  <td class="table_si_cell_stat-date-link">
		<a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
	  </td>
	  <td class="table_si_cell_stat-date-user">
	    <a href="#">John B.</a>
	  </td>
	</tr>
	<tr>
	  <td class="table_si_cell_stat-date"></td>
	  <td class="table_si_cell_stat-date-link">
	    <a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
	  </td>
	  <td class="table_si_cell_stat-date-user">
	    <a href="#">John B.</a>
	  </td>
	</tr>
  </tbody>
</table>

Answer 1

如果你的意思是没有找到该课程的所有元素，那是因为那不是它的工作。 querySelector找到第一个匹配元素。如果您需要列表，则需要querySelectorAll。

＆＃13;

＆＃13;

var times = document.querySelectorAll(".table_si_cell_stat-date");

for (var t of times) {
  t.textContent = new Date().toLocaleDateString([], {
    year:'numeric',
    month: 'long',
    day:'numeric',
    hour:'2-digit',
    minute:'2-digit'
  });
}

＆＃13;

<table>
  <thead>
	<tr>
	  <th>Date</th>
	  <th>Link</th>
	  <th>Users</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <td class="table_si_cell_stat-date"></td>
	  <td class="table_si_cell_stat-date-link">
		<a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
	  </td>
	  <td class="table_si_cell_stat-date-user">
	    <a href="#">John B.</a>
	  </td>
	</tr>
	<tr>
	  <td class="table_si_cell_stat-date"></td>
	  <td class="table_si_cell_stat-date-link">
	    <a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
	  </td>
	  <td class="table_si_cell_stat-date-user">
	    <a href="#">John B.</a>
	  </td>
	</tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

注意：for-of循环非常新，是ES2015（又名＆＃34; ES6＆＃34;）及以上版本的一项功能。如果您正在编码到ES2015之前的环境，您可以使用简单的for循环或任何类似数组的＆＃34;循环遍历列表。 this answer中的建议。

Answer 2

您需要使用document.querySelectorAll()，它会返回一个元素列表，您可以迭代并设置内部HTML。

var times = document.querySelectorAll(".table_si_cell_stat-date");
var text = .....
times.forEach((x) => x.innerHTML = text);

＆＃13;

＆＃13;

var times = document.querySelectorAll(".table_si_cell_stat-date");
var text = new Date().toLocaleDateString([], {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit'
});

times.forEach((x) => x.innerHTML = text);

＆＃13;

table thead th {
  height: 30px;
  padding: 5px 0 5px 0;
}
table thead tr th:nth-child(1) {
  width: 200px;
}
table thead tr th:nth-child(2) {
  width: 150px;
}
table thead tr th:nth-child(3) {
  padding-left: 10px;
  padding-right: 10px;
}
table tbody tr {
  border-bottom: 1px solid #bbb;
}
table thead tr {
  border-bottom: 1px solid #bbb;
  background-color: #ddd;
}
.table_si_cell_stat-date {
  text-align: center;
}
.table_si_cell_stat-date-link {
  text-align: center;
}
.table_si_cell_stat-date-user {
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}
table {
  border-collapse: collapse;
  font-family: Arial;
  font-size: 14px;
  cursor: default;
  margin-top: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}
table a {
  text-decoration: none;
  color: #08c;
}
table a:hover {
  color: #05c;
}

＆＃13;

<table>
  <thead>
    <tr>
      <th>Date</th>
      <th>Link</th>
      <th>Users</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="table_si_cell_stat-date"></td>
      <td class="table_si_cell_stat-date-link">
        <a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
      </td>
      <td class="table_si_cell_stat-date-user">
        <a href="#">John B.</a>
      </td>
    </tr>
    <tr>
      <td class="table_si_cell_stat-date"></td>
      <td class="table_si_cell_stat-date-link">
        <a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
      </td>
      <td class="table_si_cell_stat-date-user">
        <a href="#">John B.</a>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

querySelector方法只选择一个元素，以获取元素使用querySelectorAll方法的集合，并迭代它们以更新内容。

var date = new Date().toLocaleDateString([], {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit'
});

var time = document.querySelectorAll(".table_si_cell_stat-date");

// for older browser use [].slice.call(time)    
Array.from(time).forEach(function(ele) {
  ele.innerHTML = date;
})

var date = new Date().toLocaleDateString([], {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit'
});
var time = document.querySelectorAll(".table_si_cell_stat-date");

Array.from(time).forEach(function(ele) {
  ele.innerHTML = date;
})

table thead th {
  height: 30px;
  padding: 5px 0 5px 0;
}
table thead tr th:nth-child(1) {
  width: 200px;
}
table thead tr th:nth-child(2) {
  width: 150px;
}
table thead tr th:nth-child(3) {
  padding-left: 10px;
  padding-right: 10px;
}
table tbody tr {
  border-bottom: 1px solid #bbb;
}
table thead tr {
  border-bottom: 1px solid #bbb;
  background-color: #ddd;
}
.table_si_cell_stat-date {
  text-align: center;
}
.table_si_cell_stat-date-link {
  text-align: center;
}
.table_si_cell_stat-date-user {
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}
table {
  border-collapse: collapse;
  font-family: Arial;
  font-size: 14px;
  cursor: default;
  margin-top: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}
table a {
  text-decoration: none;
  color: #08c;
}
table a:hover {
  color: #05c;
}

<table>
  <thead>
    <tr>
      <th>Date</th>
      <th>Link</th>
      <th>Users</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="table_si_cell_stat-date"></td>
      <td class="table_si_cell_stat-date-link">
        <a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
      </td>
      <td class="table_si_cell_stat-date-user">
        <a href="#">John B.</a>
      </td>
    </tr>
    <tr>
      <td class="table_si_cell_stat-date"></td>
      <td class="table_si_cell_stat-date-link">
        <a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
      </td>
      <td class="table_si_cell_stat-date-user">
        <a href="#">John B.</a>
      </td>
    </tr>
  </tbody>
</table>