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

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

本文将介绍如何使用原生JavaScript实现一些常用的DOM操作API实例，包括类似jQuery的sibling方法、class选择器，以及一些常用的DOM操作函数如getElementsByClassName、addLoadEvent、addClass、insertAfter和getNextElement等。

原生实现jQuery的sibling方法

原生实现jQuery的class选择器

// 用数组模拟jQuery的class选择器
function getClassName(ParentId, NewClassName) {
  var AllClassElem = ParentId.getElementsByTagName("*");
  var AllClass = [];
  var i = 0;
  for (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 = [];
      var els = node.getElementsByTagName("*");
      var elsLen = els.length;
      var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
      var 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;
}

以上就是使用原生JavaScript实现几个常用DOM操作API实例的全部内容，希望能给大家一个参考。