原生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 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
node.js实现上传文件功能
Jul 15 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 Javascript
js实现弹框效果
Mar 24 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
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
PHP实现微信发红包程序
2015/08/24 PHP
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
Python中splitlines()方法的使用简介
2015/05/20 Python
Python网站验证码识别
2016/01/25 Python
PyQt5每天必学之组合框
2018/04/20 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
python sorted方法和列表使用解析
2019/11/18 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
爱之链教学反思
2014/04/30 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
司机岗位职责说明书
2014/07/29 职场文书
大学生自荐书范文
2015/03/05 职场文书
七夕情人节问候语
2015/11/11 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers