JavaScript中DOM查詢封裝函式
阿新 • • 發佈：2022-04-14
在JavaScript中可以通過BOM查詢html文件中的元素，也就是所謂的在html中獲取物件然後對它新增一個函式。
常用的方法有以下幾種：
①document.getElementById() 通過元素ID在全域性查詢元素 ②document.getElementsByTagName（） 通過元素標籤名字在全域性查詢元素 element.getElementsByTagName（） 通過元素標籤在指定元素內部查詢元素 ③document.getElementsByClassName（） 通過元素標籤的className在全域性查詢元素 element.getElementsByClassName（） 通過元素標籤的className在指定元素內部查詢元素 但是很多實際情況下，用這三種方法不是很方便，很多時候需要多次呼叫，就曉得有點麻煩，程式碼量也有點大，所以這個時候我們就需要將查詢函式封裝成一個函式。這裡我們可以參照css包含選擇器的特性，給函式傳遞一串字串。比如如下所示： html結構：
傳遞的引數如下：
var atrr = $(".box .box1 .div1 span"); 然後就是封裝函數了。 首先我們需要獲取最外層的一個html標籤，然後再在這個標籤內部去查詢我們需要的元素。 var result = document.getElementsByTagName("html"); 上面的程式碼中我們獲取了html中最外層的標籤<html>標籤 然後將接收到的字串按照空格分隔為一個數組，陣列的每個元素為一個className、ID或者標籤名。然後接下來就是遍歷了。 當陣列元素為className時，我們就需要呼叫element.getElementsByClassName（） 來獲取元素 當陣列元素為標籤名時，我們就需要呼叫element.getElementsByTagName（） 來獲取元素 當陣列元素為ID時，我們就需要呼叫document.getElementById() 來獲取元素
最後當遍歷完成的時候，我們也就查詢到了我們需要的內容。程式碼如下：
function $(selector){ var strs = selector.split(" ");//通過空格切割傳遞的字串 var result = document.getElementsByTagName("html");//獲取最外層的dom元素 for(var i = 0,len = strs.length;i<len;i++){//根據傳過來的字串，一層一層的遍歷查詢dom if(strs[i].charAt(0)==="#"){//如果是id，返回的是dom元素 result = document.getElementById(strs[i].slice(1)); }else if(strs[i].charAt(0)==="."){//如果是class，則返回的是一個偽陣列（集合），需要加一個下標，才能獲得dom result = byClass(strs[i].slice(1),result[0]); }else{//如果是tagName if(i===0)//代表傳遞的字串只有一個tagName， result = result[0].getElementsByTagName(strs[i]); else
更多內容請見原文，文章轉載自：https://blog.csdn.net/weixin_44519496/article/details/118567825