查找页面中所有类为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 相关文章推荐
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
ant design charts 获取后端接口数据展示
May 25 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脚本数据库功能详解(下)
2006/10/09 PHP
php xfocus防注入资料
2008/04/27 PHP
php读取xml实例代码
2010/01/28 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
Python:slice与indices的用法
2019/11/25 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
python 实现客户端与服务端的通信
2020/12/23 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
药剂专业求职信
2014/06/20 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
离婚律师函范本
2015/05/27 职场文书
催款函范本大全
2015/06/24 职场文书
环保建议书作文400字
2015/09/14 职场文书
Python基础之pandas数据合并
2021/04/27 Python
Python如何用re模块实现简易tokenizer
2022/05/02 Python