資訊專(zhuān)欄INFORMATION COLUMN
摘要：注意還有一個(gè)類(lèi)似的方法，其接收的參數(shù)與方法一樣，都是一個(gè)選擇符，但返回的是一個(gè)元素而不是所有匹配的元素一個(gè)的實(shí)例。表示列表中是否存在給定的值，如果存在則返回，否則返回。
雖然現(xiàn)在MVVM框架帶來(lái)了諸多便利，但你真的就不再需要操作DOM了嗎？本文通過(guò)幾個(gè)小例子來(lái)介紹一些DOM操作的小技巧場(chǎng)景一：querySelectorAll
陸小雞最近遇到了這樣一個(gè)問(wèn)題，他引用了一個(gè)第三方的表格組件，他引入組件的代碼如下：
組件渲染后的結(jié)構(gòu)大致如下：
為了獲取tbody這個(gè)dom節(jié)點(diǎn)，他寫(xiě)下了如下代碼：
var el = document.getElementsByClassName("table-tbody")[0]
console.log(el)
控制臺(tái)打印一看，發(fā)現(xiàn)有點(diǎn)不對(duì)啊，原來(lái)這個(gè)頁(yè)面中還引入了一個(gè)表格，這種方式得到的是頁(yè)面中的第一個(gè)表格，并不是這個(gè)表格。所以，他改進(jìn)了下代碼：
var mytable = document.getElementById("mytable")
var el = mytable.getElementsByClassName("table-tbody")[0]
這下終于正確了。但是，善于思考的小雞同學(xué)又想了想，如果層級(jí)更復(fù)雜，那寫(xiě)起來(lái)不是很麻煩嗎？能不能像css選擇器一樣選擇DOM節(jié)點(diǎn)呢？最終，他寫(xiě)下了如下代碼：
var el = document.querySelectorAll("#mytable tbody")[0]
有人可能會(huì)說(shuō)，jQuery不就是通過(guò)CSS選擇符查詢DOM文檔取得元素的引用嗎？沒(méi)錯(cuò)！但通過(guò)querySelectorAll方法，原生也可以做到。
注意：還有一個(gè)類(lèi)似的方法querySelector()，其接收的參數(shù)與 querySelectorAll()方法一樣，都是一個(gè) CSS 選擇符，但返回的是一個(gè)元素而不是所有匹配的元素（一個(gè) NodeList 的實(shí)例）。
張大鵬最近遇到了這樣一個(gè)問(wèn)題，需要找到表格中各行的序列號(hào)，將其存入ids數(shù)組中，其中的序列號(hào)已經(jīng)寫(xiě)入到每行的class類(lèi)名中，如下：
| td1 |
| td4 |
| td2 |
| td3 |
他略加思索，寫(xiě)出了如下代碼：
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)
看上去是不錯(cuò)啊，但是感覺(jué)獲取類(lèi)名有點(diǎn)麻煩，并且還得進(jìn)行一次類(lèi)型轉(zhuǎn)換才能取到序列號(hào)，能不能一步到位呢？
通過(guò)查閱，他寫(xiě)出了如下代碼：
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 新增了一種操作類(lèi)名的方式，可以讓操作更簡(jiǎn)單也更安全，那就是為所有元素添加classList 屬性。這個(gè)新類(lèi)型還定義如下方法：
add(value)：將給定的字符串值添加到列表中。如果值已經(jīng)存在，就不添加了。
contains(value)：表示列表中是否存在給定的值，如果存在則返回 true，否則返回 false。
remove(value)：從列表中刪除給定的字符串。
toggle(value)：如果列表中已經(jīng)存在給定的值，刪除它；如果列表中沒(méi)有給定的值，添加它。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/99646.html
摘要：注意還有一個(gè)類(lèi)似的方法，其接收的參數(shù)與方法一樣，都是一個(gè)選擇符，但返回的是一個(gè)元素而不是所有匹配的元素一個(gè)的實(shí)例。表示列表中是否存在給定的值，如果存在則返回，否則返回。 雖然現(xiàn)在MVVM框架帶來(lái)了諸多便利，但你真的就不再需要操作DOM了嗎？本文通過(guò)幾個(gè)小例子來(lái)介紹一些DOM操作的小技巧 場(chǎng)景一：querySelectorAll 陸小雞最近遇到了這樣一個(gè)問(wèn)題，他引用了一個(gè)第三方的表格組件...
摘要：注意還有一個(gè)類(lèi)似的方法，其接收的參數(shù)與方法一樣，都是一個(gè)選擇符，但返回的是一個(gè)元素而不是所有匹配的元素一個(gè)的實(shí)例。表示列表中是否存在給定的值，如果存在則返回，否則返回。 雖然現(xiàn)在MVVM框架帶來(lái)了諸多便利，但你真的就不再需要操作DOM了嗎？本文通過(guò)幾個(gè)小例子來(lái)介紹一些DOM操作的小技巧 場(chǎng)景一：querySelectorAll 陸小雞最近遇到了這樣一個(gè)問(wèn)題，他引用了一個(gè)第三方的表格組件...
摘要：原文地址已經(jīng)準(zhǔn)備好了，可能你還沒(méi)有準(zhǔn)備好擁抱它。那為啥不用呢。。瀏覽這些輕量的找一個(gè)服務(wù)于你特殊需求的，但是首先你必須確信一點(diǎn)原生的足夠滿足你實(shí)現(xiàn)你的需求 原文地址 javascript已經(jīng)準(zhǔn)備好了，可能你還沒(méi)有準(zhǔn)備好擁抱它。那為啥不用jquery呢。。因?yàn)樗 ６殷w積還不小，你的網(wǎng)站可能真的不是特別需要， Select elements // jQuery var els = $...
摘要：但它操作的便利性無(wú)出其右。我用寫(xiě)了一個(gè)基于簡(jiǎn)化版的，僅做個(gè)學(xué)習(xí)記錄。包含基礎(chǔ)操作，支持鏈?zhǔn)讲僮?，僅供日常使用。功能基于基本選擇器構(gòu)造，包括基于原生構(gòu)造，將原生對(duì)象轉(zhuǎn)化為對(duì)象。為支持批量操作，構(gòu)造器應(yīng)包含復(fù)數(shù)的。 原文地址：Bougie的博客showImg(https://segmentfault.com/img/bV71uK?w=500&h=260);jQuery作為曾經(jīng)Web前端的必...
摘要：但它操作的便利性無(wú)出其右。我用寫(xiě)了一個(gè)基于簡(jiǎn)化版的，僅做個(gè)學(xué)習(xí)記錄。包含基礎(chǔ)操作，支持鏈?zhǔn)讲僮?，僅供日常使用。功能基于基本選擇器構(gòu)造，包括基于原生構(gòu)造，將原生對(duì)象轉(zhuǎn)化為對(duì)象。為支持批量操作，構(gòu)造器應(yīng)包含復(fù)數(shù)的。 原文地址：Bougie的博客showImg(https://segmentfault.com/img/bV71uK?w=500&h=260);jQuery作為曾經(jīng)Web前端的必...
閱讀 3639·2021-11-25 09:43
閱讀 2019·2019-08-30 13:56
閱讀 1287·2019-08-30 12:58
閱讀 3491·2019-08-29 13:52
閱讀 816·2019-08-26 12:17
閱讀 1512·2019-08-26 11:32
閱讀 1010·2019-08-23 13:50
閱讀 1358·2019-08-23 11:53
