查找页面中所有类为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 面向对象全新理练之原型继承
Dec 03 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
Vue实现todo应用的示例
Feb 20 Vue.js
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
Apache2 httpd.conf 中文版
2006/11/17 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
php-msf源码详解
2017/12/25 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
js实现全选和全不选
2020/07/28 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
小学校园之星事迹材料
2014/05/16 职场文书
医学专业自荐信
2014/06/14 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
Python装饰器详细介绍
2022/03/25 Python