原生 js 獲取 dom 元素 querySelector() 替代 getElementById(

caoym 發(fā)布于2019-08-02 14:30 / 2177人閱讀

摘要：原生獲取元素替代替代很長一段時間以來，除了的選擇器之外，我一直在用下面這幾個方法獲取元素后來才發(fā)現(xiàn)這個方法，這個方法跟的獲取元素方法是一樣的。例子關于選擇器，參閱比如，現(xiàn)在需要獲取所有以開頭的元素，也就是說包含等元素，就這樣寫

原生 js 獲取 dom 元素 querySelector() 替代 getElementById()

替代 getElementById()

很長一段時間以來，除了 jQuery 的選擇器之外，我一直在用下面這幾個方法獲取 dom 元素

document.getElementById()

document.getElementsByClassName()

document.getElementsByTagName()

document.getElementsByName()

后來才發(fā)現(xiàn) querySelector() 這個方法，這個方法跟 jquery 的獲取元素方法是一樣的。里面填寫的是 css 選擇器。

比如，下面這幾個獲取的元素是一樣的：

// getElementById() 方式
document.getElementById("username");

// querySelector() 方式
document.querySelector("#username");

// jquery 方式
$("#username")[0] // 不理解這個可以百度 `jquery 與 dom 相互轉換`

querySelector() 有兩種方式

querySelector( css選擇器字符串 )     // 獲取第一個匹配元素
querySelectorAll( css選擇器字符串 )  // 獲取所有匹配元素

效果如圖：

其獲取元素的方式跟 jquery 很像，但取到的元素并不一樣，jquery 取得的是 jquery 元素，而 querySelector() 獲取的是 dom 對象。

例子

關于選擇器，參閱： http://www.w3school.com.cn/cs...

比如，現(xiàn)在需要獲取所有 class 以 text- 開頭的元素，也就是說包含 text-success,text-danger,text-warning 等元素，就這樣寫：

document.querySelectorAll("[class^="text-"]")

云服務器 GPU云服務器原生js獲取元素 dom獲取元素 js原生dom事件原生js查找元素

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/53843.html

原生 js 獲取 dom 元素 querySelector() 替代 getElementById(

摘要：原生獲取元素替代替代很長一段時間以來，除了的選擇器之外，我一直在用下面這幾個方法獲取元素后來才發(fā)現(xiàn)這個方法，這個方法跟的獲取元素方法是一樣的。例子關于選擇器，參閱比如，現(xiàn)在需要獲取所有以開頭的元素，也就是說包含等元素，就這樣寫原生 js 獲取 dom 元素 querySelector() 替代 getElementById() 替代 getElementById() 很長一段時間以來...

cangck_X 2019-08-26 13:35 評論0 收藏0
原生js替換jQuery各種方法-中文版

摘要：本項目總結了大部分替代的方法，暫時只支持以上瀏覽器。返回指定元素及其后代的文本內(nèi)容。從服務器讀取數(shù)據(jù)并替換匹配元素的內(nèi)容。用它自己的方式處理，原生遵循標準實現(xiàn)了最小來處理。當全部被解決時返回，當任一被拒絕時拒絕。是創(chuàng)建的一種方式。原文https://github.com/nefe/You-D... You Dont Need jQuery showImg(https://segmen...

lylwyy2016 2019-08-23 12:14 評論0 收藏0
獲取網(wǎng)頁指定元素的原生方法回顧

摘要：瀏覽器原生提供的幾個找到元素的方法為網(wǎng)頁全局唯一。匹配包含的元素匹配包含和的元素級聯(lián)用法和相似返回一個。以上返回數(shù)組的方法，返回的都是的。那是個夜黑風高的夜晚，我遇到了一個按鈕：搜索嗯，我要選中它，我敲下了一行代碼： const submitButton = document.querySelector(button[type=submit]); 這對于精通 document.q...

URLOS 2019-08-21 17:02 評論0 收藏0
那些原生JavaScript

摘要：最近在用寫頁面，當然了在移動里引入或這些框架，肯定是極不理性的。原生挺簡單，為何需要的成功當時是因為這些瀏覽器不兼容，讓開發(fā)者崩潰，而且上瀏覽器性能好，跨平臺兼容也不影響性能。但根本就不是為手機設計的。最近在用mui寫頁面，當然了在移動App里引入jq或zepto這些框架，肯定是極不理性的。原生JS挺簡單，為何需要jq？jq的成功當時是因為ie6、7、8、9、10、chrome、ff...

fantix 2019-08-26 11:29 評論0 收藏0
你不需要 jQuery，但你需要一個 DOM 庫

摘要：對于復雜的業(yè)務需求仍然需要一些操作。使用方式很簡單，但是你需要創(chuàng)建一個獨立文件，重新掛載需要的方法到命名空間上，這在編寫插件時非常有用。正如前文所說，的操作在我看來依然是最好用的，所以，你不需要，但你需要一個庫。 showImg(https://segmentfault.com/img/bVbuPEH?w=750&h=375); 寫這篇文章的目的，一方面是介紹一下自己編寫的模塊化 DO...

HitenDev 2019-08-23 16:23 評論0 收藏0