DOM 提供了一个名为 getElementById() 的方法,这个方法将返回一个对象,这个对象就是参数 id 所对应的元素节点。另外,getElementByTagName() 方法会返回一个对象的数组,每一个对象分别对应着文档里有给定标签的一个元素。这个方法的参数是 html 标签的名字。现在我们考虑一个问题,能不能通过标签的类名class name来获取该对象呢?下面是这个猜想的程序实现(支持多个class查询和在某个范围内进行查询):
<div id="container">
<span class="aaa zzz ccc"></span>
<div class="aaa bbb ccc"></div>
</div>
<div class="aaa bbb ccc"></div>
正确的得到了结果。
有人会问,原生的方法调用效率是最高的,有很多浏览器已经将实现了getElementsByClassName这个方法,那为什这里没有先调用原生的再调用自定义的呢?
对,原生的效率是很高,它支持多个class条件的查询,但是最大的问题是他不支持getElementsByClassName("container","div","aaa ccc"),这种在指定标签中查找指定元素为指定class的情况。所以,这里舍弃了原生的方法调用。
在代码中,你会看到我将数组的length缓存了起来,这样可以提高效率。其实上,在这里有一个很隐蔽的问题,就是数组访问length属性和HtmlCollection访问length有很在的区别。在数组中,length是一个普通的属性,访问时不会进行额外的操作,在来看看HTMLCollection,我们常常将HTMLCollection当作数组来使用,但实际上,它是一个根据DOM结构自动变化的实体对象。每次访问一个HTMLCollection对象的属性时,他都会对DOM内所有的节点进行一次完整的匹配。也就是说,每次访问HtmlCollection对象的length时,都会更新一次集合对象,性能上消耗很大。所以一般情况之下,这种HtmlCollection的循环操作,都是建议缓存length的。
小插曲
这是关于往数组里放元素的方式间,效率比较的问题。来看一下代码:
//方式一
var arr = [];
var start = new Date();
for(var i=0;i<100000;i++){
arr.push(i);
}
//方式二
var arr = [];
var start = new Date();
for(var i=0;i<100000;i++){
arr[arr.length]=i;
}
猜猜看,哪种效率更高呢!经过测试,第二种方式的效率要高于第一种。好了,不多说的,这个函数简单实用,代码上我也写了注释,看应该已经没有什么问题了。
分享到:
相关推荐
1.设计一个学生类Student。 1)数据成员包括: 学生学号、姓名、数学、英语、c语言成绩;(用字符指针存储学号和姓名,通过动态存储空间分配的方式为指针开辟指向的空间,保证空间大小没有浪费) 2)成员函数包括: 设置...
所以不能够直接new一个Class对象出来,是通过Class类中的一个方法获取到的。 例如:通过全限定路径类名 2、同一种类型不管通过什么方式得到Class的实例都是相等的;一个类型的字节码对象只有一份,在...
请注意,这里面有一个方法名 selectUserByID 必须与 User.xml 里面配置的 select 的id 对应() 重写测试代码 程序代码 程序代码 public static void main(String[] args) { SqlSession session = ...
面向对象计算始于这个基本概念,即现实世界可以被描绘成一系列完全自治、封装的对象,这些对象通过一个受保护的接口访问其他对象。 4. 多态性: 多态性是指允许不同类的对象对同一消息作出响应。多态性包括参数化...
整个层次结构中的所有父类和子类属性都映射到同一个表中,他们的实例通过一个辨别符列(discriminator)来区分。 Plane 是父类。@DiscriminatorColumn 注解定义了辨别符列。对于继承层次结构中的每个类, @...
获取原型链 返回带有传入对象的原型链(按升序)的数组。安装npm install --save get-prototype-chain用法const getPrototypeChain = require ( 'get-prototype-chain' ) ;class A {}class B extends A {}class C ...
4.4.2 通过name属性访问文档对象 4.4.3 通过id属性访问文档对象 4.4.4 通过联合数组访问文档对象 4.5 创建和使用自定义对象 4.5.1 通过定义对象的构造函数的方法 4.5.2 通过对象直接初始化的方法 4.5.3 修改、删除...
4.4.2 通过name属性访问文档对象 4.4.3 通过id属性访问文档对象 4.4.4 通过联合数组访问文档对象 4.5 创建和使用自定义对象 4.5.1 通过定义对象的构造函数的方法 4.5.2 通过对象直接初始化的方法 4.5.3 修改、删除...
PHP的反射API,即在PHP运行状态下,...也可以用class函数,获取对象属性的关联数组的信息 通过class()函数获取类的信息 打印结果: 通过这个反射API,可以做hook实现插件功能,动态代理等。 网上找的动态代理示例
面向对象计算始于这个基本概念,即现实世界可以被描绘成一系列完全自治、封装的对象,这些对象通过一个受保护的接口访问其他对象。 4. 多态性: 多态性是指允许不同类的对象对同一消息作出响应。多态性包括参数化多...
在当时,面向对象编程还是一个比较新的理念,Stroustrup博士并不是从头开始设计新语言,而是在C语言的基础上进行创建。这就是C++语言。 1985年,C++开始在外面慢慢流行。经过多年的发展,C++已经有了多个版本。为次...
props[index].GetValue(null, null)返回实际的SolidColorBrush对象,第一个参数是属性所在的对象,因为Brushes是一个静态属性,没有对应的对象,传入null;第二个参数只有在属性是索引器是才有必要。
D []--实例化一个空数组对象 实例化空数组:var arr=[]; 特点:元素个数不限定,元素类型不限制 13.Array 对象的常用方法: |--1.join()方法--用于把数组中的所有元素放入一个字符串 | eparato表示要使用的...
格式化的目的是把一个对象以不同的格式表示,以满足不同环境对格式的要求,比如:前面学习的Date对象实质是一个以毫秒值表示的时间,但是在不同的国家和地区表示方式不一样。那么就需要对Date进行格式化处理。接下来...
在程序运行期间,Java运行时系统始终为所有的对象维护一个被称为运行时的类型标识。这个信息跟踪着每个对象所属的类。 获取类字节码方式 Class.forName(); 静态方法调用 Class forName = Class.forName(path); 类型...
For Each...Next 语句 对于数组或集合中的每一个元素,重复一组语句。 FormatCurrency 函数 返回的表达式为货币值格式,其货币符号采用系统控制面板中定义的。 FormatDateTime 函数 返回格式化为日期或时间的...
For Each...Next 语句 对于数组或集合中的每一个元素,重复一组语句。 FormatCurrency 函数 返回的表达式为货币值格式,其货币符号采用系统控制面板中定义的。 FormatDateTime 函数 返回格式化为日期或时间的...
For Each...Next 语句 对于数组或集合中的每一个元素,重复一组语句。 FormatCurrency 函数 返回的表达式为货币值格式,其货币符号采用系统控制面板中定义的。 FormatDateTime 函数 返回格式化为日期或时间的...
⼀、 编写⽣成jar包 ⼆、 通过⽂件流的⽅式读取jar,获取到每个class对象对应的字节数组 1.⾸先获取到jar对应的字节输⼊流 String jarPath = "/nghb/jar/MyFirstDemo.jar"; File file = new File(jarPath); System....
反射有三种获取的⽅式,分别是:forName / getClass / 直接使⽤class⽅式 使⽤反射可以获取类的实例 1-6)列出⾄少五种设计模式 设计⽅式有⼯⼚法,懒加载,观察者模式,静态⼯⼚,迭代器模式,外观模式、、、、 1-...