当前位置: 首页 > Web前端 > CSS

DOM操作小波:querySelectorAll和classList

时间:2023-03-31 02:11:05 CSS

虽然MVVM框架带来了很多便利,但是你真的不再需要操作DOM了吗?本文通过几个小例子来介绍DOM操作的一些技巧场景一:querySelectorAll陆小吉最近遇到了这样一个问题。他引用了第三方表格组件。他引入组件的代码如下:组件的渲染结构大致如下:

为了获取tbody的dom节点,他写了如下代码:varel=document.getElementsByClassName('table-tbody')[0]console.log(el)控制台打印出来,发现不对。原来这个页面还引入了一个表格,这样得到的是页面上的第一个表格,而不是这个表格。于是,他改进了如下代码:varmytable=document.getElementById('mytable')varel=mytable.getElementsByClassName('table-tbody')[0]这下终于正确了。不过,善于思考的小季又想了想。如果关卡再复杂一点,写起来岂不是很麻烦?它可以像css选择器一样选择DOM节点吗?最后,他写了如下代码:varel=document.querySelectorAll('#mytabletbody')[0]也许有人会说,jQuery不就是通过CSS选择器查询DOM文档,获取元素引用吗?这是正确的!但是通过querySelectorAll方法,也可以原生完成。注意:还有一个类似的方法querySelector(),它接收与querySelectorAll()方法相同的参数,它是一个CSS选择器,但返回一个元素而不是所有匹配的元素(NodeList的一个实例)。场景二:classList张大鹏最近遇到这样一个问题,他需要在表中找到每一行的序号,并存储到ids数组中,其中序号已经写入了每一行的类名,如下:
td1
td4
td2
td3
他想了想,写了如下代码:varel=document.querySelectorAll('.table-tbody')[0]varrows=el.rowsvarids=[]for(vari=0;i