原生JS實現幾個常用DOM操作API實例

原生實現jQuery的sibling方法

成都創(chuàng)新互聯是一家專注于成都網站制作、成都做網站、外貿營銷網站建設和資陽移動機房的網絡公司，有著豐富的建站經驗和案例。

<body>
<span>我是span標簽</span>
<div>我是一個div</div>
<h2 id="h2">我是標題</h2>
<p>我是一個段落</p>
<script type="text/javascript">
//獲取元素的兄弟節(jié)點
function siblings(o){//參數o就是想取誰的兄弟節(jié)點，就把那個元素傳進去
var a = [];//定義一個數組，用來存儲o的兄弟元素
//previousSibling返回位于相同節(jié)點樹層級的前一個元素
var p = o.previousSibling;
while(p){//先取o的前面的兄弟元素 判斷有沒有上一個兄弟元素，如果有則往下執(zhí)行，p表示previousSibling
if(p.nodeType === 1){
a.push(p);
}
p = p.previousSibling//最后把上一個節(jié)點賦給p
}
a.reverse();//把順序反轉一下，這樣元素的順序就是按先后的了
//nextSibling返回位于相同節(jié)點樹層級的下一個節(jié)點
var n = o.nextSibling;//再取o下面的兄弟元素
while(n){//判斷有沒有下一個兄弟結點，n是nextSibling的意思
if(n.nodeType === 1){//判斷是否是元素節(jié)點
a.push(n);
}
n = n.nextSibling;
}
return a//最后按從老大到老小的順序，把這一組元素返回
}
var oH = document.getElementById("h2");
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 父節(jié)點
* @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實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯。

文章名稱：原生JS實現幾個常用DOM操作API實例
當前路徑：http://bm7419.com/article0/psdpio.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站營銷、營銷型網站建設、手機網站建設、企業(yè)建站、小程序開發(fā)、網站設計

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯

商城網站建設