HTML5学堂-码匠 HTML5学堂

您当前位于:DOM 文档操作 ——> 获取标签方法得到的动态集合

获取标签方法得到的动态集合

2016/01/07 20:11:54 | 作者:HTML5学堂(码匠) | 分类:DOM 文档操作 | 关键词:JavaScript,获取标签,动态集合

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

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

一起来看例子:

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5学堂 - H5course</title>
  6.     <meta name="viewport" content="width=device-width,user-scalable=no">
  7.     <link rel="stylesheet" href="model/css/reset.css">
  8. </head>
  9. <body>
  10.     <ul id="con">
  11.         <li>HTML5学堂</li>
  12.         <li>获取标签的那些事儿</li>
  13.         <li>看上去很简单,但是你却未必能够正确</li>
  14.     </ul>
  15.     <script src="model/js/jquery-1.11.2.js"></script>
  16.     <script>
  17.         var con = document.getElementById('con');
  18.         // 通过基本的DOM操作获取li元素
  19.         var domLists = con.getElementsByTagName('li');
  20.         // 通过querySelectorAll获取li元素
  21.         var queryLists = con.querySelectorAll('li');
  22.         // 通过jQuery获取li元素
  23.         var jqLists = $('#con li');
  24.  
  25.         console.log(domLists.length);
  26.         console.log(queryLists.length);
  27.         console.log(jqLists.length);
  28.         
  29.         // 动态添加10个li
  30.         for (var i = 0; i < 10; i++) {
  31.             con.innerHTML += '<li>新增</li>';
  32.         };
  33.         
  34.         console.log(domLists.length);
  35.         console.log(queryLists.length);
  36.         console.log(jqLists.length);
  37.     </script>
  38. </body>
  39. </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学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS