专栏首页HTML5学堂获取标签的那些事 之 动态集合

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

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),作者:HTML5学堂

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 移动端 模拟手机联系人触摸A~Z导航

    HTML5学堂:今天要与大家分享一个当前移动端很常见的效果,类似于手机联系人的快速导航功能,即当触摸a~z的字母时,能够相对应的显示文字。有些手机的音乐导航也类...

    HTML5学堂
  • 新浪面试真题

    1.请写出一张图片的HTML代码,已知道图片地址为“images/abc.jpg”,宽100px,高50px 2.请问display:none和visibili...

    HTML5学堂
  • 移动端兼容系列 HTML与CSS兼容

    HTML5学堂:本文,我们将继续为大家总结介绍移动端的常见兼容问题,今天要提的是关于移动端HTML与CSS当中,遇到的一些常见兼容问题,主要包括取消电话号码的识...

    HTML5学堂
  • 第21天:京东页面轮播图

    半指温柔乐
  • JS示例15-模运算应用(隔行变色)

    专注APP开发
  • CSS基础--属性选择器、伪类选择器

    eadela
  • 前端每日实战:54# 视频演示如何用纯 CSS 创作一副国际象棋

    https://codepen.io/comehope/pen/WyXrjz点击预览

    前端博客 : alili.tech
  • 移动端弹性滑动以及vue记录滑动位置

    https://segmentfault.com/a/1190000012857661

    前端博客 : alili.tech
  • jQuery基础--选择器

    jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。

    eadela
  • 常见闭合百叶窗

    李才哥

扫码关注云+社区

领取腾讯云代金券