javascript案例,dom编程中的"潜规则"

javascript案例,dom编程中的"潜规则"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript案例,dom编程中的"潜规则",雪豹软件工作室</title>
<link rel="stylesheet" type="text/css" href="body.css">
<link rel="stylesheet" type="text/css" href="input2.css">
<link rel="stylesheet" type="text/css" href="mark.css">
<link rel="stylesheet" type="text/css" href="select.css">
<script type="text/javascript">
  /* 
  	注意：dom编程中的"潜规则"
  一般我们创建dom对象使用document.createElement("img");和document.createTextNode("测试");，但是有2个对
  象比较特殊，可以使用new的方式创建(注意：只有img和option这2个元素可以使用new的方式创建，仅限于这2个元素，其他元素都不能使
	用new的方式创建对象，以下是案例)
  */
	function init(){
	  //	var imgNode = document.createElement("img");
	  /*
	  可以使用new这种方式来创建img对象和Option对象，但是不建议大家使用new的方式创建这2个对象，还是建
	  议大家使用document.createElement()的方式来创建对象
	  */
	  	var imgNode = new Image();
		//imgNode.src = "img/cry19.gif";
		imgNode.setAttribute("src", "img/cry6.gif");//设置图片节点的src属性
		imgNode.title = "伤心表情图片";
		var divNode = document.getElementById("myDiv");
		divNode.appendChild(imgNode);//追加图片节点到div层中
		var optionNode = new Option();
		var optionNode2 = new Option();
		var selectNode = document.createElement("select");
		optionNode.value = "1";
		optionNode2.value = 2;
		optionNode.appendChild(document.createTextNode("深圳"));
		optionNode2.appendChild(document.createTextNode("广州"));
		selectNode.style.width = 460 + "px";
		selectNode.appendChild(optionNode);
		selectNode.appendChild(optionNode2);
		divNode.appendChild(selectNode);
		//selectNode.className = "select-green";
		//selectNode.parentNode.className = "select-bg";
  }
  
  function getValue(){
	  //select控件的数值就是它选中的option的值
	  var selectNode = document.getElementById("mySele");
	  var optionNode = selectNode.options[selectNode.selectedIndex];
	  alert(selectNode.value + "----" + optionNode.value + "----" + optionNode.text);
  }
  
  function getOptions(){
	  //select控件下的多个option可以组成一个数组
	  //option有2个属性,text和value
	  var selectNode = document.getElementById("mySele");
	  var ops = selectNode.options;//通过options属性，得到一个数组
	  alert("数组长度 = " + ops.length);
	  for (var index = 0; index < ops.length; index++) {
		alert(ops[index].text + " ----********---- " + ops[index].value);
	}
  }
  
  function getSelectedIndex(){
	  //selectedIndex是当前选中元素的下标
	  //select的selectedIndex属性表示选中了option数组中的那个元素的下标,下标从0开始
	  //获取select数值有2种方法，第一种selectNode.value,第二种selectNode.options[selectNode.selectedIndex].value
	  var selectNode = document.getElementById("mySele");
	  alert("选中的下标 = " + selectNode.selectedIndex);
	  var optionNode = selectNode.options[selectNode.selectedIndex];
	  alert(optionNode.value + "----" + optionNode.text);
  }
  
  function addOption(){
	  var selectNode = document.getElementById("mySele");
	  var optionNode = new Option("西门吹雪","9527");//构造方法传参
	  selectNode.appendChild(optionNode);
	  var optionNode2 = new Option();
	  optionNode2.text = "陆小凤";
	  optionNode2.value = 6945;
	  selectNode.appendChild(optionNode2);
	  var optionNode3 = new Option();
	  optionNode3.setAttribute("value", "6127");
	  optionNode3.appendChild(document.createTextNode("花满楼"));
	  var firstOption = selectNode.options[0];
	  //alert("firstOption = " + firstOption);
	  //insertBefore方法需要正确理解和使用，我一开始在insertBefore方法上卡了很久，一开始没明白怎么用这个方法
	  //insertBefore的正确使用是，父标记.insertBefore(新节点,旧节点)
	  selectNode.insertBefore(optionNode3,optionNode2);
	  //selectNode.appendChild(optionNode3);
	   var optionNode4 = new Option("欧阳峰","7768");
	  selectNode.options[selectNode.options.length] = optionNode4;
  }
  
  function clearAll(){
	  var selectNode = document.getElementById("mySele");
	  //清空：让select控件对象的length属性等于0就可以达到清空的效果(经过测试，以下2种方式都可以清空)
	 // selectNode.options.length = 0; //select对象.options.length = 0也可以达到清空的效果
	  selectNode.length = 0;
  }
  
  /*
  id是为客户端编程服务的，客户端通过id得到对象句柄或者叫对象引用，而name则是为服务端编程服务的，服务器端通过name得到值。
  */
  
  
</script>

</head>
<body onload="init()">
<input type="button" value="添加option" onclick="addOption()">&nbsp;&nbsp;
<input type="button" value="取值" onclick="getValue()">&nbsp;&nbsp;
<input type="button" value="得到option数组" onclick="getOptions()">&nbsp;&nbsp;
<input type="button" value="通过SelectedIndex取值" onclick="getSelectedIndex()">&nbsp;&nbsp;
<input type="button" value="清空" onclick="clearAll()">&nbsp;&nbsp;<br><br>
<div id="myDiv" class="select-bg">
<select id="mySele" class="select-green">
<option value="10034">张珊珊</option>
<option value="10056">李思思</option>
<option value="10088">王五五</option>
<option value="10099">赵六六</option>
<option value="10027">周齐齐</option>
</select>
</div>
</body>
</html>
javascript案例,dom编程中的"潜规则"

猜你喜欢
