HTML5新增的选择器

最新推荐文章于 2024-10-09 00:58:21 发布

luckystar2008

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量142

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/qincidong/article/details/84483642

版权

Html5&Css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

除了传统的document.getElementById,document.getElementsByName,document.getElementsByTagName外，HTML5中新增了2个更好用的选择器，分别是：

document.querySelector：返回第一个找到的元素；

document.querySelectorAll:返回找到的所有元素。

示例：

有一个表格，鼠标放上去的时候变色，按ENTER键弹出鼠标当前所在的单元格的内容。

代码：

<!DOCTYPE HTML>
<html>
<head>
	<title>Html5 Query Selector Demo</title>
	<meta charset="gb18030">
	<style type="text/css">
		section {
			width:50%;
		}
		table {
			width:50%;
		}
		td {
			border-style:solid;
			border-width:1px;
		}

		td:hover {
			background-color:#F37D31;
		}

		div {
			color:white;
			background-color:#F37D31;
			-webkit-border-radius:10px;
			-webkit-box-shadow:2px 2px 2px green;
			-webkit-transform:rotate(-45deg);
			text-align:center;
			padding:10px;
			margin-top:100px;
		}
	</style>
	
</head>

<body>
	<section>
		<div>操作提示：鼠标放到表格上，按ENTER键</div>
		<table>
		<tr>
			<td>aaa</td>
			<td>bbb</td>
			<td>ccc</td>
		</tr>
		<tr>
			<td>ddd</td>
			<td>eee</td>
			<td>fff</td>
		</tr>
		<tr>
			<td>ggg</td>
			<td>hhh</td>
			<td>iii</td>
		</tr>
		</table>
		<button type="button" id="btn" autoFocus>Find 'td:hover' target</button>
	</section>
	<script language="JavaScript">
	<!--
		document.getElementById("btn").onclick = function() {
			var selected = document.querySelector("td:hover"); // 返回第一个找到的元素
			var tds = document.querySelectorAll("table tr td"); // 返回找到的所有元素

			if (selected)
			{
				alert(selected.innerText);
			}
			alert(tds.length);
		}
	//-->
	</script>
</body>
</html>