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

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

---

• getElementsByClassName()

<pre>
<code>
/**

• 获取指定类名的元素对象集合

• @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);
  }
  }
  </code>
  </pre>

• addLoadEvent()

<pre>
<code>
/**

• 方便的将在文档加载后运行的函数添加到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();
  }
  }
  }
  </code>
  </pre>

• addClass()

<pre>
<code>
/**

• 为指定元素结点添加新类名
• @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;
  }
  }
  </code>
  </pre>

• insertAfter()

<pre>
<code>
/**

• 在目标元素结点后面插入新的元素结点
• @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);
  }
  }
  </code>
  </pre>

• getNextElement()

<pre>
<code>
/**

• 获取下一个元素结点
• @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;
  }
  </code>
  </pre>

---

备注： HTML结点分为『元素结点』如<p> <li>、『属性结点』如id``title、『文本结点』指包含在元素结点内部的文本。