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

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 条评论
登录 后参与评论

相关文章

来自专栏开源优测

python unittest之断言及示例

前言 python unintest单元测试框架提供了一整套内置的断言方法。 如果断言失败,则抛出一个AssertionError,并标识该测试为失败状态 如果...

4195
来自专栏進无尽的文章

RunTime 之使用前须知

有关Runtime的知识总结,我本来想集中写成一篇文章的,但是最后发现实在是太长,而且不利于阅读,最后分成了如下几篇:

652
来自专栏Python爬虫与数据挖掘

Python正则表达式初识(二)

前几天给大家分享了Python正则表达式初识(一),介绍了正则表达式中的三个特殊字符“^”、“.”和“*”,感兴趣的伙伴可以戳进去看看,今天小编继续给大家分享P...

995
来自专栏進无尽的文章

编码篇-数据管理者Model

      Model是数据管理者和持有者,是数据解析层剥离ViewConyroller的关键所在。同是也是cell滑动不卡(省去每次解析)的好方式。

613
来自专栏Java呓语

第9章、语言结构

字符串是包含在单引号(')或双引号(")字符中的字节或字符序列。 以下几行例子是等同的:

663
来自专栏Java社区

Python 自学步骤(文中有福利)

1074
来自专栏程序猿的那些趣事

良好的代码格式反映了程序员的编码能力,好的程序员应该这么编码

大括号的使用约定。如果是大括号内为空,则简洁地写成{}即可,不需要换行;如果 是非空代码块则:

671
来自专栏逸鹏说道

Python3 与 C# 基础语法对比(String专栏)

Python3 与 C# 基础语法对比:https://www.cnblogs.com/dotnetcrazy/p/9102030.html

622
来自专栏Go入门系列

Golang 入门系列(二)Go语言基础语法及需要注意的坑

上一章节我们已经了解了 Go 环境的配置,不了解的,请查看前面的文章 https://www.cnblogs.com/zhangweizhong/p/94599...

50
来自专栏zaking's

用js来实现那些数据结构11(字典)

  我们这篇文章来说说Map这种数据结构如何用js来实现,其实它和集合(Set)极为类似,只不过Map是【键,值】的形式存储元素,通过键来查询值,Map用于保存...

2707

扫描关注云+社区