原生JS实现几个常用HTML DOM增强API

引言：HTML DOM提供了诸如 getElementsByTagName() getElementsByName() getElementById() createElement() appendChild() removeChild() replaceChild() insertBefore() createTextNode() 的方法，然而在实际工作中，特别是在不引入jQuery等第三方库的情况下，我们还需要getElementsByClass() insertAfter 等方法，所以把平时积累的几个方法整理出来。

---

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

 
 /**
 
 
 
  
为指定元素结点添加新类名
 
  
@param {Object} element 元素结点
 
  
@param {String} value 类名
 */
 function addClass(element,value){
 if(!element.className){
 element.className = value;
 }else{
 newClassName = element.className;
 //多个类名间添加空格
 newClassName += ' ';
 newClassName += value;
 element.className = newClassName;
 }
 }
 
 

• insertAfter()

 
 /**
 
 
 
  
在目标元素结点后面插入新的元素结点
 
  
@param {Object} newElement 待插入的新元素结点
 
  
@param {Object} 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;
 }
 
 

---

备注： HTML结点分为『元素结点』如

、『属性结点』如id``title、『文本结点』指包含在元素结点内部的文本。