查找页面中所有类为test的结点
来源:互联网 发布:金10数据官网手机版 编辑:程序博客网 时间:2024/05/16 10:53
前言
阿里巴巴,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)
确实这个方法,我觉得应该就能解决上面的问题了,但是看了它的兼容性,我觉得应该还是另找方法吧。
2 querySelectorAll
console.log(document.querySelectorAll (".A"));console.log(document.querySelectorAll (".B,.A"));我们来看看结果是什么?跟上面有什么区别?
第二个的结果不一样,原来querySelectorAll参数,如果有两个的话,要用逗号分隔,其实它表示的意思是有A样式或者B样式的结点都可以匹配。
其实这个方法的兼容性也不是很好
基于上面兼容性的问题(毕竟在中国浏览器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; }
0 0
- 查找页面中所有类为test的结点
- 2.2删除带头结点的L中所有值为x的结点
- 二叉树中查找值为x的结点,打印x结点的全部祖先
- 设计一个递归算法,删除不带头结点的单链表L中所有值为x的结点
- 求二叉树中结点值的和为指定整数的所有路径
- 打印出二叉树中结点值的和为输入整数的所有路径
- 在二叉树t中查找值为x的结点
- 获取页面中所有类型为text的input控件
- php:查找页面上的所有链接
- php查找页面上的所有链接
- 删除二叉树中的度数为1的所有结点
- 递归在单链表中查找某个值为data的结点
- 以指针和引用两种参数实现删除单链表L中所有值为X的结点的函数
- 《剑指Offer》面试题:打印出二叉树中结点值的和为输入整数的所有路径
- 【算法-java】打印出二叉树中结点值的和为输入整数的所有路径
- 编写算法函数linklist delallx(linklist head, int x),删除带头结点单链表head中所有值为x的结点。
- BST中所有结点之和(设结点个数为n,且中序遍历为等差数列)
- 在二叉树中找值为x的结点(假设所有结点的值都不一样)
- 第三周作业--冒泡排序和归并排序
- android 实战练习 回归手机卫士 二 首页手机防盗 AlertDialog对话框
- Linux下MySQL 5.5的修改字符集编码为UTF8(彻底解决中文乱码问题)
- Google后Hadoop时代的新“三驾马车”——Caffeine、Pregel、Dremel
- 安装snmp服务
- 查找页面中所有类为test的结点
- HDU 2153 仙人球的残影
- 基于OpenLayers的代理文件内容 GeoServerProxy?URL
- C++11 性能Range-based for loops
- ubuntu下ftp的设置及登录
- “微风”团队的人员结构
- java的23种设计模式
- Hibernate实战_笔记29(每个类层次结构一张表)
- Android开发有关设置跳转网络设置界面出错的分析