您的位置：首页 > Web前端 > HTML

访问HTML元素

2016-04-07 19:42 387 查看

1.根据ID访问元素



下面我们来看一段代码：

<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(Owen.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 根据ID访问HTML元素 </title>
<script type="text/javascript">
var accessById = function()
{
alert(document.getElementById("a").innerHTML + "\n"
+ document.getElementById("b").value);
}
</script>
</head>
<body>
<div id="a">Java</div>
<textarea id="b" rows="3" cols='25'>Spring源码
</textarea>
<input type="button" value="访问2个元素" onclick="accessById();"/>
</body>
</html>


运行结果：



2.利用节点关系访问HTML元素

一旦获取了某个HTML元素，由于该元素实际上与DOM树的某个节点对应，因此我们完全可以利用节点之间的父子、兄弟关系来访问HTML元素。



下面我们来看一段代码：

<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(owen.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 根据节点关系访问HTML元素 </title>
<style type="text/css">
/* 定义改变背景色的CSS，表示被选中的项 */
.selected {
background-color:#66f
}
</style>
</head>
<body>
<ol id="books">
<li id="java">Java</li>
<li id="ssh">Java EE</li>
<li id="ajax" class="selected">Ajax</li>
<li id="xml">XML</li>
<li id="ejb">Java EE企业应用</li>
<li id="workflow">Android</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>


需要指出的是，<ol…/>节点一共包含了13个子节点，而不是6个子节点！因为在每两个<li…/>节点之间都有一个“空白”，每个“空白”也将被当作<ol../>元素子节点。

运行结果：



3.访问表单控件

表单DOM中由HTMLFormElement对象表示，该对象除了可调用前面介绍的基本属性和方法之外，还拥有如下几个属性：



下面我们来看一段代码：

<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(Owen.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 访问表单控件 </title>
</head>
<body>
<form id="d" action="" method="get">
<input name="user" type="text" /><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>

运行结果：



4.访问列表框、下拉菜单的选项

HTMLSeletElement代表一个列表框或下拉菜单，HTMLSelectElement对象除了可使用普通HTML元素的各种属性和方法外，还支持如下额外的属性。



HTMLSelectElement的options属性可直接访问列表框、下拉菜单的所有列表项，传指定索引即可访问指定列表项，语法如下：



列表框、下拉框菜单的选项由HTMLOptionElement对象表示，除了前面介绍的普通属性之外，该对象还提供了如下几个常用属性。



如下代码：

<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(owen.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 访问列表项 </title>
</head>
<body>
<select id="mySelect" name="mySelect" size="6">
<option value="java">Java</option>
<option value="ssh">Java EE</option>
<option value="ajax" selected>Ajax</option>
<option value="xml">XML</option>
<option value="ejb">Java EE</option>
<option value="workflow">Android</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>

运行结果：



5.访问表格子元素

HTMLTableElement代表表格，HTMLTableElement对象除了可使用普通HTML元素的各种属性和方法，还支持如下的额外的属性。



在获得一个表格之后，完全可以通过上面提供的一系列属性来访问表格”内容”。如下：



HTMLTableRowElement代表表格行，HTMLTableRowElement对象除了可使用普通HTML元素的各种属性和方法外，还支持如下的额外属性。



HTMLTableCellElement代表单元格，HTMLTableCellElement对象除了可使用普通HTML元素的各种属性和方法外，还支持如下的属性。



下面给出示例的代码：

<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(owen.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 访问表格元素 </title>
</head>
<body>
<table id="d" border="1">
<caption>疯Java体系</caption>
<tr>
<td>Java</td>
<td>Java EE</td>
</tr>
<tr>
<td>Ajax</td>
<td>Java EE</td>
</tr>
<tr>
<td>XML</td>
<td>Android</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>

运行结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航