增加节点
如何创建一个新的节点?
var divObj=document.createElement("div");
如何把节点对象添加到文档中的某个位置?
div.appendChild(divObj)
<div>
<p></p>
</div>
body.insertBefore(newNode, refNode)
删除节点:
removeChild()
如何操作下拉列表:
<select name="">
<option value="">text</option>
</select>
Select的属性:
length 下拉项的个数
selectedIndex 当前选中下拉项的下标
options 封装了所有下拉项对象(Option对象数组)
Option的属性:
value: value属性
text: Option的文本
如何创建一个新的节点?
var divObj=document.createElement("div");
如何把节点对象添加到文档中的某个位置?
div.appendChild(divObj)
<div>
<p></p>
</div>
body.insertBefore(newNode, refNode)
删除节点:
removeChild()
如何操作下拉列表:
<select name="">
<option value="">text</option>
</select>
Select的属性:
length 下拉项的个数
selectedIndex 当前选中下拉项的下标
options 封装了所有下拉项对象(Option对象数组)
Option的属性:
value: value属性
text: Option的文本
selected: 当前是否被选中 true|false
源代码01:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js03.html</title>
<script type="text/javascript">
function doClick(){
//1. 创建div节点
var divObj=document.createElement("div");
//2. 为新创建的div 赋值
divObj.innerHTML="我希望什么时候用 有就行。";
divObj.style.color="blue";
divObj.style.fontSize="20px";
divObj.style.border="2px solid black";
/*/3. 向body中追加子节点
var body=document.getElementById("body");
body.appendChild(divObj);
*/
var body=document.getElementById("body");
var h1=document.getElementById("h1");
body.insertBefore(divObj, h1);
}
function change(){
var aihao=document.getElementById("aihao");
var l=aihao.length;
var index=aihao.selectedIndex;
//alert("length:"+l +" index:"+index);
var opts=aihao.options;
for(i=0; i<opts.length; i++){
var opt=opts[i];
//alert(opt.value+","+opt.text+","+opt.selected);
//opt.text="吃";
}
}
</script>
</head>
<body id="body">
爱好:
<select id="aihao" οnchange="change()">
<option value="eat">吃</option>
<option value="drink">喝</option>
<option value="play">玩</option>
<option value="happy">乐</option>
</select>
<hr/>
<input οnclick="doClick()"
type="button" value="看答案"/>
<h1 id="h1"> 问:你希望一个月挣多少钱? </h1>
</body>
</html>
源代码02(添加了定时器window.setInterval):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js04.html</title>
<script type="text/javascript">
var data=[ ["包头","呼和浩特","赤峰"],
["齐齐哈尔", "哈尔滨", "漠河", "鸡西"],
["郑州","平顶山","信阳","洛阳"],
["邯郸","保定","石家庄"] ];
function change(){
//1. 获取选择省份的下标
var index=$("pro").selectedIndex;
//2. 获取城市数组
var cities=data[index];
$("city").innerHTML="";
//3. 把城市数组中的数据 添加到城市列表中
for(i=0; i<cities.length; i++){
var city=cities[i]; //获取城市名
//创建Option对象 赋值
var opt=document.createElement("option");
opt.text=city;
// 添加到城市列表 appendChild()
$("city").appendChild(opt);
}
}
function $(id){
return document.getElementById(id);
}
function load(){
var task=window.setInterval( function () {
//1.获取h1的数字
var n=parseInt($("h1").innerHTML);
//2.-1
n=n-1;
//3.设置
$("h1").innerHTML=n;
}, 100 );
window.setTimeout(function(){
window.clearInterval(task);
}, 5000);
}
</script>
</head>
<body οnlοad="load()">
<h1 id="h1">100</h1>
<hr/>
省份:
<select id="pro" οnchange="change()">
<option>内蒙古自治区</option>
<option>黑龙江省</option>
<option>河南省</option>
<option>河北省</option>
</select>
城市:
<select id="city">
<option>---请选择---</option>
</select>
</body>
</html>