除了传统的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>
相关推荐
HTML5 中新增了许多 CSS3 选择器，包括： * Id 选择器：# selector * Class 选择器：.selector * 并集选择器： * 后代选择器： * Div ul交集选择器： * s1div标签选择器： * div通配符选择器：* 这些 CSS3 选择器...
html css css新增属性和选择器
本知识点将以H5C3为背景，详细探讨HTML5中新增的常用标签、音视频标签、表单标签和选择器的使用。 首先，HTML5的语义化标签能够增强代码的可读性，并有助于网站SEO。语义化标签主要包括：header（头部）、nav（导航...
HTML5作为最新的超文本标记语言标准，相较于上一版本HTML4，带来了许多新特性，其中包括新增的表单元素和属性。这些新增元素和属性的引入，极大地扩展了网页的功能，增强了用户交互体验，同时也简化了开发者的工作...
CSS3中新增了三种属性选择器，它们分别是： 1. **E[att^=value]**：前缀匹配选择器。这种选择器会选择那些名称为E的元素，且这些元素的att属性值以value开头。例如，如果我们想选择所有href属性值以"http://"开头的...
这些HTML5新增的CSS选择器和伪类极大地扩展了CSS的表达能力，让开发者能够更精确地控制页面元素的样式，同时减少了编写CSS的复杂性。通过熟练掌握这些特性，可以创建出更加精致、动态的网页设计。
例如，`<input type="date">`元素就是HTML5新增的一种表单控件，可以直接在浏览器内生成一个基本的日期选择器，无需依赖JavaScript插件。然而，这个内置的日期选择器样式有限，可能无法满足所有设计需求，所以许多...
5. **CSS3新增的其他选择器** - `E+F`：通用兄弟选择器，选取所有紧跟在E后面的F元素。 - `E~F`：一般同胞选择器，选取所有与E有共同父元素且位于E之后的F元素。 这些新的CSS3选择器极大地扩展了我们对网页元素的...
1. **表单元素增强**：HTML5对传统的表单元素进行了增强，比如`<input>`标签新增了多种类型（如`type="email"`、`type="date"`等），用于提供更好的输入验证和用户体验。在选择题中，`<select>`标签通常用于创建下拉...
首先，HTML5新增了一个`<input>`类型的日期选择器，其type属性为`date`。例如： ```html ``` 这个简单的代码将在支持HTML5的浏览器中生成一个内置的日期选择框，用户可以通过它方便地选取日期。然而，不同浏览器...
CSS3新增选择器 CSS3引入了许多新的选择器，这些选择器增强了选择元素的能力和灵活性。 - 后代级别选择器：用于选择特定父元素内部的所有后代元素（如div p, div > p）。 - 同辈级别选择器：用于选择具有相同父...
1. **选择器增强**：CSS3增加了许多新的选择器，如兄弟选择器（~）、子元素选择器（>）、属性选择器（[attribute]）等，使得样式定位更加精确。 2. **边框与背景**：CSS3支持圆角边框（border-radius）、阴影效果...
5. **表单元素生成**：HTML5新增了多种表单控件，如日期选择器、搜索框、颜色选择器等，代码生成器会简化这些元素的创建过程。 6. **实时预览**：提供实时预览功能，用户在编辑代码的同时可以看到页面效果，方便...
HTML5 课程总结，新增标签 HTML5 是新一代的 HTML 标准，2014 年 10 月由万维网联盟（W3C）完成标准制定。...HTML5 的新增标签和属性为 web 开发者提供了更多的选择和可能性，使 web 应用程序更加丰富和交互性强。
以下是一些HTML5新增的关键知识点： 1. **新增标签**： - `audio`：用于嵌入音频内容，支持多种音频格式。 - `video`：用于嵌入视频内容，支持多种视频格式。 - `canvas`：提供了一个图形绘制区域，通过...
6.5 CSS 3新增的伪类选择器 176 6.6 在脚本中修改显示样式 195 6.7 本章小结 197 第7章 字体与文本相关属性 198 7.1 字体相关属性 199 7.2 CSS 3支持的颜色表示方法 205 7.3 文本相关属性 206 7.4 CSS 3新增...
表单控件在HTML5中也得到了改进，例如新增的日期选择器、输入类型限制等，这有助于提升移动设备上的输入体验。在阅读器中，这些改进可以用于用户设置字体大小、夜间模式切换等功能。 HTML5的地理定位API允许应用...
常用的 CSS 选择器有元素选择器、id 选择器、类选择器和属性选择器等。 十三、CSS 的注释语句 CSS 的注释以“/*”开头，以“*/”结尾，支持单行和多行注释。 十四、CSS 颜色值的表达方式 CSS 颜色值有多种表达...