Javascript中css選擇器的陷阱

Tangpj 發布于2019-08-22 16:24 / 3147人閱讀

之前寫了一大段都刪了，想了想沒必要介紹api的使用。querySelector querySelectorAll這兩個api現在應該沒人不知道

這里只簡單說下使用時容易遇到的兩個坑

document.querySelectorAll返回的是靜態的nodelist，可以理解為某一時間的快照

舉個例子說就是如果一個ul下有兩個li，現在我用querySelectorAll獲取li，如果以后再動態的添加幾個li，querySelectorAll返回的nodelist是不會包括后來動態添加的li的，而getElementByTagName獲取到的nodelist則是動態的，就算后來動態添加的元素一樣可以獲取到


    a
    b

另外一點是返回的結果可能與預想中的有偏差 id為test的元素中沒有div元素，但是返回的并不是空數組，可以自行實驗一下


    Hello I"am a ninja

var a = document.getElementById("test").querySelectorAll("div b");
console.log(a);

下面是JQ的作者給出的一個方法，使其正確的匹配，首先必須為元素賦予元素一個唯一的id，并且稍后將原始的id恢復回去，然后將id 拼接在選擇器前面

(function() {
    var count = 1;
    this.rootedQuerySelectorAll = function(elem, query) {
        var oldId = elem.id;
        try {
            return elem.querySelectorAll("#" + elem.id + " " + query);
        }
        catch(e) {
            throw e;
        }
        finally {
            elem.id = oldId;
        }
    }
}) ()

var b = rootedQuerySelectorAll(
    document.getElementById("test"),
    "div b"
)
console.log(b);

云服務器 GPU云服務器 javascript陷阱 css選擇 css選擇器 javascript+css

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/94317.html

前端工程師必知的性能優化技巧

摘要：網站性能類似于二八定律，其中的優化將帶來網站的性能提升。代碼重用最大的性能缺陷之一是文件大小過大和不必要的瀏覽器呈現。最大程度上減少文件大小的快速方法就是盡可能多地重用樣式。此外，圖像可能被壓縮，刪除任何不必要的注釋和顏色配置文件。性能與組織當能夠扎實的理解并編寫HTML和CSS這門專業知識。隨著網站代碼量和流量的增長，另一種新技能也開始發揮作用，這對于開發效率和用戶體驗都至關重要...

crelaber 2019-08-30 11:03 評論0 收藏0
前端工程師必知的性能優化技巧

摘要：網站性能類似于二八定律，其中的優化將帶來網站的性能提升。代碼重用最大的性能缺陷之一是文件大小過大和不必要的瀏覽器呈現。最大程度上減少文件大小的快速方法就是盡可能多地重用樣式。此外，圖像可能被壓縮，刪除任何不必要的注釋和顏色配置文件。性能與組織當能夠扎實的理解并編寫HTML和CSS這門專業知識。隨著網站代碼量和流量的增長，另一種新技能也開始發揮作用，這對于開發效率和用戶體驗都至關重要...

DTeam 2019-08-23 17:56 評論0 收藏0
前端面試題收集，持續更新中

摘要：對于所訪問的每個元素，函數應該將該元素傳遞給所提供的回調函數。 HTML 在線閱讀Github地址題目列表 HTML HTML和XHTML的區別 Html的語義化 Doctype的文檔類型 cookie、sessionSttorage、localStory區別 HTML全局屬性(global attribute)有哪些？常見的瀏覽器內核有哪些？介紹一下你對瀏覽器內核的理解？...

kgbook 2019-08-22 16:49 評論0 收藏0
前端面試題收集，持續更新中

摘要：對于所訪問的每個元素，函數應該將該元素傳遞給所提供的回調函數。 HTML 在線閱讀Github地址題目列表 HTML HTML和XHTML的區別 Html的語義化 Doctype的文檔類型 cookie、sessionSttorage、localStory區別 HTML全局屬性(global attribute)有哪些？常見的瀏覽器內核有哪些？介紹一下你對瀏覽器內核的理解？...

2json 2019-08-29 15:12 評論0 收藏0