原生实现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. centos7下更改docker镜像和容器的默认路径

    笔者近期在服务器上搭建docker环境,可由于笔者是普通用户,在安装的时候就跳了很多坑,现在记录一下. 一.docker权限问题 据官方解释,搭建docker环境必须使用root权限,或者sudo装, ...

  2. Spring boot(4)-应用打包部署

    1.Spring Boot内置web spring Boot 其默认是集成web容器的,启动方式由像普通Java程序一样,main函数入口启动.其内置Tomcat容器或Jetty容器,具体由配置来决定 ...

  3. 【Java】 重拾Java入门

    [概论与基本语法] 取这个标题,还是感觉有些大言不惭.之前大三的时候自学过一些基本的java知识,大概到了能独立写一个GUI出来的水平把,不过后来随着有了其他目标,就把这块放下了.之后常年没有用,早就 ...

  4. 获取请求主机IP地址,如果通过代理进来，则透过防火墙获取真实IP地址;

    package com.utils; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import javax.servlet.htt ...

  5. android中与SQLite数据库相关的类

    为什么要在应用程序中使用数据库?数据库最主要的用途就是作为数据的存储容器,另外,由于可以很方便的将应用程序中的数据结构(比如C语言中的结构体)转化成数据库的表,这样我们就可以通过操作数据库来替代写一堆 ...

  6. python全栈开发-Day11 迭代器、生成器、面向过程编程

    一. 迭代器 一 .迭代的概念 迭代器即迭代的工具,那什么是迭代呢? 迭代是一个重复的过程,每次重复即一次迭代,并且每次迭代的结果都是下一次迭代的初始值 while True: #只是单纯地重复,因而 ...

  7. Python-turtle库知识小结（python绘图工具）

    turtle:海龟(海龟库) Turtle库是Python语言中一个很流行的绘制图像的函数库 使用之前需要导入库:import turtle • turtle.setup(width,height,s ...

  8. （译文）开始学习Vue——构建你的第一个Vue应用

    我们要构建如下组件:(最终代码在这里:https://codesandbox.io/s/38k1y8x375) 开始 Vue是支持单文件组件的,但是我们不准备这么做.你也可以构建一个全局的组件,通过V ...

  9. 使用linux下的crontab定时任务跑定时脚本

    使用linux下的crontab定时任务跑定时脚本 tags:定时任务 定时脚本 crontab linux定时脚本 linux 引言:应该有许多人曾经很好奇一些定时脚本是怎么做出来的.我们这次就来说 ...

  10. MySql使用存储过程实现事务的提交或者回滚

    DELIMITER $$ DROP PROCEDURE IF EXISTS test_sp1 $$ CREATE PROCEDURE test_sp1( ) BEGIN ; ; START TRANS ...