成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Javascript中css選擇器的陷阱

Tangpj / 3196人閱讀

之前寫了一大段都刪了，想了想沒(méi)必要介紹api的使用。querySelector querySelectorAll這兩個(gè)api現(xiàn)在應(yīng)該沒(méi)人不知道
這里只簡(jiǎn)單說(shuō)下使用時(shí)容易遇到的兩個(gè)坑
document.querySelectorAll返回的是靜態(tài)的nodelist，可以理解為某一時(shí)間的快照
舉個(gè)例子說(shuō)就是如果一個(gè)ul下有兩個(gè)li，現(xiàn)在我用querySelectorAll獲取li，如果以后再動(dòng)態(tài)的添加幾個(gè)li，querySelectorAll返回的nodelist是不會(huì)包括后來(lái)動(dòng)態(tài)添加的li的，而getElementByTagName獲取到的nodelist則是動(dòng)態(tài)的，就算后來(lái)動(dòng)態(tài)添加的元素一樣可以獲取到
    
    
  • a
    • 
    
  • b
    •
另外一點(diǎn)是返回的結(jié)果可能與預(yù)想中的有偏差 id為test的元素中沒(méi)有div元素，但是返回的并不是空數(shù)組，可以自行實(shí)驗(yàn)一下

    Hello I"am a ninja


var a = document.getElementById("test").querySelectorAll("div b");
console.log(a);
下面是JQ的作者給出的一個(gè)方法，使其正確的匹配，首先必須為元素賦予元素一個(gè)唯一的id，并且稍后將原始的id恢復(fù)回去，然后將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);

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/94317.html

相關(guān)文章

  • 前端工程師必知的性能優(yōu)化技巧

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

    crelaber 評(píng)論0 收藏0

  • 前端工程師必知的性能優(yōu)化技巧

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

    DTeam 評(píng)論0 收藏0

  • 前端面試題收集，持續(xù)更新中

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

    kgbook 評(píng)論0 收藏0

  • 前端面試題收集，持續(xù)更新中

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

    2json 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<