Javascript（纯）选择第一个元素（表）
[英]Javascript (pure) select first element (table)
问题描述
我有两个这样的表：
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
他们都是一样的。 我必须使用纯javascript选择第一个（和第二个）。 在jQuery中它是$(table:first) 。
如果表是这样的（使用类），我可以使用getElementByClassName('class')[0]
<table class="class">
<tr>
<td></td>
<td></td>
</tr>
</table>
<table class="class">
<tr>
<td></td>
<td></td>
</tr>
</table>
11 个解决方案
解决方案1
8 2013-01-14 10:23:33
您可以使用：
var firstTable = document.getElementsByTagName("table")[0]
这是跨浏览器兼容的。
对于较新的浏览器，您可以使用：
var firstTable = document.querySelector("table")
这将选择第一个表。
解决方案2
5 已采纳 2013-01-14 10:18:42
您可以在document上使用.getElementsByTagName("table") ，它将返回包含文档中所有表的NodeList 。 NodeLists是类似于数组的对象，表的返回顺序与文档中的顺序相同，因此您可以使用其索引获取第一个元素。
var firstTable = document.getElementsByTagName("table")[0];
NodeLists是实时的
值得注意的是.getElementsByTagName()返回的NodeList是实时的 ，这意味着如果在调用.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
解决方案3
4 2013-01-14 10:18:14
您可以使用getElementsByTagName（）来获取表集合，并为第一个表使用0索引。
firstTable = document.getElementsByTagName('table')[0];
解决方案4
3 2013-01-14 10:18:26
getElementsByTagName [MDN]返回一个NodeList ，它是一个类似数组的对象。 元素按文档顺序返回。 您只需通过索引访问每个元素：
var tables = document.getElementsByTagName('table');
// first table: tables[0]
解决方案5
3 2013-01-14 10:18:30
您可以使用以下命令获取页面上的元素数组：
var tables= document.getElementsByTagName("table");
然后
tables[0]
会给你第一张桌子。
解决方案6
2 2013-01-14 10:25:08
在您的修改如下：
<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");
解决方案7
2 2013-01-14 10:29:56
您可以将此代码用于您的解决方案
<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>
解决方案8
2 2013-01-14 10:34:48
要按tag获取第一个表，您只需执行以下操作：
var first = document.getElementsByTagName("table")[0];
为了得到第一台class ，你可以简单地这样做：
var first = document.getElementsByClassName("class")[0];
解决方案9
1 2013-01-14 10:20:36
使用纯js，您可以使用不同的document.getelement命令获取元素。 你在这里寻找的是
document.getElementsByTagName("table")
这将返回一个数组，你可以从那里开始工作。
解决方案10
1 2013-01-14 10:20:58
您可以使用document.getElementsByTagName javascript调用。
对于您的HTML，如上所述：
var allTables = document.getElementsByTagName("table")
alert(allTables.length);
警告我2。
然后你可以访问allTables[0]等...
解决方案11
0 2019-09-11 07:58:02
还有一种方法可以做到这一点。
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获取第一个可见的body元素（在屏幕上）
[英]How to get first visible body element (on screen) with pure javascript
如何选择元素，将其包含在div中，然后使用纯JavaScript为其添加类？
[英]How to select element, enclose it in a div and add a class to it, in pure javascript?
如何使用纯 JavaScript 对网页上的每个元素进行 select
[英]How to select every element on a webpage using pure JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
纯 JavaScript 函数来选择所有元素
如何在纯 JavaScript 中将 select 嵌套元素？
如何使用纯 javascript 元素 select 元素？
如何使用纯JavaScript获取第一个可见的body元素（在屏幕上）
如何选择元素，将其包含在div中，然后使用纯JavaScript为其添加类？
在纯JavaScript中选择没有任何数据属性的元素
如何使用纯javascript选择嵌套的ul元素
使用纯 JavaScript 获取事件的选择元素值
如何使用纯 JavaScript 对网页上的每个元素进行 select
Javascript - 选择元素子元素的第一个元素
相关标签