查找页面中所有类为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面试题与Javascript词法作用域说明
Nov 09 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
js replace替换字符串同时替换多个方法
Nov 27 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
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
PHP测试程序运行时间的类
2012/02/05 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
TensorFlow损失函数专题详解
2018/04/26 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
关于廉洁的广播稿
2014/01/30 职场文书
妇女干部培训方案
2014/05/12 职场文书
理想演讲稿范文
2014/05/21 职场文书
体育比赛口号
2014/06/09 职场文书
食堂标语大全
2014/06/11 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
2014年工会工作总结
2014/11/12 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书