javascript原生选择器的一些基本方法

来源：互联网发布：windows最新服务器系统编辑：程序博客网时间：2024/04/30 15:37

在这里仅仅只是个人最近对javascript学习过程当中的一段记录，如有不正确的位置敬请指导：

首先对一些简单的选择方法进行封装

一。首先是一个简单的html文件没有任何的样式添加

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>原生js选择元素</title></head><body><div id="cont"><p>pm</p><p>am</p><ul><li>HelloWorld</li><li>Hello</li><li>World</li><li>HelloWorldGoodDay</li></ul><div id="divlist"><div style="display:none">1111111111111111111111111</div><div style="display:none" style="display:none" style="display:none">2222222222</div><div style="display:none" style="display:none">333333331</div><div style="display:none">4444444444444444411111111111111111</div></div></div></body></html>

二。js文件如下，这几个方法都是通过一个简单的循环，然后进行一点点判断排除或者选择匹配元素得到结果，也不知道有没更好的方法，在研究原生的同时，我也很努力的去看jQuery框架中是如何如何对这些方法进行封装的，不过大同小异，在算法上有很多的优化，逻辑上也比较严谨，这是现在的我所不能达到的，剩下的路还有很多东西要学，鸭梨山大啊！！！

a.一些对象元素的创建

var divlist = document.getElementById("divlist");var tagul = document.getElementsByTagName("ul")[0];var tagli = document.getElementsByTagName("li");

b.匹配所有的兄弟元素

function siblings(elem){var a = [];var p = elem.parentNode.children;for(var i =0,pl = p.length;i<pl;i++){if(p[i] != elem){a.push(p[i]);}}return a;}

console.log(siblings(tagul) );

c.以下二个方法都是通过父类去查找子类，想直接操作自身把children去掉就行

1匹配元素的子类所有索引值为偶数

function odd(obj){var a = []; //声明一个集合a用于存放匹配元素for(var i=0,len = obj.children.length;i<len;i+=2){a.push(obj.children[i]);}//循环得到匹配元素return a;};

console.log(odd(tagul));//[li, li]

2匹配某元素子类中所有大于给定索引的元素

function gt(obj,index){var a = [];for(var i= obj.children.length-1;i>index;i--){a.push(obj.children[i]);}return a;}

console.log(gt(divlist,1));

3获取当前点击对象的索引

function index(cur,obj){for(var i=0; i<obj.length;i++){if(obj[i] == cur){return i;}}}

还有上一个兄弟节点，奇数其他的在这里就不一一去列举了，以上的方法仅供参考，如果有什么bug或者没有涉及到的还请提出，必更正。。。

0 0