查找页面中所有类为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 相关文章推荐
JavaScript之自定义类型
May 04 Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
解决vue scoped scss 无效的问题
Sep 04 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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
php header()函数使用说明
2008/07/10 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
JavaScript变量作用域_动力节点Java学院整理
2017/06/27 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
python 自动提交和抓取网页
2009/07/13 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
《争吵》教学反思
2014/02/15 职场文书
网络营销策划方案
2014/06/04 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL
分享几个实用的CSS代码块
2022/06/10 HTML / CSS