获取标签的那些事 之 动态集合

HTML5学堂:今天的内容从一道题开始,很简单,但是,你可能会“跪”得很惨。之后我们自然要挖一挖这个坑喽~所有学过JavaScript的人都知道获取标签,但是真的对它们足够了解么?

一起来看例子:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5学堂 - H5course</title>
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <link rel="stylesheet" href="model/css/reset.css">
</head>
<body>
    <ul id="con">
        <li>HTML5学堂</li>
        <li>获取标签的那些事儿</li>
        <li>看上去很简单,但是你却未必能够正确</li>
    </ul>
    <script src="model/js/jquery-1.11.2.js"></script>
    <script>
        var con = document.getElementById('con');
        // 通过基本的DOM操作获取li元素
        var domLists = con.getElementsByTagName('li');
        // 通过querySelectorAll获取li元素
        var queryLists = con.querySelectorAll('li');
        // 通过jQuery获取li元素
        var jqLists = $('#con li');
 
        console.log(domLists.length);
        console.log(queryLists.length);
        console.log(jqLists.length);
 
        // 动态添加10个li
        for (var i = 0; i < 10; i++) {
            con.innerHTML += '<li>新增</li>';
        };
 
        console.log(domLists.length);
        console.log(queryLists.length);
        console.log(jqLists.length);
    </script>
</body>
</html>

打印的结果

如果是3,3,3,3,3,3。那么恭喜你~!成功掉坑~!

到底结果是多少?先看如下解释,自然就明白了~~~

querySelectorAll与getElementsBy系列的区别

querySelectorAll 返回的是一个 Static Node List,而 getElementsBy 系列的返回的是一个 Live Node List。

Static Node List:静态的节点列表,如何理解静态呢?也就是一个快照。对文档的任何操作都不会产生影响。

Live Node List:动态的节点列表。每一次调用这种列表时(如上为:domLists这个变量)都会重复对文档进行查询。

so,答案是多少你知道了吗?jQuery选择器的原理又是什么你应该也能推算出来了吧~?

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-01-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

vue-学习笔记(更新中...)

7435
来自专栏柠檬先生

zepto 基础知识(5)

81.width   width() 类型:number   width(value) 类型:self   width(func...

2097
来自专栏Coco的专栏

【深入浅出jQuery】源码浅析2--奇技淫巧

1628
来自专栏前端说吧

百度前端学院js课堂作业合集+分析(更新中...)

4729
来自专栏IT开发技术与工作效率

VBA函数与过程简洁教程

1353
来自专栏静晴轩

精妙JS代码段搜集

现在到处都是JavaScript,倘若花点时间去体察,每次都能知道点新的东西。一旦你入了门,你总能从这里或是那里领悟到很多知识。一旦发现些许有意思的东西,总习惯...

3365
来自专栏大数据钻研

前端编码规范

基本原则 结构、样式、行为分离 统一缩进(建议 两个空格) 文件编码统一 不带BOM的UTF-8 一律使用小写字母 省略外链资源 URL 协议部分(FTP等其他...

3237
来自专栏Young Dreamer

setInterval(code, time)中code传递参数办法

1.使用setInterval的场景 有时我们需要隔一定的时间执行一个方法,这时就会用到setInterval,但是由于这个方法是浏览器模拟出的Timer线程,...

1739
来自专栏xingoo, 一个梦想做发明家的程序员

使用DOM动态创建标签

本文是参考《javascript Dom 编程艺术》第八章的内容所写,用到的知识点,就是关于创建平稳的web页面。 使用DOM方法:   getEleme...

2049
来自专栏前端知识分享

第60天:js常用访问CSS属性的方法

点语法可以得到 width  属性  和 top属性  带有单位的。 100px

711

扫码关注云+社区