原生实现jQuery的sibling方法

<body>

<span>我是span标签</span>

<div>我是一个div</div>

<h1 id="h1">我是标题</h1>

<p>我是一个段落</p>

<script type="text/javascript">

//获取元素的兄弟节点

function siblings(o){//参数o就是想取谁的兄弟节点，就把那个元素传进去

var a = [];//定义一个数组，用来存储o的兄弟元素

//previousSibling返回位于相同节点树层级的前一个元素

var p = o.previousSibling;

while(p){//先取o的前面的兄弟元素 判断有没有上一个兄弟元素，如果有则往下执行，p表示previousSibling

if(p.nodeType === 1){

a.push(p);

}

p = p.previousSibling//最后把上一个节点赋给p

}

a.reverse();//把顺序反转一下，这样元素的顺序就是按先后的了

//nextSibling返回位于相同节点树层级的下一个节点

var n = o.nextSibling;//再取o下面的兄弟元素

while(n){//判断有没有下一个兄弟结点，n是nextSibling的意思

if(n.nodeType === 1){//判断是否是元素节点

a.push(n);

}

n = n.nextSibling;

}

return a//最后按从老大到老小的顺序，把这一组元素返回

}

var oH = document.getElementById("h1");

console.log(siblings(oH));//[span, div, p, script]

</script>

</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

原生实现jQuery的class选择器

//用数组模拟jQuery的class选择器

function getClassName(ParentId,NewClassName){

var AllClassElem = ParentId.getElementsByTagName(“*”);

var AllClass = [];

var i=0;

for(var i=0; i<AllClassElem.length; i++){

if(AllClassElem[i].className == NewClassName){

AllClass.push(AllClassElem[i]);

}

}

return AllClass;

}

//用法：

var PElementId=document.getElementById("bar");

var  buttons = getClassName(PElementId,"sco");

//取id="bar"下class="sco"的元素；
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

getElementsByClassName()

/**

* 获取指定类名的元素对象集合

* @param {Object} node 父节点

* @param {String} classname 指定类名

* @return {[Object]}目标对象集合

*/

function getElementsByClassName(node,classname) {

//如果浏览器支持则直接使用

  if (node.getElementsByClassName) {

    return node.getElementsByClassName(classname);

  } else {

    return (function getElementsByClass(searchClass,node) {

        if ( node == null )

          node = document;

        var classElements = [],

            els = node.getElementsByTagName("*"),

            elsLen = els.length,

            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {

          if ( pattern.test(els[i].className) ) {

              classElements[j] = els[i];

              j++;

          }

        }

        return classElements;

    })(classname, node);

  }

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

addLoadEvent()

/**

* 方便的将在文档加载后运行的函数添加到window.onload中

* @param {function} func 待运行函数

*/

function addLoadEvent(func){

    var oldOnload = window.onload;

    //typeof 返回String类型

    if(typeof window.onload != 'function'){

        window.onload = func;

    }else{

        window.onload = function(){

            oldOnload();

            func();

        }

    }

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

addClass()

/**

* 为指定元素结点添加新类名

* element 元素结点

* value 类名

*/

function addClass(element,value){

//如果元素类名为空，直接将value赋值给相应的元素类名

    if(!element.className){

        element.className = value;

    }else{

    //否则需要将类名之间用空格隔开

        newClassName = element.className;

        //多个类名间添加空格

        newClassName += ' ';

        newClassName += value;

        element.className = newClassName;

    }

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

insertAfter()

/**

* 在目标元素结点后面插入新的元素结点

* newElement 待插入的新元素结点

* targetElement 目标元素结点

*/

function insertAfter(newElement,targetElement){

    var parent = targetElement.parentNode;

    if(parent.lastChild == targetElement){

        parent.appendChild(newElement);

    }else{

        parent.insertBefore(newElement,targetElement.nextSibling);

    }

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

getNextElement()

/**

* 获取下一个元素结点

* @param {Object} node  兄结点

* @return {Object || null}下一个元素结点或未获取到

*/

function getNextElement(node){

        var sibNode = node.nextSibling;

    if (sibNode.nodeType == 1) {

        return node;

    }

    if (sibNode.nextSibling) {

        //递归调用

        return getNextElement(node.nextSibling);

    }

    return null;

}

原生JS实现几个常用DOM操作API的更多相关文章

  1. 将原生JS和jquery里面的DOM操作进行了一下整理

    创建元素节点 1.原生: document.createElement("div") 2.jquery: $("<div></div>" ...

  2. js常用DOM操作

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

  3. 关于js封装框架类库之DOM操作模块（二）

    上一篇基本实现了框架结构,但是与真正能用上的项目框架比较还是存在很多不足,在这又做了些加强与优化 (function ( window, undefined ) { var arr = [], pus ...

  4. 原生js获得八种方式,事件操作

    08.17自我总结 关于js 一.原生js获得八种方式 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTa ...

  5. 关于js封装框架类库之DOM操作模块（一）

    在前端开发的过程中,javascript极为重要的一个功能就是对DOM对象的操作,而对其封装就是为了更好地进行DOM操作,提高浏览器的支持效率 现在给出一个案例:页面创建三个div,然后给其添加样式 ...

  6. Js 常用字符串操作 API

    常用的一些字符串操作 API 整理 1.str.charAt(index).str.charCodeAt(index) - 返回指定位置的字符 / 字符编码(0~65535) index - 必须,表 ...

  7. 总结js常用的dom操作（js的dom操作API）

    转载:https://www.haorooms.com/post/js_dom_api 前言 很多同学用惯了jquery操作dom,让他们用js操作的时候,常常力不从心,本文总结了常用的js的dom操 ...

  8. JS中常见原生DOM操作API

    摘自:https://blog.csdn.net/hj7jay/article/details/53389522 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它, ...

  9. 从JS和jQuery浅谈DOM操作，当我们在获取时，究竟获取了什么

    0.写在前面的话 自己对前端的东西一直不是很熟,现在开始要想办法从前端各个地方去获取想要的属性值的时候,也基本是在网上现炒现卖,几周下来,发现自己还是迷迷糊糊,可以算是一无所获. 所以就抽时间,把这一 ...

随机推荐

  1. Maven-02: 依赖

    其实一个依赖声明可以包含如下的一些元素: groupId,artifactId,version:依赖的基本坐标. type:依赖的类型,对应于项目坐标定义的packaging.大多数情况下,该元素不必 ...

  2. MYSQL数据库学习十一 多表数据记录查询

    11.1 关系数据操作 并(UNION):把具有相同字段数目和字段类型的表合并到一起. 笛卡尔积(CARTESIAN PRODUCT):没有连接条件表关系的返回结果.字段数=table1字段数+tab ...

  3. java排序算法（五）：快速排序

    java排序算法(五):快速排序 快速排序是一个速度非常快的交换排序算法,它的基本思路很简单,从待排的数据序列中任取一个数据(如第一个数据)作为分界值,所有比它小的元素放到左边.所有比它大的元素放到右 ...

  4. 安装php扩展 ffmpeg-php

    环境: CentOS 6.5 PHP5.6 安装前php 已加载GD 模块(yum install php-gd)1.添加ffmpeg和ffmpeg-devel源 cat > /etc/yum. ...

  5. NSURLSession http转Https

    1.设置代理 NSURLSession *sesson = [NSURLSession sessionWithConfiguration:[NSURLSessionConfiguration defa ...

  6. python 函数基础2

    一.什么是命名关键字参数? 格式: 在*后面参数都是命名关键字参数. 特点:1.约束函数的调用者必须按照Kye=value的形式传值. 2,.约束函数的调用者必须用我们指定的Key名. def aut ...

  7. CSS速查列表-2-(text)文本

    CSS的Text属性可以改变页面中 1.文本的颜色(color). 2.字符间距(word-spacing ) 属性可以改变字(单词)之间的标准间隔.其默认值 normal 与设置值为 0 是一样的 ...

  8. 下一个ajax异步请求被挂起问题

    异步请求按理来说应该是会不受其它ajax请求影响的,但如果是服务端访问了Session就不能这么说了. 了解了asp.net的会话管理,那我们来看看今天要谈到的主题: IReadOnlySession ...

  9. Python 双向链表

    操作 is_empty() 链表是否为空 length() 链表长度 travel() 遍历链表 add(item) 链表头部添加 append(item) 链表尾部添加 insert(pos, it ...

  10. decltype操作符

    关于decltype操作符的说明: 1.在C++中,decltype作为操作符,用于查询表达式的数据类型.decltype在C++11标准制定时引入,主要是为泛型编程而设计,以解决泛型编程中,由于有些 ...