查找页面中所有类为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 checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
jQuery Autocomplete自动完成插件
Jul 17 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 Javascript
JavaScript如何实现图片处理与合成
May 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判断变量的函数
2012/04/24 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
php中{}大括号是什么意思
2013/12/01 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
Python变量作用范围实例分析
2015/07/07 Python
详解Python中where()函数的用法
2018/03/27 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
个人简历自荐信
2014/06/26 职场文书
文明单位创建材料
2014/12/24 职场文书
幼儿学前班评语
2014/12/29 职场文书
贷款收入证明格式
2015/06/24 职场文书
礼仪培训心得体会
2016/01/22 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
Javascript 解构赋值详情
2021/11/17 Javascript
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers