table元素引起的

2019年8月28日 148次阅读 来源: 代码碎片

但是本文传达的意思和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选择器啊。

    原文作者：代码碎片
    原文地址: https://segmentfault.com/a/1190000000725806
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞