您的位置：首页 > Web前端 > JavaScript

javascript增删节点以及如何操作下拉列表select和option(源代码)

2014-12-07 21:49 696 查看

增加节点

如何创建一个新的节点？

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"  onchange="change()">
<option value="eat">吃</option>
<option value="drink">喝</option>
<option value="play">玩</option>
<option value="happy">乐</option>
</select>

<hr/>

<input onclick="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 onload="load()">

<h1 id="h1">100</h1>

<hr/>

省份：
<select id="pro" onchange="change()">
<option>内蒙古自治区</option>
<option>黑龙江省</option>
<option>河南省</option>
<option>河北省</option>
</select>

城市：
<select id="city">
<option>---请选择---</option>
</select>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航