资讯专栏INFORMATION COLUMN

table元素引起的

binta / 2167人阅读

摘要:通过的选择器只能选单一的元素即使里面的选择器是,也无法选择多个元素,选多个元素需要用这个和是不一样的,不要混淆。里面号可以筛选以为父级的子元素不加这个则返回内部所有,所以要熟记选择器啊。

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

要求:选择#table1下的两个子元素tr



行2
行行1行行2

第一次测试: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://www.ucloud.cn/yun/92319.html

相关文章

  • 深入理解css之BFC

    摘要:属性,会破坏文档流,与非定位元素很难结合起来用,因此也不适合自适应布局。,其对无感,无法自适应剩余浏览器空间。总结的定义,就如同结界一样,完全封闭对外无任何影响。引起的各种属性与自适应布局自适应布局与属性说明 BFC的定义 BFC的全称是block formatting context(块状格式化上下文),当BFC起作用的时候,其元素内部无论怎么翻江倒海都不会影响到外部元素,同样,外部...

    姘搁『 评论0 收藏0
  • 前端常见知识点汇总(面试)-HTML和CSS部分

    摘要:一内联元素与行元素的区别内联元素即行内元素。绝对定位,相对于定位以外的第一个父元素进行定位,元素脱离文档流。 一、内联元素与行元素的区别 1、内联元素即行内元素。2、内联元素,在文档流中挤在一行;不能设置宽高(即,即使设置了也不管用,例如a标签)、margin和padding的top和bottom 块元素,独占一行;可以设置宽高、margin、padding3、可以使用displa...

    DevTTL 评论0 收藏0
  • 前端常见知识点汇总(面试)-HTML和CSS部分

    摘要:一内联元素与行元素的区别内联元素即行内元素。绝对定位,相对于定位以外的第一个父元素进行定位,元素脱离文档流。 一、内联元素与行元素的区别 1、内联元素即行内元素。2、内联元素,在文档流中挤在一行;不能设置宽高(即,即使设置了也不管用,例如a标签)、margin和padding的top和bottom 块元素,独占一行;可以设置宽高、margin、padding3、可以使用displa...

    wuyangnju 评论0 收藏0
  • 借助performance工具直观理解浏览器渲染过程

    前言 在学习前端的过程中,大家都会对浏览器这个神秘的盒子感到好奇从输入一串url到页面解析渲染完成,浏览器都干了些啥? 直观展示 为了更好的理解这个过程,我们使用一个工具来帮助我们Chrome自带的开发工具中的performance(老版本和其他浏览器为timeline) showImg(https://segmentfault.com/img/bVbswbe?w=1338&h=920); 点击录...

    GT 评论0 收藏0
  • 借助performance工具直观理解浏览器渲染过程

    前言 在学习前端的过程中,大家都会对浏览器这个神秘的盒子感到好奇从输入一串url到页面解析渲染完成,浏览器都干了些啥? 直观展示 为了更好的理解这个过程,我们使用一个工具来帮助我们Chrome自带的开发工具中的performance(老版本和其他浏览器为timeline) showImg(https://segmentfault.com/img/bVbswbe?w=1338&h=920); 点击录...

    Pikachu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<