第一章 1.6 HTML5 的新功能(二)

1.6.4  使用 Selectors API 简化选取操作

除了语义化元素外，HTML5 还引入了一种用于查找页面 DOM 元素的快捷方式。 1-3 列出表了在 HTML5 出现之前，用来在页面中查找特定元素的函数。

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

有了新的 Selectors API 之后，可以用更精确的方式来指定希望获取的元素，而不必再用标准DOM 的方式循环遍历。Selectors API 与现在 CSS 中使用的选择规则一样，通过它我们可以查找页面中的一个或多个元素。例如，CSS 已经可以基于嵌套（nesting）、兄弟节点（sibling）和子模式（child pattern）进行元素选择。CSS 的最新版除添加了更多对伪类(pseudo-classe)的支持（例如判断一个对象是否被启用、禁用或者被选择等），还支持对属性和层次的随意组合叠加。使用表 1-4 中的函数就能按照 CSS 规则来选取 DOM 中的元素。

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

可以为 Selectors API 函数同时指定多个选择规则，例如：
// 选择文档中类名为 highClass 或 lowClass 的第一个元素

var x = document.querySelector(“.highClass”, “.lowClass”);对 于 querySelector() 来 说 ， 选 择 的 是 满 足 规 则 中 任 意 条 件 的 第 一 个 元 素 。 对 于querySelector- All()来说，页面中的元素只要满足规则中的任何一个条件，都会被返回。多条规则是用逗号分隔的。以前在页面上跟踪用户操作很困难，但新的 Selectors API 提供了更为便捷的方法。比如，页面上有一个表格，我们想获取鼠标当前在哪个单元格上。从代码清单 1-3 中可以看到使用 SelectorsAPI 实现有多简单。这份源代码也可以从 code/intro 路径下找到。

代码清单 1-3 使用 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> <!-- create a table with a 3 by 3 cell display --><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 themusing querySelector('td:hover').</div><button type="button" id="findHover" autofocus>Find 'td:hover' target</button><div id="hoverResult"></div><script type="text/javascript">document.getElementById("findHover").onclick = function() {// 找到鼠标当前悬停的单元格var hovered = document.querySelector("td:hover");if (hovered)document.getElementById("hoverResult").innerHTML = hovered.innerHTML;}</script> 
</section>
</body>
</html>

从以上示例可以看到，仅用一行代码即可找到用户鼠标下面的元素：

var hovered = document.querySelector(“td:hover”);

提示 Selectors API不仅仅只是方便，在遍历DOM的时候，Selectors API通常会比以前的子节点搜索API更快。为了实现快速样式表，浏览器对选择器匹配进行了高

不难理解为什么 W3C 中的 Selectors API 标准规范会从 CSS 规范中单独分离出来，从上面的代码也可以看出来，Selectors API 在样式应用以外同样大有作为。虽然本书不会深入讲解 SelectorsAPI 的全部细节，但是对于希望优化 DOM 操作方式的 Web 开发人员来说，建议使用新的 SelectorsAPI 以便快速查询应用架构。度优化。

1.6.5 JavaScript 日志和调试

JavaScript 日志和浏览器内调试从技术上讲虽然不属于 HTML5 的功能，但在过去的几年里，相关工具的发展出现了质的飞跃。第一个可以用来分析 Web 页面及其所运行脚本的强大工具是一款名为 Firebug 的 Firefox 插件。

现在，相同的功能在其他浏览器的内嵌开发工具中也可以找到：Safari 的 Web Inspector、Google 的 Chrome 开发者工具（Developer Tools） IE 的开发者工具、（Developer Tools） 以及 Opera，的 Dragonfly。图 1-3 是 Google 的 Chrome 开发者工具截图，显示了大量与当前 Web 页面相关的信息（使用快捷键 Ctrl+Shift+J 可以看到），包括调试控制台、资源视图、存储视图等。

很多调试工具支持设置断点来暂停代码执行、分析程序状态以及查看变量的当前值。

console.log API 已经成为 JavaScript 开发人员记录日志的事实标准。为了便于开发人员查看记录到控制台的信息，很多浏览器提供了分栏窗格的视图。console.log API 要比 alert()好用很多，因为它不会阻塞脚本的执行。

1.6.6window.JSON

JSON 是一种相对来说比较新并且正在日益流行的数据交换格式。作为 JavsScript 语法的一个子集，它将数据表示为对象字面量。由于其语法简单和在 JavaScript 编程中与生俱来的兼容性，JSON 变成了 HTML5 应用内部数据交换的事实标准。典型的 JSON API 包含两个函数，parse()和 stringify()（分别用于将字符串序列化成 DOM 对象和将 DOM 对象转换成字符串）。

如果在旧的浏览器中使用 JSON，需要 JavaScript 库（有些可以从http://json.org 找到）。在JavaScript中执行解析和序列化效率往往不高，所以为了提高执行速度，现在新的浏览器原生扩展了对 JSON 的支持，可以直接通过 JavaScript 来调用 JSON 了。这种本地化的 JSON 对象被纳入了ECMAScript 5 标准，成为了下一代 JavaScript 语言的一部分。它也是 ECMAScript 5 标准中首批被浏览器支持的功能之一。所有新的浏览器都支持 window.JSON，将来 JSON 必将大量应用于HTML5 应用中。

1.6.7DOM Level 3

事件处理是目前 Web 应用开发中最令人头疼的部分之一。除了 IE 以外，绝大多数浏览器都支持处理事件和元素的标准 API。早期 IE 实现的是与最终标准不同的事件模型， IE9 将会支持而DOM Level 2 和 DOM Level 3 的特性。如此，在所有支持 HTML5 的浏览器中，我们终于可以使

用相同的代码来实现 DOM 操作和事件处理了，包括非常重要的 addEventListener()和dispatchEvent()方法。

1.6.8 Monkeys、Squirrelfish 和其他 JavaScript 引擎

最新一轮的浏览器创新不仅仅是增加了新的标签和 API。最重要的变化之一是主流浏览器中JavaScript/ECMAScript 引擎飞快的升级。新的 API 提供了很多上一代浏览器无法实现的功能，因而脚本引擎整体执行效率的提升，不论对现有的，还是使用了最新 HTML5 特性的 Web 应用都有好处。还记得浏览器在显示复杂图像、处理数据或者编辑长篇文章时，明显变得迟钝的情景吗？再好好想一想。

最近几年，浏览器厂商争相比拼，看谁能开发出更快的 JavaScript 引擎。过去的 JavaScript

纯粹是被解释执行，而最新的引擎则直接将脚本编译成原生机器代码，相比 2005 年前后的浏览器，速度的提升已经不在一个数量级上了。

大约从 2006 年 Adobe 将其 JIT 编译引擎和代号为 Tamarin 的 ECMAScript 虚拟机捐赠给Mozilla 基金会开始，竞争的序幕就拉开了。尽管新版的 Mozilla 中 Tamarin 技术已经所剩无几，但 Tamarin 的捐赠促进了各家浏览器对新脚本引擎的研发，而这些引擎的名字就如同他们声称的性能一样有意思。

转载于:https://www.cnblogs.com/bjmumu/p/3924065.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/375679.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Mercurial hg web server的配置

Mercurial hg web server的配置

在windows下安装tortoisehg-1.0.3-hg-1.5.3-x64.exe的版本控制工具后&#xff0c;克隆建立中心库后&#xff0c;启动web server&#xff0c;其他分库可以连接中心库进行pull但无法push。 这个可能是tortoisehg工具的问题&#xff0c;需要手工在.hg/hgrc文件中加入以下内容才可以…
阅读更多...
dorado开发模式下实现动态查询

dorado开发模式下实现动态查询

使用dorado开发模式,我们可以实现以下开发技巧 开发技巧1.实现动态查询功能: 1. 查询按钮的onClick事件中写入: datasetEmployee.parameters().setValue(“employee_id”, editor_employee_id.value); datasetEmployee.parameters().setValue(“employee_name”, editor_employ…
阅读更多...
港澳通行证办理手续

港澳通行证办理手续

港澳通行证办理手续&#xff1a; 一、办理前准备 1、 户口本 原件复印件。 2、 身份证 (一张纸&#xff0c;正反面)原件复印件。 3、 两张两寸白底免冠照片。 二、办理地点 1、户口所在地公安局 出入境管理处&#xff08;科&#xff09;。 三、办理时 1、排队、填写 【往来港澳…
阅读更多...
undefined reference to `cv::VideoCapture::VideoCapture()'

undefined reference to `cv::VideoCapture::VideoCapture()'

缺少库&#xff0c;添加相应库就行&#xff0c;我的Qt Create中做的是&#xff1a; LIBS -L/home/mima111/opencv345/lib -lopencv_imgcodecs -lopencv_core -lopencv_highgui -lopencv_imgproc -lopencv_videoio 实际上添加-lopencv_videoio就行
阅读更多...
HDU2602 （0-1背包）

HDU2602 （0-1背包）

Bone Collector Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 39259 Accepted Submission(s): 16261 Problem DescriptionMany years ago , in Teddy’s hometown there was a man who was called “Bone Col…
阅读更多...
博客3万访问量了……

博客3万访问量了……

博客有3万访问量了呢。自从第一次用了赠送的1500的流量券&#xff0c;粉丝了从零突破了&#xff0c;到现在有150个粉丝了。 之前预想的写博客的初衷&#xff0c;也是记录自己的学习过程&#xff0c;毕竟好记忆不如烂笔头&#xff0c;记录下来就是长长久久的&#xff0c;随时可以…
阅读更多...
Mint17 一些安装备忘

Mint17 一些安装备忘

1&#xff0c;中文输入法&#xff1a; sudo apt-add-repository ppa:fcitx-team/dailybuild-fcitx-master sudo apt-get update sudo apt-get upgrade sudo apt-get remove ^ibus* sudo apt-get remove ^fcitx* sudo apt-get install fcitx fcitx-bin fcitx-config-common fcit…
阅读更多...
error: ‘CV_BGR2RGB’ was not declared in this scope

error: ‘CV_BGR2RGB’ was not declared in this scope

缺少库&#xff0c;添加相应库就行&#xff0c;ubuntu中Qt Create设置如下 LIBS -L/home/mima111/opencv345/lib -lopencv_imgcodecs -lopencv_core -lopencv_highgui -lopencv_imgproc -lopencv_videoio 实际只要添加-lopencv_imgproc就行&#xff0c;CV_BGR2RGB变量存储在该…
阅读更多...
Struts学习之手动验证

Struts学习之手动验证

* 首先要从页面中获取对应的标签name属性的值&#xff0c;在动作类action中声明同名的属性&#xff0c;提供get和set方法 * 要继承ActionSupport类或者实现Validateable接口 * 重写Validateable接口的validate()方法 * 前提是&#xff1a;要保证setUsername()、va…
阅读更多...
《启示录-打造用户喜爱的产品》读书小结

《启示录-打造用户喜爱的产品》读书小结

2014年大学毕业和研究生入学之间的暑假&#xff0c;我读完了这本书。该书主要内容为介绍产品经理的一些工作经验。分三方面内容系统介绍&#xff1a;人员、流程和产品。第一遍读后&#xff0c;了解了一些产品经理的工作内容&#xff0c;也学习了很多优秀产品经理的理念。转载于…
阅读更多...
循环多少次？

循环多少次？

循环多少次&#xff1f; Time Limit : 3000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Submission(s) : 17 Accepted Submission(s) : 12 Problem Description我们知道&#xff0c;在编程中&#xff0c;我们时常需要考虑到时间复杂度&#xff0…
阅读更多...
关于数据库表的“记录”与“字段”

关于数据库表的“记录”与“字段”

何谓表的记录&#xff1a; 就是数据库中的一张表中的随便任意一行称之为记录 何谓表的字段&#xff1a; 就是数据库中的一张表中的随便任意一列称之为字段转载于:https://www.cnblogs.com/cyh2009/p/4706021.html
阅读更多...
error: use of deleted function

error: use of deleted function

本文案例仅供参考 出错的代码如下&#xff1a; TEST(Test, test1) {TestImpl impl TestImpl(para1, para2);ASSERT_EQ("jkj", impl.func("22", "33", "44")); }实际应该这样&#xff1a; TEST(Test, test1) {TestImpl impl(para1, …
阅读更多...
WPF PasswordBox不支持绑定解决方法

WPF PasswordBox不支持绑定解决方法

PasswordBox的Password属性因为安全原因不支持直接绑定&#xff0c;可以使用依赖属性实现。直接插入代码 public class PasswordBoxHelper{public static readonly DependencyProperty PasswordProperty DependencyProperty.RegisterAttached("Password",typeof(stri…
阅读更多...
error: expected unqualified-id before 'public'

error: expected unqualified-id before 'public'

Error Coding class A{ }&#xff1b;class B public : A { };Correct Coding class A{ };class B : public A{ };
阅读更多...
C# 方法返回值的个数

C# 方法返回值的个数

方法返回值类型总的来说分为值类型&#xff0c;引用类型,Void 有些方法显示的标出返回值 public int Add(int a,int b) {return ab; } 有些方法隐式的返回返回值&#xff0c;我们可以将上面的方法改改&#xff1a; public void Add(int a,int b,out int sum) {sumab; } 怎么样&…
阅读更多...
【Java】Java里String 的equals和==

【Java】Java里String 的equals和==

Java里面有对象和对象的引用的概念&#xff0c;在String方面&#xff0c;比较的是引用&#xff0c;equals比较的是对象的具体值。 String s1 new String("abc");String s2 new String("abc");System.out.println(s1 s2);System.out.println(s1.equals(s…
阅读更多...
marked override, but does not override

marked override, but does not override

检查这个函数对应的基类函数 看是否是虚函数看函数参数是否对应
阅读更多...
STL中的lower_bound和upper_bound的理解

STL中的lower_bound和upper_bound的理解

STL迭代器表述范围的时候&#xff0c;习惯用[a, b)&#xff0c;所以lower_bound表示的是第一个不小于给定元素的位置 upper_bound表示的是第一个大于给定元素的位置。 譬如&#xff0c;值val在容器内的时候&#xff0c;从lower_bound到 upper_bound表示的就是整个容器中与val相…
阅读更多...
because the following virtual functions are pure within

because the following virtual functions are pure within

构建了包含纯虚函数的对象 包含纯虚函数的类不能实例化为对象
阅读更多...
最新文章

Copyright @ 2022~2023