Question

我有两张这样的表

<table> 
    <tr>
         <td></td>
         <td></td>
    </tr>
</table>
<table> 
    <tr>
         <td></td>
         <td></td>
    </tr>
</table>

他们都是一样的。我必须使用纯javascript选择第一个（和第二个）。在jQuery中它是$(table:first)。

我需要纯粹的javascript

修改的在询问时错过了一些东西。

如果表格是这样的（带有类），我可以使用getElementByClassName('class')[0]

<table class="class"> 
        <tr>
             <td></td>
             <td></td>
        </tr>
    </table>
    <table class="class"> 
        <tr>
             <td></td>
             <td></td>
        </tr>
    </table>

Answer 1

您可以使用：

var firstTable = document.getElementsByTagName("table")[0]

是跨浏览器兼容的。

对于较新的浏览器，您可以使用：

var firstTable = document.querySelector("table")

将选择第一个表。

Answer 2

您可以在document上使用.getElementsByTagName("table")，这将返回包含文档中所有表格的NodeList。 NodeLists是类似于数组的对象，表的返回顺序与它们在文档中的顺序相同，因此您可以使用其索引获取第一个元素。

var firstTable = document.getElementsByTagName("table")[0];

NodeLists live

值得注意的是NodeList返回的.getElementsByTagName() live ，这意味着如果您在致电.getElementsByTagName()后进行DOM操作，那些操作将反映在您的列表中。

var tables = document.getElementsByTagName("table");
var firstTableBefore = tables[0];

/*
If you then prepend a new table to the body at this point, calling tables[0] 
again will now return the newly added element
*/

var firstTableAfter = tables[0];

// firstTableBefore and firstTableAfter will NOT be the same

Answer 3

您可以使用getElementsByTagName()获取表集合，并为第一个表使用0索引。

firstTable = document.getElementsByTagName('table')[0];

Answer 4

getElementsByTagName ^[MDN]返回NodeList，这是一个类似于数组的对象。元素按文档顺序返回。您只需通过索引访问每个元素：

var tables = document.getElementsByTagName('table');
// first table: tables[0]

Answer 5

您可以使用以下命令获取网页上的元素数组：

var tables= document.getElementsByTagName("table");

然后

tables[0]

会给你第一张表。

Answer 6

在您的修改中如下：

<table id="first">
  <tr>
     <td></td>
     <td></td>
  </tr>
</table>

<table id="second">
  <tr>
     <td></td>
     <td></td>
  </tr>
</table>

在你的js代码中：

var table1=document.getElementByID("first");

Answer 7

您可以将此代码用于您的解决方案

<html> 
 <head><title>hello</title>
 </head>
 <body>

     <table> 
        <tr>
             <td>click first td(table1)</td></br>
             <td>click second td(table1)</td></br>
        </tr>
    </table>
    <table> 
        <tr>
             <td>first td(table2)</td></br>
             <td>second td(table2)</td></br>
        </tr>
    </table>
    <script>
            var firstTable = document.getElementsByTagName("table")[0];
            //alert(firstTable)

                cells = firstTable.getElementsByTagName('td');

                for (var i=0,len=cells.length; i<len; i++){
                    cells[i].onclick = function(){
                        alert(this.innerHTML);
                    }
                }
    </script>
 </body>
</html>

Answer 8

要按tag获取第一个表格，您只需执行以下操作：

var first = document.getElementsByTagName("table")[0];

要按class获取第一个表格，您只需执行以下操作：

var first = document.getElementsByClassName("class")[0];

FIDDLE

Answer 9

使用纯js，您可以使用不同的document.getelement命令获取元素。您在这里寻找的是

document.getElementsByTagName("table")

这将返回一个数组，你可以从那里开始工作。

Answer 10

您可以使用document.getElementsByTagName javascript电话。

对于您的HTML，如上所述：

var allTables = document.getElementsByTagName("table")
alert(allTables.length);

警告我2.

然后您可以访问allTables[0]等...

Answer 11

另一种相同的方法。

let firstTable = document.querySelectorAll("table")[0];
let secondTable = document.querySelectorAll("table")[1];

<table>
  <tr>
    <td>first td(table1)</td>
    <td>second td(table1)</td>
  </tr>
</table>
<table>
  <tr>
    <td>first td(table2)</td>
    <td>second td(table2)</td>
  </tr>
</table>

Javascript（纯）选择第一个元素（表）

11 个答案: