查找页面中所有类为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 相关文章推荐
ext checkboxgroup 回填数据解决
Aug 21 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
jQuery选择器全面总结
Jan 06 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
vue+Element-ui实现分页效果
Nov 15 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
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
Yii rules常用规则示例
2016/03/15 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Python连接mysql方法及常用参数
2020/09/01 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
林肯就职演讲稿
2014/05/19 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
介绍信怎么写
2015/01/30 职场文书
资料员岗位职责范本
2015/04/13 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书