Java Web笔记：使用Javascript操作DOM

来源：互联网发布：wps2016数据分析在哪里编辑：程序博客网时间：2024/05/22 05:19

在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>

0 0