摘要:注意還有一個類似的方法,其接收的參數與方法一樣,都是一個選擇符,但返回的是一個元素而不是所有匹配的元素一個的實例。表示列表中是否存在給定的值,如果存在則返回,否則返回。
雖然現在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 的實例)。
張大鵬最近遇到了這樣一個問題,需要找到表格中各行的序列號,將其存入ids數組中,其中的序列號已經寫入到每行的class類名中,如下:
td1 |
td4 |
td2 |
td3 |
他略加思索,寫出了如下代碼:
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):如果列表中已經存在給定的值,刪除它;如果列表中沒有給定的值,添加它。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/114323.html
摘要:注意還有一個類似的方法,其接收的參數與方法一樣,都是一個選擇符,但返回的是一個元素而不是所有匹配的元素一個的實例。表示列表中是否存在給定的值,如果存在則返回,否則返回。 雖然現在MVVM框架帶來了諸多便利,但你真的就不再需要操作DOM了嗎?本文通過幾個小例子來介紹一些DOM操作的小技巧 場景一:querySelectorAll 陸小雞最近遇到了這樣一個問題,他引用了一個第三方的表格組件...
摘要:注意還有一個類似的方法,其接收的參數與方法一樣,都是一個選擇符,但返回的是一個元素而不是所有匹配的元素一個的實例。表示列表中是否存在給定的值,如果存在則返回,否則返回。 雖然現在MVVM框架帶來了諸多便利,但你真的就不再需要操作DOM了嗎?本文通過幾個小例子來介紹一些DOM操作的小技巧 場景一:querySelectorAll 陸小雞最近遇到了這樣一個問題,他引用了一個第三方的表格組件...
摘要:原文地址已經準備好了,可能你還沒有準備好擁抱它。那為啥不用呢。。瀏覽這些輕量的找一個服務于你特殊需求的,但是首先你必須確信一點原生的足夠滿足你實現你的需求 原文地址 javascript已經準備好了,可能你還沒有準備好擁抱它。那為啥不用jquery呢。。因為它慢啊。而且體積還不小,你的網站可能真的不是特別需要, Select elements // jQuery var els = $...
摘要:但它操作的便利性無出其右。我用寫了一個基于簡化版的,僅做個學習記錄。包含基礎操作,支持鏈式操作,僅供日常使用。功能基于基本選擇器構造,包括基于原生構造,將原生對象轉化為對象。為支持批量操作,構造器應包含復數的。 原文地址:Bougie的博客showImg(https://segmentfault.com/img/bV71uK?w=500&h=260);jQuery作為曾經Web前端的必...
摘要:但它操作的便利性無出其右。我用寫了一個基于簡化版的,僅做個學習記錄。包含基礎操作,支持鏈式操作,僅供日常使用。功能基于基本選擇器構造,包括基于原生構造,將原生對象轉化為對象。為支持批量操作,構造器應包含復數的。 原文地址:Bougie的博客showImg(https://segmentfault.com/img/bV71uK?w=500&h=260);jQuery作為曾經Web前端的必...
閱讀 1311·2021-11-24 10:24
閱讀 4088·2021-11-22 15:29
閱讀 1085·2019-08-30 15:53
閱讀 2788·2019-08-30 10:54
閱讀 1977·2019-08-29 17:26
閱讀 1270·2019-08-29 17:08
閱讀 605·2019-08-28 17:55
閱讀 1576·2019-08-26 14:01