当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 原生JS实现几个常用DOM操作API实例

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

2019年05月24日  | 移动技术网IT编程  | 我要评论

原生实现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实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网