一小波DOM骚操作：querySelectorAll和classList

KnewOne 发布于2019-08-02 12:09 / 1741人阅读

摘要：注意还有一个类似的方法，其接收的参数与方法一样，都是一个选择符，但返回的是一个元素而不是所有匹配的元素一个的实例。表示列表中是否存在给定的值，如果存在则返回，否则返回。

虽然现在MVVM框架带来了诸多便利，但你真的就不再需要操作DOM了吗？本文通过几个小例子来介绍一些DOM操作的小技巧

场景一：querySelectorAll

陆小鸡最近遇到了这样一个问题，他引用了一个第三方的表格组件，他引入组件的代码如下：

组件渲染后的结构大致如下：

为了获取tbody这个dom节点，他写下了如下代码：

var el = document.getElementsByClassName("table-tbody")[0]
console.log(el)

控制台打印一看，发现有点不对啊，原来这个页面中还引入了一个表格，这种方式得到的是页面中的第一个表格，并不是这个表格。所以，他改进了下代码：

var mytable = document.getElementById("mytable")
var el = mytable.getElementsByClassName("table-tbody")[0]

这下终于正确了。但是，善于思考的小鸡同学又想了想，如果层级更复杂，那写起来不是很麻烦吗？能不能像css选择器一样选择DOM节点呢？最终，他写下了如下代码：

var el = document.querySelectorAll("#mytable tbody")[0]

有人可能会说，jQuery不就是通过CSS选择符查询DOM文档取得元素的引用吗？没错！但通过querySelectorAll方法，原生也可以做到。
注意：还有一个类似的方法querySelector()，其接收的参数与 querySelectorAll()方法一样，都是一个 CSS 选择符，但返回的是一个元素而不是所有匹配的元素（一个 NodeList 的实例）。

场景二：classList

张大鹏最近遇到了这样一个问题，需要找到表格中各行的序列号，将其存入ids数组中，其中的序列号已经写入到每行的class类名中，如下：

他略加思索，写出了如下代码：

var el = document.querySelectorAll(".table-tbody")[0]
var rows = el.rows
var ids = []
for (var i = 0; i < rows.length; i++) {
  let classNames = rows[i].className
  ids.push(classNames.split(" ")[1])
}
console.log(ids)

看上去是不错啊，但是感觉获取类名有点麻烦，并且还得进行一次类型转换才能取到序列号，能不能一步到位呢？
通过查阅，他写出了如下代码：

var el = document.querySelectorAll(".table-tbody")[0]
var rows = el.rows
var ids = []
for (var i = 0; i < rows.length; i++) {
  ids.push(rows[i].classList[1])
}
console.log(ids)

HTML5 新增了一种操作类名的方式，可以让操作更简单也更安全，那就是为所有元素添加classList 属性。这个新类型还定义如下方法：

add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。

contains(value)：表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。

remove(value)：从列表中删除给定的字符串。

toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

GPU云服务器云服务器 Dom操作 dom对象操作 DOM交互操作 PHP操作DOM

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53373.html

一小波DOM骚操作：querySelectorAll和classList

摘要：注意还有一个类似的方法，其接收的参数与方法一样，都是一个选择符，但返回的是一个元素而不是所有匹配的元素一个的实例。表示列表中是否存在给定的值，如果存在则返回，否则返回。虽然现在MVVM框架带来了诸多便利，但你真的就不再需要操作DOM了吗？本文通过几个小例子来介绍一些DOM操作的小技巧场景一：querySelectorAll 陆小鸡最近遇到了这样一个问题，他引用了一个第三方的表格组件...

jcc 2019-08-23 13:50 评论0 收藏0
一小波DOM骚操作：querySelectorAll和classList

摘要：注意还有一个类似的方法，其接收的参数与方法一样，都是一个选择符，但返回的是一个元素而不是所有匹配的元素一个的实例。表示列表中是否存在给定的值，如果存在则返回，否则返回。虽然现在MVVM框架带来了诸多便利，但你真的就不再需要操作DOM了吗？本文通过几个小例子来介绍一些DOM操作的小技巧场景一：querySelectorAll 陆小鸡最近遇到了这样一个问题，他引用了一个第三方的表格组件...

ZoomQuiet 2019-08-29 17:26 评论0 收藏0
[译] 咋才能忘掉jQuery然后用原生的js apis 呢

摘要：原文地址已经准备好了，可能你还没有准备好拥抱它。那为啥不用呢。。浏览这些轻量的找一个服务于你特殊需求的，但是首先你必须确信一点原生的足够满足你实现你的需求原文地址 javascript已经准备好了，可能你还没有准备好拥抱它。那为啥不用jquery呢。。因为它慢啊。而且体积还不小，你的网站可能真的不是特别需要， Select elements // jQuery var els = $...

rose 2019-08-22 10:58 评论0 收藏0
基于ES6的tinyJquery

摘要：但它操作的便利性无出其右。我用写了一个基于简化版的，仅做个学习记录。包含基础操作，支持链式操作，仅供日常使用。功能基于基本选择器构造，包括基于原生构造，将原生对象转化为对象。为支持批量操作，构造器应包含复数的。原文地址：Bougie的博客showImg(https://segmentfault.com/img/bV71uK?w=500&h=260);jQuery作为曾经Web前端的必...

U2FsdGVkX1x 2019-08-30 14:23 评论0 收藏0
基于ES6的tinyJquery

摘要：但它操作的便利性无出其右。我用写了一个基于简化版的，仅做个学习记录。包含基础操作，支持链式操作，仅供日常使用。功能基于基本选择器构造，包括基于原生构造，将原生对象转化为对象。为支持批量操作，构造器应包含复数的。原文地址：Bougie的博客showImg(https://segmentfault.com/img/bV71uK?w=500&h=260);jQuery作为曾经Web前端的必...

FrozenMap 2019-08-02 10:08 评论0 收藏0