Javascript中css选择器的陷阱

Tangpj 发布于2019-08-22 16:24 / 2924人阅读

之前写了一大段都删了，想了想没必要介绍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);

私有云云服务器 javascript陷阱 css选择 css选择器 javascript+css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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