跟著Zepto學dom操作（一）

之前有嘗試著去閱讀jquery原始碼，但是由於原始碼過長再加上自己技術上有點不到家，在嘗試過幾遍之後不得不遺憾的選擇放棄。對dom的操作一直都使用jquery，如果讓我用原生的js去操作dom，會發現自己不能很快的實現需求，所以這次選擇zepto的原始碼去深入挖掘dom操作。注意，此次選用的zepto選用最新1.2.0的版本，所以不太適用於pc瀏覽器。

jquery有乙個非常強大的dom選擇器引擎sizzle，選擇速度堪稱業內頂尖，zepto號稱移動端的jquery，那麼其肯定需要乙個自己的選擇器，現在我們來看看這個非常小巧輕便的選擇器。

// 該正則匹配a-z,a-z,下劃線,-所連著的單詞，驗證是否為單個類名
var ******selectorre = /^[\w-]*$/;
zepto.qsa = function(element, selector)
dom = zepto.qsa(document, selector)
//queryselectorall方法支援ie8+,不過在ie8中只支援css2.1選擇器。
複製**

解決了選擇元素的問題，我們現在可以來看看具體的dom操作了。

attr:function(name,value))
}function
funcarg(context, arg, idx, payload) 
function
setattribute(node,name,value)複製**

var classcache = {};
//classcache中其初始值為{},當呼叫該函式時，會返回乙個正規表示式，其匹配開頭或者空白（包括空格、換行、tab縮排等）+name+結尾或者空白（包括空格、換行、tab縮排等）。不過還是沒有弄懂為什麼要將class的正則儲存起來。
function
classre(name) 
//去獲取classname
function
classname(node, value)
//判斷是否有該class
hasclass: function(name), classre(name))
},//新增元素
addclass: function(name), this)
classlist.length && classname(this, cls + (cls ? " " : "") + classlist.join(" "))
})},//移除元素
removeclass: function(name))
classname(this, classlist.trim())
})},toggleclass: function(name, when))
})},複製**

在函式classname中有個判斷svg的特殊方法，即svg= klass && klass.baseval !== undefined。svg這個元素比較特殊，其通過document.getelementsbyclassname('icon--logo')[0].classname獲取到的內容如下顯示：

svg.png

通過讀取classname.baseval的形式來判斷是否為svg元素。同時設定其class的方式也不能通過classname的形式直接設定，也要通過classname.baseval的形式去設定才能生效。

zepto的class設定方式非常的巧妙，相容性也比較好，但是如果只是在移動端使用的話，完全可以用html5中提供的classlist介面去取代，該介面的相容性非常的棒，目前（2023年11月）能夠直接使用，無需考慮相容性問題，是的，svg元素也能夠使用。下面將用classlist的形式改寫下這些函式(注：下面的函式只能設定讀取乙個class，如果要實現多個class，稍微在這基礎上改寫下就行了)：

addclass:function(name))
}removeclass:function(name)
item.classlist.remove(name)
})}toggleclass:function(name))
}複製**

跟著Zepto學dom操作（一）

跟著小白學SpringCloud（一）

跟著小YI 學HashMap 原始碼（一）

跟著官網學solr（一） solr環境的搭建

跟著Zepto學dom操作（一）

跟著小白學SpringCloud（一）

跟著小YI 學HashMap 原始碼（一）

跟著官網學solr（一） solr環境的搭建

相關推薦