Javascript(10)

刚刚看了一集javascript的视频教程,主要讲诉了javascript中DOM编程的“潜规则”与Select操作
总结一下小知识点吧吧。
DOM编程的潜规则
1,一般我们创建DOM对象使用document.createElement()与document.createTextNode(),但
是有两个对象比较特殊,可以使用new的方式创建。
var op=new Option();
var img=new Image();
只有这两个可以new,这就是潜规则。
2,Id是为客户端编程服务,客户端通过id得到对象句柄,引用。
   服务器端通过name得到数值。
3,最后贴出跟着学的两个小例子
example1:DOM编程的潜规则。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Dom潜规则</title>

<script type="text/javascript">

function createImg()

{

	var mydiv=document.getElementById("mydiv");

	//var img1=document.createElement("img");

	var img1=new Image();

	//img.src="../1.jpg";

	img1.setAttribute("src","1.jpg");

	img1.title="罗纳尔多";

	mydiv.appendChild(img1);

}



function newoptions()

{

var op=new Option();

var op2=new Option();

var sel=document.createElement("select");

sel.appendChild(op);

sel.appendChild(op2);

var mydiv=document.getElementById("mydiv");

mydiv.appendChild(sel);

}



</script>

</head>



<body >

<div id="mydiv">

<input type="button" onclick="createImg()" value="潜规则之img"/>

<input type="button" onclick="newoptions()"  value="潜规则之Option"/>

</div>

</body>

</html>


example2: DOM编程的select操作。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>DOM操作select</title>

<script type="text/javascript">

function getValue()

{

var se=document.getElementById("se");

alert(se.value);

}



function getOptions()

{

var se=document.getElementById("se");

var ops=se.options;

alert(ops.length);

for(var i=0;i<=ops.length;i++)

{

alert(ops[i].text+" "+ops[i].value);

}

}



function getSelectIndex()

{

var se=document.getElementById("se");

var ops=se.options;

alert(se.selectedIndex);//下表从0开始的

alert(ops[se.selectedIndex].text+" "+ ops[se.selectedIndex].value);

}



function clearT()

{

var se=document.getElementById("se");

se.length();

}



function addO()

{

var op=document.createElement("option");

op.value="5";

op.text="赵六";

var se=document.getElementById("se");

//se.appendChild("op");

se.options[se.options.length]=op;

}



function addbefore()

{

var se=document.getElementById("se");

var op=new Option();

op.value="6";

op.text="李五";

se.insertBefore(op,se.firseChild);

}



</script>



</head>



<body>

<p align="center">

<select id="se">

	<option value="1">张三</option>

	<option value="2">李四</option>

	<option value="3">王八</option>

	<option value="4">田七</option>

</select>

</p>

<input type="button" value="getValue" onclick="getValue()" />

<input type="button" value="getOptions" onclick="getOptions()" />

<input type="button" value="getSelectIndex" onclick="getSelectIndex()" />

<input type="button" value="clearT" onclick="clearT()" />

<input type="button" value="addO" onclick="addO()" />

<input type="button" value="addbefore" onclick="addbefore()" />



<ul>

<li>select控件的数值就是它选中的option的值</li>

<li><控件下的多个option可以组成一个数组/li>

<li>option控件有两个属性 text与value</li>

<li>select的selectedIndex属性表示选中的option数组中的那个元素的下表(下标从0开始)</li>

<li>获取select数值有两种方法1,sel.value 2,sel.options[se.selectIndex].value</li>

</ul>

</body>

</html>

 

你可能感兴趣的:(JavaScript)