原生实现jQuery的sibling方法
<body> <span>我是span标签</span> <div>我是一个div</div> <h1>我是标题</h1> <p>我是一个段落</p> <script type="text/javascript"> //获取元素的兄弟节点 function siblings(o){//参数o就是想取谁的兄弟节点，就把那个元素传进去 var a = [];//定义一个数组，用来存储o的兄弟元素 //previousSibling返回位于相同节点树层级的前一个元素 var p = o.previousSibling; while(p){//先取o的前面的兄弟元素 判断有没有上一个兄弟元素，如果有则往下执行，p表示previousSibling if(p.nodeType === 1){ a.push(p); } p = p.previousSibling//最后把上一个节点赋给p } a.reverse();//把顺序反转一下，这样元素的顺序就是按先后的了 //nextSibling返回位于相同节点树层级的下一个节点 var n = o.nextSibling;//再取o下面的兄弟元素 while(n){//判断有没有下一个兄弟结点，n是nextSibling的意思 if(n.nodeType === 1){//判断是否是元素节点 a.push(n); } n = n.nextSibling; } return a//最后按从老大到老小的顺序，把这一组元素返回 } var oH = document.getElementById("h1"); console.log(siblings(oH));//[span, div, p, script] </script> </body>
原生实现jQuery的class选择器
//用数组模拟jQuery的class选择器 function getClassName(ParentId,NewClassName){ var AllClassElem = ParentId.getElementsByTagName(“*”); var AllClass = []; var i=0; for(var i=0; i<AllClassElem.length; i++){ if(AllClassElem[i].className == NewClassName){ AllClass.push(AllClassElem[i]); } } return AllClass;
}
//用法：
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实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: