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

最新推荐文章于 2021-05-11 22:22:10 发布

彪仔zjj

最新推荐文章于 2021-05-11 22:22:10 发布

阅读量760

点赞数

分类专栏：源代码

本文链接：https://blog.csdn.net/java_xxoo_android/article/details/41791623

版权

源代码专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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