/* 2014年3月16号 常用DOM工具库*/
var DOM={};

DOM.getElesByClass=function (strClassName,context){
if(typeof strClassName){
context=context||document;

if(context.nodeType==1||context.nodeType==9){
if(context.getElementsByClassName)
return context.getElementsByClassName(strClassName);
var reg=/^\s+|\s+$/g;
strClassName=strClassName.replace(reg,"");
var aClass=strClassName.split(/\s+/);
var eles=context.getElementsByTagName("*");
for(var i=0;i<aClass.length;i++){
eles=byClass(aClass[i],eles);
}
return eles;
}else{
throw new Error("第二个参数类型错误");
}
}else{
throw new Error("第一个参数必需是一个字符串");
}

function byClass(strClassName,eles){
var reg=new RegExp("(^| )"+strClassName+"( |$)");
//var eles=document.getElementsByTagName("*");
var a=[];//把找到的放到这个数组里
for(var i=0,len=eles.length;i<len;i++){
var ele=eles[i];
if(reg.test(ele.className)){//5
a.push(ele);
}
}
return a;
}
}

DOM.addClass=function(ele,strClassName){
var reg=new RegExp("(?:^| )"+strClassName+"(?: |$)");
if(!reg.test(ele.className))
ele.className+=" "+strClassName;

}
DOM.removeClass=function(){
var reg=new RegExp("(?:^| )"+strClassName+"(?: |$)","g");
ele.className=ele.className.replace(reg,"");

}

DOM.getIndex=function(ele){
var pre=ele.previousSibling;
var n=0;
while(pre){
if(pre.nodeType===1){
n++
}
pre=pre.previousSibling;
}
return n;

}

DOM.offset=function(ele){
var l=ele.offsetLeft;
var t=ele.offsetTop;

var p=ele.offsetParent;
while(p){
if(window.navigator.userAgent.indexOf("MSIE 8")>-1){
l+=p.offsetLeft;
t+=p.offsetTop;
}else{
l+=p.offsetLeft+p.clientLeft;
t+=p.offsetTop+p.clientTop;
}
p=p.offsetParent;
}
return {left:l,top:t}
}

DOM.getChildren=function(ele,tagName){//tagName用来指定标签名
ele.children//获得子元素
var nodes=ele.childNodes;
var a=[];
if(tagName===undefined){//如果没有传第二参数
for(var i=0,len=nodes.length;i<len;i++){
var node=nodes[i];
if(node.nodeType===1){
a.push(node);
}
}
}else{
if(typeof tagName=="string"){
tagName=tagName.toUpperCase();
for(var i=0,len=nodes.length;i<len;i++){
var node=nodes[i];
if(node.nodeName===tagName){
a.push(node)
}
}
}else{
throw new Error("第二个参数类型错误");
}

}
return a;
}
DOM.preSiblings=function(ele){
var p=ele.previousSibling;
var a=[];
while(p){
if(p.nodeType===1){
a.push(p);
}
p=p.previousSibling;
}
a.reverse();
return a;

}
DOM.nextSiblings=function(ele){
var n=ele.nextSibling;
var a=[];
while(n){
if(n.nodeType===1){
a.push(n);
}
n=n.nextSibling;
}
return a;
}

DOM.siblings=function(ele){
return DOM.preSiblings(ele).concat(DOM.nextSiblings(ele));
}

【js】--常用DOM库工具的更多相关文章

  1. 【js常用DOM方法】

    介绍几个js DOM的常用方法 获取元素节点 getElementById  getElementsByTagName  getElementsByClassName 先写一个简单的网页做测试: /* ...

  2. js常用DOM操作

    在博客园看到了苏夏写的常用DOM整理文章,地址:http://www.cnblogs.com/cabbagen/p/4579412.html,然后抽时间都试了一下这些常用的DOM操作.在这里记录一下. ...

  3. vue.js 常用组件库

    vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github.io/#!/zh-cndem ...

  4. js 常用 DOM 元素宽高

    提示:document.documentElement 和 document.getElementsByTagName('html')[0] 是一样的: 1.视口大小(不包括滚动条,视口字面理解当然是 ...

  5. 爬虫05 /js加密/js逆向、常用抓包工具、移动端数据爬取

    爬虫05 /js加密/js逆向.常用抓包工具.移动端数据爬取 目录 爬虫05 /js加密/js逆向.常用抓包工具.移动端数据爬取 1. js加密.js逆向:案例1 2. js加密.js逆向:案例2 3 ...

  6. js常用工具类.

    一些js的工具类 复制代码 /** * Created by sevennight on 15-1-31. * js常用工具类 */ /** * 方法作用:[格式化时间] * 使用方法 * 示例: * ...

  7. Node.js 常用工具

    Node.js 常用工具 util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaScript 的功能 过于精简的不足. util.inherits util.inherit ...

  8. js常用的工具函数

    JS选取DOM元素的方法注意:原生JS选取DOM元素比使用jQuery类库选取要快很多1.通过ID选取元素document.getElementById('myid');2.通过CLASS选取元素do ...

  9. Node.js 常用工具util包

    Node.js 常用工具 util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaScript 的功能 过于精简的不足. util.isError(obj); util.is ...

随机推荐

  1. selenium登录 京东滑动验证码

    京东的滑动验证码在页面上是没有原图的,所有我是用ps把他们拼成一个的. from selenium import webdriver from selenium.webdriver import Ac ...

  2. [已读]Nodejs高级编程

    封面太让人想吐槽了,真的很像<javascript高级程序设计>有木有 内容我觉得还不错,流畅,见过的nodejs书籍中最详细的一本.很多书会把express及使用案例作为重点,但是它不是 ...

  3. Linux查看某个端口是否启动

    查看命令 netstat -an | 执行结果: [root@test ~]# netstat -an | tcp 0.0.0.0:* LISTEN 有tcp 这一行返回说明已开放

  4. 对象(Object)和类(Class)的关系?

    对象属于某一类,即对象是某一个类的实例.例如: Public Class Flight Private _name As String Public Property Name As String G ...

  5. webpack(2)

    在普通页面中使用render函数渲染组件 render:function(createElements){//createElements是一个方法,调用它,能够把指定的组件模板,渲染成为HTML结构 ...

  6. Selenium私房菜系列7 -- 玩转Selenium Server

    本篇主要是想更进一步介绍Selenium Server的工作原理,这次我们从Selenium Server的交互模式开始. 在<第一个Selenium RC测试案例>中,我们以命令“jav ...

  7. .NET 通过 NPOI 操作 Excel

    目录 .NET 通过 NPOI 操作 Excel 第一步:通过 NuGet 获取 NPOI 包并引入程序集 第二步:引入 NPOI 帮助类 第三步:在程序中调用相应的方法对数据进行导出导入操作 将 D ...

  8. js 分组数组

    思路: 1.先将数组按照一定规则排序: 2.再拆分数组到Map中,按Key分类: 3.再从Map中遍历取出要显示的内容: sortBroadList: function (broadcastList) ...

  9. (十二)maven之nexus仓库的基本用法

    nexus仓库的基本用法 ① 启动nexus. 上一章有提到:https://www.cnblogs.com/NYfor2018/p/9079068.html ② 访问http://localhost ...

  10. react中的setState的使用和深入理解

    前端框架从MVC过渡到MVVM.从DOM操作到数据驱动,一直在不断的进步着,提升着, angular中用的是watcher对象,vue是观察者模式,react就是state了,他们各有各的特点,没有好 ...