原生JS实现几个常用DOM操作API实例


Posted in Javascript onJanuary 19, 2017

原生实现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>

原生实现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"的元素;

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);
 }
}

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();
    }
  }
}

addClass()

/**
* 为指定元素结点添加新类名
* element 元素结点
* value 类名
*/
function addClass(element,value){
//如果元素类名为空,直接将value赋值给相应的元素类名
  if(!element.className){
    element.className = value;
  }else{
  //否则需要将类名之间用空格隔开
    newClassName = element.className;
    //多个类名间添加空格
    newClassName += ' ';
    newClassName += value;
    element.className = newClassName;
  }
}

insertAfter()

/**
* 在目标元素结点后面插入新的元素结点
* newElement 待插入的新元素结点
* targetElement 目标元素结点
*/
function insertAfter(newElement,targetElement){
  var parent = targetElement.parentNode;
  if(parent.lastChild == targetElement){
    parent.appendChild(newElement);
  }else{
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

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实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 最简单易用的表单验证插件
Feb 27 Javascript
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 Javascript
JS生成一维码(条形码)功能示例
Jan 19 #Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 #Javascript
javascript中json基础知识详解
Jan 19 #Javascript
JavaScript实现垂直滚动条效果
Jan 18 #Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 #Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 #Javascript
基于JavaScript实现窗口拖动效果
Jan 18 #Javascript
You might like
一个查看session内容的函数
2006/10/09 PHP
深入解析php之sphinx
2013/05/15 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
PHP面试题及答案二
2015/05/23 面试题
长青弘远的面试题
2012/06/09 面试题
银行会计业务的个人自我评价
2013/11/02 职场文书
高中军训感言1000字
2014/03/01 职场文书
竞争上岗实施方案
2014/03/21 职场文书
大学军训决心书
2015/02/05 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python