1

我正在构建一个我想使用 DOM 探索的动态 html 表。这是表格的代码：

<table id='nameTable'>
  <col width='5%'/>
  <col width='40%'/>
  <col width='40%'/>
  <col width='5%'/>
  <tr>
    <th rowspan='1' colspan='1'>Modify:</th>
    <th colspan='2'>Name Set Title: <span id="setTitle"><?php echo $setTitle ?></span></th>
    <th rowspan='1' colspan='1'>Remove:</th>
  </tr>
  <tr>
    <th rowspan='1' colspan='1'><input type='checkbox' name='' value='' /> All</th>
    <th colspan='2'>Tags: <span id="tags"><?php
      foreach ($tagArray as $tag){
        echo $tag." ";
      }?></span>
    </th>
    <th rowspan='1' colspan='1'><input type='checkbox' name='' value='' /> All</th>
  </tr>
    <?php 
      foreach ($nameArray as $pair){
        echo
        "<tr>
          <td><input type='checkbox' name='' value=''/></td>
          <td>".$pair[0]."</td>
          <td>".$pair[1]."</td>
          <td><input type='checkbox' name='' value=''/></td>
        </tr>";
      }
    ?>
</table>

在上面，$nameArray是一个数组数组，每个子数组包括一个名字和一个姓氏。

我正在尝试使用 DOM 访问 HTML 表的各种元素。我在我的页面中建立了一个<p id='test'></p>测试区域，我可以在其中看到各种 DOM 语句的含义，例如通过执行document.getElementById('test').innerHTML=document.getElementById('nameTable').childNodes[2].childNodes[1].innerHTML;

我无法将childNodes. 进一步来说：

  • getElementById('nameTable').childNodes[2].childNodes[0]是[object HTMLTableRowElement]，我可以用 得到值innerHTML。包含表格的标题等。
  • childNodes[2].childNodes[2]也是[object HTMLTableRowElement]对应于我表的第二行的。
  • 这两者之间是childNodes[2].childNodes[1]，这是一个[object Text]。正如预期的那样，它nodeName是。#text但是，它nodeValue是空白的。我不明白该节点包含什么或如何访问它的值。
4

1 回答 1

3

  • 首先，避免使用innerHTMLlike that。如果需要，您可以克隆 DOM 元素。

  • 其次，您的表格缺少<tbody>，这意味着浏览器将为您插入它，从而使您的嵌套.childNodes不准确。

  • 第三，是的，会有你可能没想到的文本节点。页面中的所有内容都表示为一个节点，因此您需要处理表示您的空白格式的节点。

  • 最后，表格元素很容易导航，因为它们有自己的自定义集合，所以使用它们而不是.childNodes. 这也解决了文本节点的情况。

    table.rows[]        // collection of rows in the table

table.tBodies[]     // collection of tbody elements in the table

table.tBodies[0].rows[]           // collection of rows in the first tbody

table.tBodies[0].rows[0].cells[]  // collection of cells in the first row
                                  //                     in the first tbody

table.tHead         // thead element
table.tHead.rows... // as above

table.tFoot         // tfoot element
table.tFoot.rows... // as above
于 2013-03-14T23:06:10.537 回答