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

来源：互联网发布：黎明杀机优化设置编辑：程序博客网时间：2024/04/29 20:31

增加节点
如何创建一个新的节点？
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.-1n=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>

0 0