查找页面中所有类为test的结点的方法


Posted in Javascript onMarch 28, 2014

前言

阿里巴巴,web前端实习生要在线考试了。确实对于菜鸟的我还是恶补一下知识先。所以百度谷歌了之前阿里巴巴校招的前端笔试题,觉得自己真的被鄙视了,完全做不懂的。啊里巴巴的web前端是在线的笔试,是不是给我们百度谷歌的机会呢?

看见这道题目的时候,觉得确实自己应该去封装一些你常用的方法,就像jquery那样。做出一些方法,是实现浏览器兼容的,或者是工具类,确实对以后开发还是有利的。

HTML

为了方便说明,我们先写下HTML

<p class="A B">find me</p> 
<div class="A">also find me</div>

css我们就省略了,我们的重点有不是css样式是怎么写,我们要的是用javascript通过样式名去寻找结点集合。

实现的方法

1 getElementsByClassName

console.log(document.getElementsByClassName("A")); 
console.log(document.getElementsByClassName("A B"));

出现的结果(firefox 27.0)

查找页面中所有类为test的结点的方法 

确实这个方法,我觉得应该就能解决上面的问题了,但是看了它的兼容性,我觉得应该还是另找方法吧。

查找页面中所有类为test的结点的方法 

2 querySelectorAll

console.log(document.querySelectorAll (".A")); 
console.log(document.querySelectorAll (".B,.A"));

我们来看看结果是什么?跟上面有什么区别?

查找页面中所有类为test的结点的方法 

第二个的结果不一样,原来querySelectorAll参数,如果有两个的话,要用逗号分隔,其实它表示的意思是有A样式或者B样式的结点都可以匹配。

其实这个方法的兼容性也不是很好

查找页面中所有类为test的结点的方法 

基于上面兼容性的问题(毕竟在中国浏览器ie6/7/8还是占多数的嘛) ,我还不如自己做一个方法去实现呢。

3 queryNodesByClass

我觉得应该先说下我的思路

(1) 先获取整个页面每个节点
(2) 遍历每个节点,获取它的className字符串
(3)操作className字符串,先以空格来分割成数组,再用一个对象,设置其key为每个数组元素,那么对应的value为true
(4)现在的问题就是根据你传入的参数(比如一个参数就是"selector",两个的话就是"selector_1 selector_2",以此类推),然后将它也转变成数组,每个数组元素做为之前我们结点className字符串对应的对象的key值,如果匹配的话,就是true,没有的话就是undefined。

那现在我们给出我们的代码

function StringToObj(string){ 
var arr = string.split(" ").sort(); 
var result = {}; 
for(var i=arr.length-1;arr[i];i--){ 
result[arr[i]] = true; 
} 
return result; 
}

function StringToArray(string){ 
var arr = string.split(" ").sort(); 
var result = []; 
for(var i=arr.length-1;arr[i];i--){ 
result.push(arr[i]); 
} 
return result; 
}

function queryNodesByClass(classname){ 
//思路(1) 
var all = document.getElementsByTagName("*"),len = all.length,result = []; 
var cname = StringToArray(classname);//思路(4) 
for(var i=0;i<len;i++){//遍历每个节点 对应思路(2) 
//对应的是思路(3)也就是StringToObj方法起的作用 
var dom_cname = StringToObj(all[i].className),cname_len = cname.length; 
for(var j=0;j<cname_len;j++){ 
if(!dom_cname[cname[j]]) 
break; 
} 
if(j == cname_len) 
{ 
result.push(all[i]); 
}} 
return result; 
}
Javascript 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
javascript实现日历效果
Jun 17 Javascript
js 验证身份证信息有效性
Mar 28 #Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 #Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 #Javascript
jquery选择符快速提取web表单数据示例
Mar 27 #Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 #Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 #Javascript
js弹出确认是否删除对话框
Mar 27 #Javascript
You might like
php+mysql事务rollback&amp;commit示例
2010/02/08 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
javascript json 新手入门文档
2009/12/03 Javascript
封装的原生javascript弹出层代码
2010/09/24 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
Javascript的比较汇总
2016/07/25 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
puppeteer库入门初探
2019/01/09 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
JS实现小星星特效
2019/12/24 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
苹果Mac升级:MacSales.com
2017/11/20 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
销售总监岗位职责
2014/01/04 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
南极大冒险观后感
2015/06/05 职场文书
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
TV动画《间谍过家家》公开PV
2022/03/20 日漫