查找页面中所有类为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 相关文章推荐
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
JavaScript 的继承
Oct 01 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
flexible.js实现移动端rem适配方案
Apr 07 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爆绝对路径方法收集整理
2012/09/17 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
解析php类的注册与自动加载
2013/07/05 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
Javascript delete 引用类型对象
2013/11/01 Javascript
javascript操作css属性
2013/12/30 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
Python字符串详细介绍
2015/05/09 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
Python: 传递列表副本方式
2019/12/19 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
追悼会子女答谢词
2014/01/28 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
融资租赁计划书
2014/04/29 职场文书
委托书如何写
2014/08/30 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
二年级学生期末评语
2014/12/26 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
如何用JS实现简单的数据监听
2021/05/06 Javascript