Java Web笔记:使用Javascript操作DOM

在HTML语言中,由于其本身也是采用了标记语言的方式,所以在HTML中可以通过Javascript操作DOM。

在Javascript中使用DOM解析

在表单中定义了一个普通的按钮,当点击此按钮时,会调用show函数,在show函数中取得info元素,并且设置其中的显示内容。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script language="javascript">
	function show(){
		//通过DOM解析取得info元素,并设置内容
		document.getElementById("info").innerHTML=
		"<h2>这是DOM解析。</h2>";
		}
</script>
</head>

<body>
<form action="" method="post">
<input type="button" onclick="show()" value="show!">
<span id="info"></span>
</form>
</body>
</html>

通过DOM生成下拉列表框

在setFun方法中,通过document.getElementById("area")取得了area下拉列表框的对象,然后通过length设置下拉列表框每次只能选择一个,并且将第一个选项设置为默认选中。在下拉列表中会存在多个option,所以通过setArrribute()方法设置每个option中包含的value属性内容,并且每一个option中都设置一个文本节点表示显示内容,最后将每一个元素都添加到下拉列表中。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
	<script language="javascript">
		function setFun(){
			var id = new Array(1,2,3);
			var value = new Array("北京","上海","天津");
			var select = document.getElementById("area");
			select.length = 1;
			select.options[0].selected = true;
			for(var x = 0; x<id.length;x++){
				//设置option中的内容,建立option节点
				var option = document.createElement("option");
				option.setAttribute("value",id[x]);
				//在option元素下增加文本节点
				option.appendChild(document.createTextNode(value[x]));
				select.appendChild(option);
				}
			}
	</script>
</head>

<body onLoad="setFun()">
	<form>
		<select name="area" id="area">
        	<option value="0">未选择</option>
        </select>
	</form>
</body>
</html>


动态地增加和删除表格

<html>
<head>
	<title>test</title>
	<script language="javascript">
		var count = 3 ;
		function addrow(){
			var table = document.getElementById("mytab") ;
			var tr = table.insertRow() ;	// 增加一个新的行
			var td1 = tr.insertCell(); // 增加列
			var td2 = tr.insertCell() ;	// 
			var td3 = tr.insertCell() ;	// 
			td1.innerHTML = "001" + count ;
			td2.innerHTML = "哈哈哈 - " + count ;
			td3.innerHTML = "<input type='button' value='-' onclick='deleterow(this)'>" ;
			count ++ ;
		}
		function deleterow(btn){
			var tr = btn.parentNode.parentNode ;
			var table = document.getElementById("mytab") ;
			table.deleteRow(tr.rowIndex) ;
		}
	</script>
</head>
<body>
	<input type="button" value="+" onclick="addrow()">
	<TABLE id="mytab" border="1">
		<TR>
			<TD>001</TD>
			<TD>哈哈哈</TD>
			<TD><input type="button" value="-" onclick="deleterow(this)"></TD>
		</TR>
		<TR>
			<TD>002</TD>
			<TD>呵呵呵</TD>
			<TD><input type="button" value="-" onclick="deleterow(this)"></TD>
		</TR>
	</TABLE>
</body>
</html>



你可能感兴趣的:(Java Web笔记:使用Javascript操作DOM)