查找页面中所有类为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 相关文章推荐
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
详解TypeScript的基础类型
Feb 18 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
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笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
python time模块用法实例详解
2014/09/11 Python
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
护士自我评价
2014/02/01 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
网吧员工管理制度
2015/08/05 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
详解JAVA的控制语句
2021/11/11 Java/Android
MySQL的存储过程和相关函数
2022/04/26 MySQL