table元素引起的

来源:互联网 发布:手机编程工具 编辑:程序博客网 时间:2024/05/01 11:19

但是本文传达的意思和table无关,嘻嘻.....

要求:选择#table1下的两个子元素tr<table id="table1">    <tr>        <td>            <table id="table2">                <tr>行行1</tr>                <tr>行行2</tr>            </table>        </td>    </tr>    <tr>行2</tr></table>

第一次测试:document.querySelector("#table1 tr"),测试发现只能选择一个tr,不符合要求;

第二次测试:document.querySelectorAll("#table1 tr"),测试选择出四个tr,不符合要求,这是由于里面包含一个table导致。执行document.querySelectorAll("#table1 tbody"),里面有两个tbody(为什么里面会有tbody,自行谷歌关键词thead,tbody,tfoot);

第三次测试:document.querySelectorAll("#table1>tbody>tr")结果符合要求;

综上所述,那么问题来了。
querySelector()通过CSS的选择器只能选单一的元素(即使里面的选择器是*,也无法选择多个元素),选多个元素需要用querySelectorAll(),这个和Jqery是不一样的,不要混淆。
#table1>tbody里面>号可以筛选以#table1为父级的子元素,不加这个则返回内部所有,所以要熟记CSS选择器啊。

0 0
原创粉丝点击