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

2014-06-11 本文已影响994人一色

引言：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 &#60; 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、『文本结点』指包含在元素结点内部的文本。

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

猜你喜欢

热点阅读