javascript獲取元素封裝程式碼例項

admin發表於2017-04-12
JavaScript封裝

在jQuery中提供了各種獲取元素的封裝方法，當然這都是原生的javascript實現的。

在這裡我們自己也來封裝一個能夠實現獲取元素物件的封裝效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box li {
  width: 350px;
  height: 25px;
  line-height: 25px;
  font-size: 12px;
}
</style>
<script type="text/javascript">
function $(str,oPar){
  var a=oPar?oPar.querySelectorAll(str):document.querySelectorAll(str);
  if(str.indexOf("#")!=-1){
    a[0].index=0;
    return a[0]
  }
  else {
    for (var index = 0, len = a.length; index < len; index++) {
      a[index].index = index;
    }
    return a;
  }
}
window.onload = function () {
  var obox = document.getElementById("box");
  var lis=$(".antzone", obox);
  alert(lis[0].innerHTML);
}
</script>
</head>
<body>
<ul id="box">
  <li>螞蟻部落歡迎您，只有努力才會有美好的未來</li>
  <li class="antzone">每一天都是新的，必須要好好把握。</li>
  <li>沒有人一開始就是高手，必須要努力奮鬥。</li>
  <li>未來都是虛無縹緲的，只有當前是現實。</li>
  <li>分享和互助式進步的最大原動力</li>
  <li>本站的url地址是www.softwhy.com。</li>
</ul>
</body>
</html>

程式碼的核心是$()方法，下面對其做一下分析:

一.程式碼註釋:

（1）.function $(str,oPar){}，此方法能夠返回一個元素集合或者元素，第一個引數是一個css選擇器，第二個限定匹配範圍的父元素。

（2）.var a=oPar?oPar.querySelectorAll(str):document.querySelectorAll(str)，如果存在父元素，那麼就使用此父元素呼叫querySelectorAll()方法，否則使用document物件呼叫。

（3）.if(str.indexOf("#")!=-1){

  a[0].index=0;

  return a[0]

}，如果是ID選擇器，那麼給此元素新增一個自定義index屬性，屬性值設定為0。

並返回此元素。

querySelectorAll()返回的總是一個集合，即便使用的是id選擇器。

（4）.else {

  for (var index = 0, len = a.length; index < len; index++) {

    a[index].index = index;

  }

  return a;

}，否則通過遍歷的方式設定每一個元素的自定義index屬性值。

二.相關閱讀:

（1）.querySelectorAll()可以參閱document.querySelectorAll()一章節。

（2）.indexOf()可以參閱javascript indexOf()一章節。

相關文章