原生实现jQuery的sibling方法

我是span标签
我是一个div
我是标题
我是一个段落

原生实现jQuery的class选择器

//用数组模拟jQuery的class选择器
function getClassName(ParentId,NewClassName){
var AllClassElem = ParentId.getElementsByTagName(“*”);
var AllClass = [];
var i=0;
for(var i=0; i
}
//用法：
var PElementId=document.getElementById("bar");
var buttons = getClassName(PElementId,"sco");
//取id="bar"下class="sco"的元素；

getElementsByClassName()

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

function addLoadEvent(func){
  var oldonload = window.onload;
  //typeof 返回String类型
  if(typeof window.onload != 'function'){
    window.onload = func;
  }else{
    window.onload = function(){
      oldonload();
      func();
    }
  }
}

addClass()

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

insertAfter()

function insertAfter(newElement,targetElement){
  var parent = targetElement.parentNode;
  if(parent.lastChild == targetElement){
    parent.appendChild(newElement);
  }else{
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

getNextElement()

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