新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
原生JS實(shí)現(xiàn)幾個(gè)常用DOM操作API實(shí)例
原生實(shí)現(xiàn)jQuery的sibling方法
成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)和資陽(yáng)移動(dòng)機(jī)房的網(wǎng)絡(luò)公司,有著豐富的建站經(jīng)驗(yàn)和案例。
我是span標(biāo)簽我是一個(gè)div我是標(biāo)題
我是一個(gè)段落
原生實(shí)現(xiàn)jQuery的class選擇器
//用數(shù)組模擬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()
/** * 獲取指定類名的元素對(duì)象集合 * @param {Object} node 父節(jié)點(diǎn) * @param {String} classname 指定類名 * @return {[Object]}目標(biāo)對(duì)象集合 */ 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()
/** * 方便的將在文檔加載后運(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(); } } }
addClass()
/** * 為指定元素結(jié)點(diǎn)添加新類名 * element 元素結(jié)點(diǎn) * value 類名 */ function addClass(element,value){ //如果元素類名為空,直接將value賦值給相應(yīng)的元素類名 if(!element.className){ element.className = value; }else{ //否則需要將類名之間用空格隔開(kāi) newClassName = element.className; //多個(gè)類名間添加空格 newClassName += ' '; newClassName += value; element.className = newClassName; } }
insertAfter()
/** * 在目標(biāo)元素結(jié)點(diǎn)后面插入新的元素結(jié)點(diǎn) * newElement 待插入的新元素結(jié)點(diǎn) * 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); } }
getNextElement()
/** * 獲取下一個(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; }
以上這篇原生JS實(shí)現(xiàn)幾個(gè)常用DOM操作API實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持創(chuàng)新互聯(lián)。
文章標(biāo)題:原生JS實(shí)現(xiàn)幾個(gè)常用DOM操作API實(shí)例
URL鏈接:http://fisionsoft.com.cn/article/psdpio.html