原生實現jQuery的sibling方法
<body><span>我是span標簽</span><div>我是一個div</div><h1 id="h1">我是標題</h1><p>我是一個段落</p><script type="text/javascript">//獲取元素的兄弟節點function siblings(o){//參數o就是想取誰的兄弟節點，就把那個元素傳進去var a = [];//定義一個數組，用來存儲o的兄弟元素//previousSibling返回位于相同節點樹層級的前一個元素var p = o.previousSibling;while(p){//先取o的前面的兄弟元素 判斷有沒有上一個兄弟元素，如果有則往下執行，p表示previousSiblingif(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實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
