版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/czh500/article/details/84892120
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()">
<input type="button" value="取值" onclick="getValue()">
<input type="button" value="得到option数组" onclick="getOptions()">
<input type="button" value="通过SelectedIndex取值" onclick="getSelectedIndex()">
<input type="button" value="清空" onclick="clearAll()"> <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>