除了传统的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新增...
常用的 CSS 选择器有元素选择器、id 选择器、类选择器和属性选择器等。 十三、CSS 的注释语句 CSS 的注释以“/*”开头，以“*/”结尾，支持单行和多行注释。 十四、CSS 颜色值的表达方式 CSS 颜色值有多种表达...
在HTML5中，新增了许多元素和API，使得开发者能够创建更动态、交互性更强的网页应用。CSS3则带来了更复杂的布局方式和丰富的动画效果。在本主题中，我们关注的是一个基于HTML5和CSS3的日期区间选择插件，它为用户...