为了动态的修改HTML元素,必须能访问html元素,DOM提供了两种方式来访问HTML元素:
1.根据ID访问HTML元素。
document.getElementById(idval):返回文档中id属性值为idVal的HTML元素。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css"></style>
<script type="text/javascript">
var accessById=function()
{
alert(document.querySelector("#a").innerHTML+"\n"+document.querySelector("#b").value);
}
</script>
</head>
<body>
<div id="a">asfaskjgna</div>
<textarea id="b" rows="3" clos='25'>oihagobdsbg</textarea>
<input type="button" value="asfasfsa" onclick="accessById();"/>
</body>
</html>
2.根据css选择器访问html元素。
Element querySelector(selectos):该方法的参数即可是一个css选择器,也可是用逗号隔开的多个css选择器,该方法返回HTML文档中第一个符合选择器参数的HTML元素。
NodeList querySelectorAll(selectors):该方法与前一个方法的用法类似,只是该方法将返回所有符合css选择器的HTML元素。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css"></style>
<script type="text/javascript">
var change=function()
{
var divList=document.querySelectorAll("div");
alert(divList);
for(var i in divList)
{
divList[i].innerHTML="测试内容"+i;
divList[i].style.width="300px";
divList[i].style.height="50px";
divList[i].style.margin="10px";
divList[i].style.backgroundColor="#faa";
}
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<input type="button" onclick="change();" value="修改全部div元素"/>
</body>
</html>
3.利用节点关系访问HTML元素。
前一种方式简单易用,主要用document提供的getElementById()方法来完成;后一种方式则利用树节点之间的父子、兄弟关系来访问。
formObj.elementName:返回表单中id或name为elementName的表单控件。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css">
.selected{
background-color:#66f
}
</style>
</head>
<body>
<ol id="books">
<li id="java">dfberbfv</li>
<li id="ssh">dgadgsbb</li>
<li id="ajax">sdgwegdsd</li>
<li id="xml">sdfsgweg</li>
<li id="ejb">sdhtnjgb</li>
<li id="android">satbaerbeb</li>
</ol>
<input type="button" value="父节点" onclick="change(curTarget.parentNode);"/>
<input type="button" value="第一个" onclick="change(curTarget.parentNode.firstChild.nextSibling);"/>
<input type="button" value="上一个" onclick="change(curTarget.previousSibling.previousSibling);"/>
<input type="button" value="下一个" onclick="change(curTarget.nextSibling.nextSibling);"/>
<input type="button" value="最后一个" onclick="change(curTarget.parentNode.lastChild.previousSibling);"/>
<script type="text/javascript">
var curTarget=document.getElementById("ajax");
var change=function(target)
{
alert(target.innerHTML);
}
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css"></style>
<script type="text/javascript">
</script>
</head>
<body>
<form id="d" action="" method="get">
<input name="user" type="text" value="sdfdf" /><br />
<input name="pass" type="text" /><br />
<select name="color">
<option value="red">红色</option>
<option value="blue">蓝色</option>
</select><br />
<input type="button" value="第一个" onclick="alert(document.getElementById('d').elements[0].value);"/>
<input type="button" value="第二个" onclick="alert(document.getElementById('d').elements['pass'].value);"/>
<input type="button" value="第三个" onclick="alert(document.getElementById('d').color.value);"/>
</form>
</body>
</html>
访问列表框、下拉菜单的选项。
form:返回列表框、下拉菜单所在的表单对象。
length:返回列表框、下拉菜单的选项个数。改属性的值可通过增加或删除列表框的选项来改变。
options:返回列表框、下拉菜单里所有选项组成的数组。
selecedIndex:返回下拉列表中选中选项的索引,如果有多个选项被选中,则只返回第一个被选中选项的索引。
defaultSelected:返回该选项默认是否被选中。
value:返回每个选项的value属性,可以通过设置该属性来改变选项的value值。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css"></style>
</head>
<body>
<select id="mySelect" name="mySelect" size="6">
<option value="java">afsfasf</option>
<option value="ssh">asf asfvas</option>
<option value="ajax">dsgwegsdg</option>
<option value="xml">afdgadgad</option>
<option value="ejb">adfasgaga</option>
<option value="android">dafgasgag</option>
</select><br />
<input type="button" value="第一个" onclick="change(curTarget.options[0]);"/>
<input type="button" value="上一个" onclick="change(curTarget.options[curTarget.selectedIndex-1]);"/>
<input type="button" value="下一个" onclick="change(curTarget.options[curTarget.selectedIndex+1]);"/>
<input type="button" value="最后一个" onclick="change(curTarget.options[curTarget.length-1]);"/>
<script type="text/javascript">
var curTarget=document.getElementById("mySelect");
var change=function(target)
{
alert(target.text);
}
</script>
</body>
</html>
访问表格子元素
caption:返回该表格的标题对象。
table.rows[index]:返回该表格第index+1行的表格行。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css"></style>
</head>
<body>
<table id="d" border="1">
<caption>fehanonvida</caption>
<tr>
<td>safadgdg</td>
<td>sdsgagafadgdg</td>
</tr>
<tr>
<td>sdsgaafadgdg</td>
<td>dsgadgsdsgagafadgdg</td>
</tr>
<tr>
<td>sagagafadgdg</td>
<td>afeqgewsdsgagafadgdg</td>
</tr>
</table>
<input type="button" value="标题" onclick="alert(document.getElementById('d').caption.innerHTML);">
<input type="button" value="第一行、第一个" onclick="alert(document.getElementById('d').rows[0].cells[0].innerHTML);"/>
<input type="button" value="第二行、第二格" onclick="alert(document.getElementById('d').rows[1].cells[1].innerHTML);"/>
<input type="button" value="第三行、第二格" onclick="alert(document.getElementById('d').rows[2].cells[1].innerHTML);"/>
</body>
</html>
修改HTML元素
option[index]:直接对<select…/>元素的指定列表项赋值,可改变列表框、下拉菜单的指定列表项。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css"></style>
</head>
<body>
改变第<input id="row" type="text" size="2"/>行,
第<input id="cel" type="text" size="2"/>列的值为:
<input id="celVal" type="text" size="16"/><br/>
<input id="chg" type="button" value="改变" onclick="change();"/>
<table id="d" border="1" style="width:580px;border-collapse:collapse;">
<tr>
<td>疯狂Java讲义</td>
<td>轻量级JavaEE企业应用实战</td>
</tr>
<tr>
<td>疯狂Ajax讲义</td>
<td>经典JavaEE企业应用实战</td>
</tr>
<tr>
<td>疯狂xml讲义</td>
<td>疯狂avaEE企业应用实战</td>
</tr>
</table>
<script type="text/javascript">
var change=function()
{
var tb=document.getElementById("d");
var row=document.getElementById("row").value;
row=parseInt(row);
if(isNaN(row))
{
alert("您要修改的行必须是整数");
return false;
}
var cel=document.getElementById("cel").value;
cel=parseInt(cel);
if(isNaN(cel))
{
alert("您要修改的列必须是整数");
return false;
}
if(row>tb.rows.length||cel>tb.rows.item(0).cells.length)
{
alert("要修改的单元格不在该表格内");
return false;
}
tb.rows.item(row-1).cells.item(cel-1).innerHTML=document.getElementById("celVal").value;
}
</script>
</body>
</html>