不能 select HTML 元素与 Javascript

Question

     <body>
    <table id="table_x">
        <tbody>
            <tr>
                <td></td>                         
                <td>this box should be selected</td>
                <td></td>
                <td></td>
           </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
     </table>
  </body>

使用以下 javascript 代码，我想 select table 第一行中的第二个 "box"，id 为 "table_x"：

        var matrix = document.querySelector("#table_x");
        var row;
        var box;

        function select(x,y){
            row = matrix.childNodes[x];
            box = row.childNodes[y];
            return box;
        }

        var test = select(0,1);

然而，当我想在控制台中输出元素时（使用命令 console.log(test);），我只是返回 "undefined"。 html 元素的 selection 有什么问题？

Answer 1

DOM 元素可以同时包含元素节点和文本节点。

table_x 的第一个子节点是空白文本节点 – 不是 TBODY 元素。

要跳过文本节点并仅使用元素节点，请使用 children 而不是 childNodes。

function select(x, y) {
  row = matrix.children[x];
  box = row.children[y];
  return box;
}

Answer 2

在 html table 中选择内容时，您可以利用 table 和类似 [=13] 的特殊 rows 属性 =] 属性每行，

这是您函数的更新版本（添加了 id 参数）：

   function select(x, y, id) {
     var matrix = document.getElementById(id)
     var row = matrix.rows[x];
     var box = row.cells[y];
     return box;
   }

   var test = select(0, 1, 'table_x').style.color = 'red';

<table id="table_x">
  <tbody>
    <tr>
      <td></td>
      <td>this box should be selected</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Answer 3

我假设您正在尝试获取行 x，然后从中获取单元格 y。（我对行使用 y，对单元格使用 x，但您的代码似乎在做相反的事情。）

如果是这样，你不想使用childNodes，因为它不仅包括元素，还包括注释节点、文本节点等

另外，您需要确保 matrix 指的是 tbody 元素，而不是 table 元素..

那么你可以使用其中任何一个；请注意，其中一个甚至不需要 matrix 变量：

function select1(x, y) {
  return matrix.children[x].children[y];
}

function select2(x, y) {
  return matrix.rows[x].cells[y];
}

function select3(x, y) {
  var selector = "#table_x tr:nth-child(" + (x + 1) + ") > td:nth-child(" + (y + 1) + ")";
  return document.querySelector(selector);
}

所有三个示例：

var matrix = document.querySelector("#table_x tbody");

function select1(x, y) {
  return matrix.children[x].children[y];
}

function select2(x, y) {
  return matrix.rows[x].cells[y];
}

function select3(x, y) {
  var selector = "#table_x tr:nth-child(" + (x + 1) + ") > td:nth-child(" + (y + 1) + ")";
  return document.querySelector(selector);
}

select1(0, 0).style.color = "blue";
select2(1, 1).style.color = "green";
select3(2, 2).style.color = "red";

<table id="table_x">
  <tbody>
    <tr>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
    <tr>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
    <tr>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
    <tr>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
  </tbody>
</table>

Answer 4

不使用 childNodes，而是使用特定于表格的 rows 和 cells。您还可以使函数 smaller/faster 将 row 和 box 变量合并到 return.

var matrix = document.getElementById("table_x");

function select(x,y){
  return matrix.rows[x].cells[y];
}

var test = select(0,1);
console.log(test);

<body>
    <table id="table_x">
        <tbody>
            <tr>
                <td></td>                         
                <td>this box should be selected</td>
                <td></td>
                <td></td>
           </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
     </table>
  </body>

不能 select HTML 元素与 Javascript

Can't select HTML element with Javascript

javascript

html

dom

child-nodes