查找页面中所有类为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 相关文章推荐
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
JS性能优化实现方法及优点进行
Aug 30 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 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
晶体管单管来复再生式收音机
2021/03/02 无线电
PHP可变函数学习小结
2015/11/29 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
jquery动态加载js三种方法实例
2013/08/03 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python计算程序运行时间的方法
2014/12/13 Python
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
自我鉴定书范文
2013/10/02 职场文书
公司任命书范本
2014/06/04 职场文书
关于教师节的广播稿
2014/09/10 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
认识实习感想
2015/08/10 职场文书
Python实现简繁体转换
2021/06/07 Python
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL