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

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

相关文章

来自专栏Java 源码分析

markdown语法

Markdown 语法说明 (简体中文版) / (点击查看快速入门) 概述 宗旨 兼容 HTML 特殊字符自动转换 区块元素 段落和换行 标题 区块引用 列表 ...

2734
来自专栏python学习路

五、XML与xpath--------------爬取美女图片 先用一个小实例开头吧(爬取贴吧每个帖子的图片)XML 和 HTML 的区别XML文档示例

除了正则表达式处理HTML文档,我们还可以用XPath,先将 HTML文件 转换成 XML文档,然后用 XPath 查找 HTML 节点或元素。 ----  先...

2864
来自专栏iKcamp

如何实现VM框架中的数据绑定

作者:佳杰 本文原创,转载请注明作者及出处 如何实现VM框架中的数据绑定 一:数据绑定概述 视图(view)和数据(model)之间的绑定 二:数据绑定目的...

3618
来自专栏Android干货

html基本标签(慕课网)

2645
来自专栏大数据钻研

谷歌 HTML/CSS 规范

背景 这篇文章定义了 HTML 和 CSS 的格式和代码规范,旨在提高代码质量和协作效率。 ? 通用样式规范 协议 省略图片、样式、脚本以及其他媒体文件 URL...

3118
来自专栏前端知识分享

第25天:js-封装函数-淘宝鼠标展示

733
来自专栏全沾开发(huā)

拿Proxy可以做哪些有意思的事儿

1998
来自专栏狮乐园

async-for-js

插入3个div元素,其中第二个div元素使用setTimeout模拟异步操作,理想的插入顺序为div1 div2 div3,但这里的代码的插入顺序为div1 d...

522
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(83)-Easyui Datagrid 行内编辑扩展

这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务,上一节讲述了Datagird的批量编辑和提交 本节主要演示扩展Datagrid行内...

3389
来自专栏吴裕超

大搜车知乎live中的面试题结题方法记录

1、HTML&CSS(分别10分) 1. 一个div,宽度是100px,此时设置padding是20px,添加一个什么css属性可以让div的实际宽度仍然保持在...

47911

扫码关注云+社区