js 物件反射使用程式碼例項

antzone發表於2017-04-06
JS物件反射

本文分享一段程式碼例項，它演示了物件反射的使用。

js物件反射用法，涉及反射DOM物件和自定義物件，需要的朋友可以做一下參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#show{
  width:400px;height:300px;
  border:red solid 1px;
  overflow:scroll;
}
#main{
  width:500px;
  text-align:left;
  margin-left:auto;
  margin-right:auto;
}
</style>
<script type='text/javascript'>
//生成選擇的反射物件並反射
function SwitchObj(){
 var obj;
 var switchobj=document.getElementById('selects');
 if(switchobj.value=="op_div"){
      obj=document.createElement("div");
  }
 if(switchobj.value=="op_select"){
      obj=document.createElement("select");
  }
 if(switchobj.value=="op_p"){
      obj=document.createElement("p");
  }
 if(switchobj.value=="op_span"){
      obj=document.createElement("span");
  }
 if(switchobj.value=="op_table"){
      obj=document.createElement("table");
  }
 if(switchobj.value=="op_tr"){
      obj=document.createElement("table");
  }
 if(switchobj.value=="op_window"){
      obj=document.createElement("window");
  }
 if(switchobj.value=="op_document"){
      obj=document.createElement("document");
  }
 Assembly(obj);
}
//反射物件
function Assembly(obj){
  var order=0;
  if(obj){
    var assstr="反射物件:"+obj.tagName+"<br/>"
    for(key in obj){
      order++;
      assstr+=order+"----"+key+"<br/>";
    }
    Show(assstr);
  }
}
//將反射資訊輸出
function Show(msg){
  var showobj=document.getElementById('show');
  if(showobj){
    showobj.innerHTML="";
    showobj.innerHTML=msg;
   }
}
</script>
</head>
<body>
<div id="main">
<div id="show"></div>
<input type="button" id="btn_assembly" value="反射" onclick="SwitchObj('select');" />
<select id="selects">
  <option value='op_div'>div教程</option>
  <option value='op_p'>螞蟻部落二</option>
  <option value='op_span'>span元素</option>
  <option value='op_table'>表格教程</option>
  <option value='op_select'>下拉選單</option>
  <option value='op_document'>文件</option>
  <option value='op_window'>softwh.com</option>
</select>
</div>
</body>
</html>

相關文章