Html5笔记(3)概述

最新推荐文章于 2022-09-27 00:52:55 发布

liujf

最新推荐文章于 2022-09-27 00:52:55 发布

阅读量1k

点赞数

分类专栏： HTML5 文章标签： web前端 html5

本文链接：https://blog.csdn.net/ljf5566/article/details/8656739

版权

HTML5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用Selectors API简化选取操作

一、以前用来查找元素的JavaScript方法

函数	描述	示例
getElementById()	根据指定的id属性值查找并返回元素	<div id="foo"> getElementById("foo");
getElementsByName()	返回所有name属性为指定值的元素	<input type="text" name="foo"> getElementsByName("foo");
getElementsByTagName()	返回所有标签名称与指定值相匹配的元素	<input type="text"> getElementsByTagName("input");

二、新QuerySelector方法

函数	描述	示例	结果
querySelector()	根据指定的选择规则，返回在页面中找到的第一个匹配元素	querySelector("input.error");	返回第一个CSS类名为"error"的文本输入框
querySelectorAll()	根据指定规则返回页面中所有相匹配的元素	querySelectorAll ("#results td");	返回id值为results的元素下所有的单元格

三、示例

使用Selector API获取鼠标当前在哪个单元格上

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Query Selector Demo</title>

<style type="text/css">
td
{
	border-style:solid;
	border-width:1px;
	font-Size:300%;
}

td:hover
{
	background-color:cyan;
}

#hoverResult
{
	color:green;
	font-Size:200%;
}
</style>
</head>

<body>
<section>
<!--创建一个3行3列的表-->
<table>
<tr>
<td>A1</td> <td>A2</td> <td>A3</td>
</tr>
<tr>
<td>B1</td> <td>B2</td> <td>B3</td>
</tr>
<tr>
<td>C1</td> <td>C2</td> <td>C3</td>
</tr>
</table>

<div>
Focus the button,hover over the table cells,and hit Enter to
identify them using querySelector('td:hover').
</div> 
<button type="button" id="findHover" antofocus>Find 'td:hover' target</button>
<div id="hoverResult"></div>

<script type="text/javascript">
document.getElementById("findHover").οnclick=function()
{
	//找出页面中的单元格
	var hovered=document.querySelector("td:hover");
	if(hovered)
	document.getElementById("hoverResult").innerHTML=hovered.innerHTML;
}
</script>
</section>
</body>
</html>

效果如下

liujf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
Html5笔记(3)概述

使用Selectors API简化选取操作一、以前用来查找元素的JavaScript方法函数描述示例getElementById()根据指定的id属性值查找并返回元素getElementById("foo");getElementsByName()返回所有name属性为指定值的元素 getElementsByName(
复制链接

扫一扫