您的位置：首页 > Web前端 > JavaScript

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

2014-03-27 11:05 537 查看

在这里仅仅只是个人最近对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或者没有涉及到的还请提出，必更正。。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript html css 原生查找操作

相关文章推荐

新的分享

章节导航