国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

一小波DOM騷操作：querySelectorAll和classList

KnewOne / 1742人閱讀

摘要：注意還有一個類似的方法，其接收的參數與方法一樣，都是一個選擇符，但返回的是一個元素而不是所有匹配的元素一個的實例。表示列表中是否存在給定的值，如果存在則返回，否則返回。

雖然現在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類名中，如下：

  

    
      

        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/53373.html

相關文章

  • 一小波DOM騷操作：querySelectorAll和classList

    摘要：注意還有一個類似的方法，其接收的參數與方法一樣，都是一個選擇符，但返回的是一個元素而不是所有匹配的元素一個的實例。表示列表中是否存在給定的值，如果存在則返回，否則返回。 雖然現在MVVM框架帶來了諸多便利，但你真的就不再需要操作DOM了嗎？本文通過幾個小例子來介紹一些DOM操作的小技巧 場景一：querySelectorAll 陸小雞最近遇到了這樣一個問題，他引用了一個第三方的表格組件...

    jcc 評論0 收藏0

  • 一小波DOM騷操作：querySelectorAll和classList

    摘要：注意還有一個類似的方法，其接收的參數與方法一樣，都是一個選擇符，但返回的是一個元素而不是所有匹配的元素一個的實例。表示列表中是否存在給定的值，如果存在則返回，否則返回。 雖然現在MVVM框架帶來了諸多便利，但你真的就不再需要操作DOM了嗎？本文通過幾個小例子來介紹一些DOM操作的小技巧 場景一：querySelectorAll 陸小雞最近遇到了這樣一個問題，他引用了一個第三方的表格組件...

    ZoomQuiet 評論0 收藏0

  • [譯] 咋才能忘掉jQuery然后用原生的js apis 呢

    摘要：原文地址已經準備好了，可能你還沒有準備好擁抱它。那為啥不用呢。。瀏覽這些輕量的找一個服務于你特殊需求的，但是首先你必須確信一點原生的足夠滿足你實現你的需求 原文地址 javascript已經準備好了，可能你還沒有準備好擁抱它。那為啥不用jquery呢。。因為它慢啊。而且體積還不小，你的網站可能真的不是特別需要， Select elements // jQuery var els = $...

    rose 評論0 收藏0

  • 基于ES6的tinyJquery

    摘要：但它操作的便利性無出其右。我用寫了一個基于簡化版的，僅做個學習記錄。包含基礎操作，支持鏈式操作，僅供日常使用。功能基于基本選擇器構造，包括基于原生構造，將原生對象轉化為對象。為支持批量操作，構造器應包含復數的。 原文地址：Bougie的博客showImg(https://segmentfault.com/img/bV71uK?w=500&h=260);jQuery作為曾經Web前端的必...

    U2FsdGVkX1x 評論0 收藏0

  • 基于ES6的tinyJquery

    摘要：但它操作的便利性無出其右。我用寫了一個基于簡化版的，僅做個學習記錄。包含基礎操作，支持鏈式操作，僅供日常使用。功能基于基本選擇器構造，包括基于原生構造，將原生對象轉化為對象。為支持批量操作，構造器應包含復數的。 原文地址：Bougie的博客showImg(https://segmentfault.com/img/bV71uK?w=500&h=260);jQuery作為曾經Web前端的必...

    FrozenMap 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<