DOM访问HTML元素

最新推荐文章于 2022-05-23 19:10:50 发布

IUBKBK

最新推荐文章于 2022-05-23 19:10:50 发布

阅读量294

点赞数

本文链接：https://blog.csdn.net/IUBKBK/article/details/90217080

版权

为了动态的修改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>

IUBKBK

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM访问HTML元素

为了动态的修改HTML元素，必须能访问html元素，DOM提供了两种方式来访问HTML元素：1.根据ID访问HTML元素。document.getElementById(idval):返回文档中id属性值为idVal的HTML元素。<html><head> <meta http-equiv="Content-Type" content="text/html;...
复制链接

扫一扫