querySelector操作dom的用法

2021-08-18 10:32:48 字數 1162 閱讀 5224

獲取元素dom物件有很多種方法,以前一直在用getelementbyid和getelementsbytagname等,現在對這些方法和queryselector做乙個總結

常見的獲取元素的方法有3種,分別是通過元素id、通過標籤名字和通過類名字來獲取。

1.dom提供了乙個名為getelementbyid的方法,這個方法將返回乙個與之對應id屬性的節點物件,它是document物件特有的函式,只能通過其來呼叫該方法,使用方法如下:document.getelementbyid(『idname』);

2.getelementsbytagname方法返回乙個物件陣列(準確的說是htmlcollection集合),返回元素的順序是它們在文件中的順序,傳遞給 getelementsbytagname() 方法的字串可以不區分大小寫,使用方法如下:document.getelementsbytagname(tagname);

3.dom還提供了getelementsbyclassname方法來獲取指定class名的元素,該方法返回文件中所有指定類名的元素集合,作為 nodelist 物件。nodelist 物件代表乙個有順序的節點列表。nodelist 物件 我們可通過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始), 所以有時使用時要指定下標,使用方法如下:document.getelementsbyclassname(『classname』);

4.queryselector() 方法返回匹配指定 css 選擇器元素的第乙個子元素 。該方法只返回匹配指定選擇器的第乙個元素。如果要返回所有匹配元素,需要使用queryselectorall()方法替代.

具體的寫法如下所示:

document.query
由於queryselector是按css規範來實現的,所以它傳入的字串中第乙個字元不能是數字.

最後再根據查詢的資料總結一下:

query選擇符選出來的元素及元素陣列是靜態的,而getelement這種方法選出的元素是動態的。靜態的就是說選出的所有元素的陣列,不會隨著文件操作而改變.

在使用的時候getelement這種方法效能比較好,query選擇符則比較方便.

querySelector用法改進

原來選擇器只支援乙個上下文,並對ie8的bug進行了規避 if flag xml doc.queryselectorall try catch e finally else catch e 改進如下,現在只需規避ie的object bug。if flag xml doc.queryselectora...

你不了解的querySelector

概述返回當前文件中匹配乙個特定選擇器的所有的元素 使用深度優先,前序遍歷規則這樣的規則遍歷所有文件節點 返回的物件型別是 nodelist.elementlist document.queryselectorall selectors 下面的例子返回乙個文件中所有的class為 note 或者 al...

只用 操作實現 , , 操作

減法 a b a b 乘法 a b相當於將a累加abs b 次 除法 相當於將abs a 減去 abs b 的次數 求lhs的反面值rhs,即求rhs使得lhs rhs 0 int negate int lhs return ret int abs int lhs 返回i的絕對值 lhs rhs l...