引言：HTML DOM提供了諸如 getElementsByTagName() getElementsByName() getElementById() createElement() appendChild() removeChild() replaceChild() insertBefore() createTextNode() 的方法，然而在實(shí)際工作中，特別是在不引入jQuery等第三方庫的情況下，我們還需要getElementsByClass() insertAfter 等方法，所以把平時(shí)積累的幾個(gè)方法整理出來。

• getElementsByClassName()

<pre>
<code>
/**

• 獲取指定類名的元素對象集合

• @param {Object} node 父節(jié)點(diǎn)

• @param {String} classname 指定類名

• @return {[Object]}目標(biāo)對象集合
  /
  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>
/**

• 方便的將在文檔加載后運(yùn)行的函數(shù)添加到window.onload中
• @param {function} func 待運(yùn)行函數(shù)
  */
  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>
/**

• 為指定元素結(jié)點(diǎn)添加新類名
• @param {Object} element 元素結(jié)點(diǎn)
• @param {String} value 類名
  */
  function addClass(element,value){
  if(!element.className){
  element.className = value;
  }else{
  newClassName = element.className;
  //多個(gè)類名間添加空格
  newClassName += ' ';
  newClassName += value;
  element.className = newClassName;
  }
  }
  </code>
  </pre>

• insertAfter()

<pre>
<code>
/**

• 在目標(biāo)元素結(jié)點(diǎn)后面插入新的元素結(jié)點(diǎn)
• @param {Object} newElement 待插入的新元素結(jié)點(diǎn)
• @param {Object} targetElement 目標(biāo)元素結(jié)點(diǎn)
  */
  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>
/**

• 獲取下一個(gè)元素結(jié)點(diǎn)
• @param {Object} node 兄結(jié)點(diǎn)
• @return {Object || null}下一個(gè)元素結(jié)點(diǎn)或未獲取到
  */
  function getNextElement(node){
  var sibNode = node.nextSibling;
  if (sibNode.nodeType == 1) {
  return node;
  }
  if (sibNode.nextSibling) {
  //遞歸調(diào)用
  return getNextElement(node.nextSibling);
  }
  return null;
  }
  </code>
  </pre>

備注： HTML結(jié)點(diǎn)分為『元素結(jié)點(diǎn)』如<p> <li>、『屬性結(jié)點(diǎn)』如id``title、『文本結(jié)點(diǎn)』指包含在元素結(jié)點(diǎn)內(nèi)部的文本。