查找页面中所有类为test的结点的方法

前言

阿里巴巴，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)

相关推荐

  • 查找页面中所有类为test的结点的方法

    查找页面中所有类为test的结点的方法

    前言 阿里巴巴,web前端实习生要在线考试了.确实对于菜鸟的我还是恶补一下知识先.所以百度谷歌了之前阿里巴巴校招的前端笔试题,觉得自己真的被鄙视了,完全做不懂的.啊里巴巴的web前端是在线的笔试,是不是给我们百度谷歌的机会呢? 看见这道题目的时候,觉得确实自己应该去封装一些你常用的方法,就像jquery那样.做出一些方法,是实现浏览器兼容的,或者是工具类,确实对以后开发还是有利的. HTML 为了方便说明,我们先写下HTML 复制代码 代码如下: <p class="A B"&g

  • JS检测页面中哪个HTML标签触发点击事件的方法

    本文实例讲述了JS检测页面中哪个HTML标签触发点击事件的方法.分享给大家供大家参考,具体如下: 在html标签中,为了页面显示的美观,会在标签中相互嵌套,在做"效果"的时候就难免不了的添加各种事件,例如: <a href=""><span onclick="">dddd</span></a> 当用户点击的时候,想确定是链接产生的事件还是span标签onclick标签产生的事件,这个有时候是很有必要

  • 利用JS屏蔽页面中的Enter按键提交表单的方法

    如在设置了JS代码响应<p>标签的Enter按键触发事件时,根据冒泡型事件原则该事件会一直传到<from>表单处,并将表单提交.这不是我们想要的效果,我们可以设置如下代码来加以屏蔽: $(document).keydown(function(event){ switch(event.keyCode){ case 13:return false; } }); 但是,如果页面中有按钮时在Opera浏览器中同样会提交表单,这是因为按钮在生成的HTML代码中是submit类型的,解决办法是

  • JSP页面中超链接传递中文参数出现乱码问题解决方法

    本文实例讲述了JSP页面中超链接传递中文参数出现乱码问题解决方法.分享给大家供大家参考,具体如下: 这里分析超链接传递中文参数,在接受页面中出现乱码问题的解决方法. 解决方法: 在接受页面里可以如下处理, 复制代码 代码如下: <%=new String(request.getParameter("变量名字").getBytes("ISO-8859-1")) %> 注意这里用的是 new String() 创建一个新的字符串 例题: 页面一: <h

  • C#中枚举类型和radiobox关联操作的方法

    本文实例讲述了C#中枚举类型和radiobox关联操作的方法.分享给大家供大家参考.具体分析如下: 有了enum我们可以列举类型了,有了单选框和复选框我们可以鼠标来选择了.但是编程的时候觉得让两个关联起来,写代码比较麻烦,所以想自动的关联起来.所以我尝试了一下,记录如下. 假如一个星期的enum: public enum 星期 { 星期一 = 0, 星期二, 星期三, 星期四, 星期五, 星期六, 星期天 } 关联到7个RadioButton,也就是单选框. 第一步在enum中定义星期一=0:

  • PHP查找数组中只出现一次的数字实现方法【查找特定元素】

    本文实例讲述了PHP查找数组中只出现一次的数字实现方法.分享给大家供大家参考,具体如下: 问题: 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 实现代码如下: <?php function FindNumsAppearOnce($array) { // write code here // return list, 比如[a,b],其中ab是出现一次的两个数字 $count = array_count_values($array); foreach

  • Python 查找list中的某个元素的所有的下标方法

    如下所示: #!/usr/bin/env python #_*_ coding:utf-8 _*_ name = ['hello', 'world', 'a', 'b', 'c', 1, 2, 3, 'hello', 'world', 'a', 'b', 'c', 1, 2, 3] first_pos = 0 for i in range(name.count(2)): new_list = name[first_pos:] next_pos = new_list.index(2) + 1 pr

  • Java中Thread类详解及常用的方法

    Java中Thread类详解及常用的方法

    目录 一.Thread 的常见构造方法 二.Thread 的常见属性 三.创建线程 四.中断线程 五.线程等待 六.获取线程引用 七.线程休眠 八.线程状态 总结 一.Thread 的常见构造方法 方法 说明 Thread() 创建线程对象 Thread(Runnable target) 使用 Runnable 对象创建线程对象 Thread(String name) 创建线程对象并命名 Thread(Runnable target,String name) 使用 Runnable 对象创建线程

  • kotlin中数据类重写setter getter的正确方法

    概述 在开发过程中,经常会创建一些数据里,其没有任何逻辑功能,仅仅来用来保存数据.在Kolin中,将这些类统一称为数据类,用关键字data标记. data class User(val name: String, val age: Int) 编译器会根据主构造器中声明的全部属性, 自动推断产生以下成员函数: equals()/hashCode()函数对, toString() 函数, 输出格式为 "User(name=John, age=42)" , componentN() 函数群,

  • Python3查找列表中重复元素的个数的3种方法详解

    方法一: mylist = [1,2,2,2,2,3,3,3,4,4,4,4] myset = set(mylist) for item in myset: print("the %d has found %d" %(item,mylist.count(item))) the 1 has found 1 the 2 has found 4 the 3 has found 3 the 4 has found 4 方法二: from collections import Counter C

随机推荐