Specific multiple tagnames, e.g: col[1], col[2], col[4] and col[5] by variable into querySelectorAll

My purpose is I want to catch some tagNames was same at once call, like “document.getElementsByTagName(‘td’)” which is what I want more be specific them by numbering at “[1], [2], [4] and [5]”. And implementing these into “querySelectorAll”. Can I do this ?

Here’s my tries or attemp at the down below just for an example of my some achievements which is have no some goals where’s the problems with the result got it nothing with the error alert it shows “Uncaught TypeError: Cannot read property ‘replace’ of undefined”.

JS Basics.

function hide() {
  var col = document.getElementsByTagName('td'),
      col0 = col[1],
      col1 = col[2],
      col2 = col[4],
      col3 = col[5],
      col2n3 = col0.className && col1.className,
      colShw = document.querySelectorAll('td:not(active)').length,
      colHde = document.querySelectorAll("col0, col1, col2, col3");

  if (!col2n3) {
    for (var i=0; i<colShw ; i++) {
      col[i].className += 'active';
    };
  } else {
    colHde.className = colHde.className.replace('active', '');
  }
}

CSS

table {
  border-collapse: collapse;
}
tr {
  background: #eee;
  border-bottom: 1px solid #fff;
}
tr, td {
  padding: 0;
}
tr td div {
  max-width: 80px;
  padding: 0 5px 0 5px;
  box-sizing: border-box;
  overflow: hidden;
  transition: max-width 0.3s, padding 0.3s;
}
tr td.active div {
  max-width: 0;
  padding: 0;
  transition: max-width 0.6s, padding 0.6s;
}

HTML

<button type="button" onclick="hide();">Hide/Show Toggle</button>
<table>
  <tbody>
    <tr class="active">
      <td class="active"><div>Row 1</div></td>
      <td><div>...</div></td>
      <td><div>...</div></td>
    </tr>
    <tr class="active">
      <td class="active"><div>Row 2</div></td>
      <td><div>...</div></td>
      <td><div>...</div></td>
    </tr>
  </tbody>
</table>