原生JS实现几个常用DOM操作API实例
原生实现jQuery的sibling方法
成都创新互联是一家专注于成都网站制作、成都做网站、外贸营销网站建设和资阳移动机房的网络公司,有着丰富的建站经验和案例。
我是span标签我是一个div我是标题
我是一个段落
原生实现jQuery的class选择器
//用数组模拟jQuery的class选择器 function getClassName(ParentId,NewClassName){ var AllClassElem = ParentId.getElementsByTagName(“*”); var AllClass = []; var i=0; for(var i=0; i
}
//用法:
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 = [], 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()
/** * 为指定元素结点添加新类名 * 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; }
以上这篇原生JS实现几个常用DOM操作API实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持创新互联。
分享题目:原生JS实现几个常用DOM操作API实例
网站地址:http://ybzwz.com/article/psdpio.html