document节点对象的获取方式

最新推荐文章于 2023-03-27 21:42:30 发布

ma451152002

最新推荐文章于 2023-03-27 21:42:30 发布

阅读量3.4k

点赞数

分类专栏： javascript 文章标签： javascript

javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title></title>
		<script>
		
		/*
			document节点对象的获取方式：
			
		*/
		//第一种，通过id获取
		function documentDemo(){
			var tableNode = document.getElementById("tab_id");
			tableNode.style.border = "5px solid #00ff00";
		}
		//第二种，通过name属性
		function documentDemo2(){
			var inputNode = document.getElementsByName("txt");
			alert(inputNode.length);
			alert(inputNode[0].value);
			
		}
		//第三种，通过标签名
		function documentDemo3(){
			var tdNode = document.getElementsByTagName("td");
			alert(tdNode.length);
			for(var x = 0 ; x < tdNode.length;x++){
				alert(tdNode[x].innerText);
			}
		}
		</script>

		<style type="text/css">
			.onediv{
				width:200px;
				height:100px;
				border:1px solid #f00;
				margin-top:20px;
			}
			
			table ,td{
				border:1px solid #00f;
				width:200px;
				margin-top:20px;
				text-align:center;
			}
		</style>
		
	</head>
	
	<body>
		<input type="button" value="document对象演示" οnclick="documentDemo3()"><br/>
		<div class="onediv">
		这是div中的内容
		</div>
		
		<input type="txt" name="txt" >
		<input type="txt" name="txt" >
		
		
		<table cellspacing="0" id="tab_id">
			<tr>
				<td>java</td>
				<td>php</td>
			</tr>
			<tr>
				<td>.net</td>
				<td>ios</td>
			</tr>
		</table>
		
		<span>这是一个span区域</span> <br/>
		<a href="#">这是一个超链接</a>
	<body>
	
</html>