查找页面中所有类为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 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
Jquery之美中不足小结
Feb 16 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
Jquery中删除元素的实现代码
Dec 29 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 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实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
php中explode与split的区别介绍
2012/10/03 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
js面向对象方式实现拖拽效果
2021/03/03 Javascript
Python itertools模块详解
2015/05/09 Python
Python lxml模块安装教程
2015/06/02 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
python循环输出三角形图案的例子
2019/11/22 Python
Python os模块常用方法和属性总结
2020/02/20 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
品学兼优的大学生自我评价
2013/09/20 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
创业计划书中包含的9个方面
2013/12/26 职场文书
病房管理制度范本
2015/08/06 职场文书