作者：赵建保
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
JavaScript前端开发模块化教程试读：
前言
在作者十余年的数字媒体应用技术专业建设和JavaScript课程教学实践中，每逢到网上书店或者实体书店选定教材，面对琳琅满目的JavaScript图书时我便油然而生感激和期待。感激有这么多技术大伽、一线教师、从业人员深耕技术，并不辞劳苦地分享各自的研究、开发实践和教学心得。然而已经出版的JavaScript图书多以技术为主导，又或者以某个项目为主导，多侧重于介绍孤立的知识和技术，没能融入前端开发工作过程中，由此激发了我编著此书的动力和决心。
我的初心是，以学习者胜任前端工程师岗位工作任务为目标，循序渐进，掌握HTML5、CSS3、JavaScript等技术的综合应用，熟悉JavaScript开发环境，适应网页前端开发工作的规范化、模块化和组件化岗位要求。我的思路是，以任务导入激发学习者的学习积极性，以工作过程必需的任务成果和目标维持学习者的学习动力和压力，以核心知识帮助学习者构建自己新的认知结构，任务实施过程划分为编写HTML、编写CSS、编写JavaScript和浏览器测试四大步骤，以强化训练提升学习者的知识和能力的迁移能力。期待这样的设计更有利于学习者提升JavaScript前端开发能力，更有利于学习者掌握JavaScript基本知识、基本技能、基本思想和基本开发经验，更有利于学习者提高分析问题、解决问题、发现问题和提出问题的能力，以及演绎思维和归纳思维的能力。
全书由赵建保负责整体设计、编写和统稿，刘琳、邱尚明、贺辉平、彭华参与教材设计与编写，参与编写的人员还有沈佳乐、曹盼盼、赖成发、胡铭畅、罗妩媚、石燕平、严梅燕、丁伟杰、蔡嘉威、沈泳銮、陈响钦、邓金霞、朱进旺、吕晓纯、陆洁莹、李丽彤、邓洁美、谢涌彬、苏新栋。本书得到了广东省高职教育品牌专业项目的支持，企业一线前端开发人员黄亮、邱景生、杨起捷等参与了项目任务设计并给予了全程指导，还提出了很多宝贵建议，在此表示衷心的感谢。
由于IT行业发展迅猛，作者项目实践和知识视野有限，经验不够丰富，书中不足之处在所难免，恳请读者提出宝贵的意见和建议。联系方式（E-mail）：mpcer@163.com。编者2018年10月任务1 搭建JavaScript开发环境1.1 任务导入
在Web标准中，HTML定义了页面结构和内容，CSS定义了页面布局和外观，如颜色、字体、边框、边距和版式布局等，而JavaScript定义了页面交互行为，比如元素交互、表单验证、网页游戏等。如今，缺乏动态和交互性的网站已经没有市场，网站必须以新颖的方式与用户互动，页面交互性和动态性已经是商业Web应用开发中前端开发的必备能力。随着浏览器JavaScript引擎性能的提升，未来在Web图像、音频及视频处理、虚拟现实、游戏开发等方面前途无量。要想成为Web开发工程师，掌握JavaScript必不可少。
正式开始学习JavaScript前端开发之前，需要先配置满足Web前端开发和测试的学习环境，主要是JavaScript编辑器和Web浏览器，其中JavaScript编辑器用于编写HTML、CSS和JavaScript前端代码，Web浏览器用于Web应用的开发测试。通过本任务，您将学会如何配置JavaScript前端编码和测试环境，并体验鼠标mouseover、mouseout事件时表格行背景变色效果的开发，图1-1所示为表格行悬停提示效果，从此开启您的前端征程。图1-1 表格行悬停提示效果1.2 成果目标
本任务旨在学会搭建前端开发环境，熟悉前端页面开发的基本操作流程，熟悉Visual Studio Coder的使用，培养前端开发的意识和兴趣。1.3 核心知识1.3.1 JavaScript演进
理解JavaScript的最好方法之一，就是了解JavaScript的历史。
JavaScript为互联网而生，紧随着浏览器的出现而问世。回顾它的历史，就要从浏览器的历史说起。1990年12月25日，英国计算机科学家伯纳·李爵士（Tim Berners-Lee）发明了万维网（World Wide Web）。1993年，美国国家超级计算机应用中心（NCSA）开始开发一个独立的浏览器Mosaic。1994年10月，Mosaic通信公司（Mosaic Communications）成立，不久后改名为Netscape。1994年12月，Navigator发布了1.0版，市场份额一举超过90％。Netscape同微软公司在浏览器市场的竞争异常激烈，争相给浏览器添加新功能，获取竞争优势。1995年2月，Netscape公司发布Netscape Navigator 2浏览器，该公司的布兰登·艾奇（Brendan Eich）为Navigator 2浏览器开发了LiveScript脚本语言，主要目的是处理表单数据验证，避免由服务器端验证导致的延时问题。LiveScript语法借鉴Java，函数借鉴Scheme，原型继承借鉴Self，正则表达式特性则借鉴Perl。当时正逢Sun公司的股票飞涨，为搭上Java成功的顺风车，Netscape将LiveScript改名为JavaScript。由于JavaScipt 1.0获得了巨大成功，Netscape公司随即在Netscape Navigator 3中又发布了JavaScript 1.1版本。
在Netscape Navigator 3发布后不久，微软不甘示弱，紧跟着Netscape在Internet Explorer 3中加入JavaScript脚本语言，为了避免与Netscape的JavaScript产生纠纷，微软特意将其命名为JScript，这种语言和JavaScript很像，浏览器大战就此爆发。自微软在操作系统中内置Internet Explorer 3，Netscape就面临着即将丧失浏览器脚本语言主导权的局面。1996年11月，网景公司决定将JavaScript提交给国际标准化组织ECMA，希望JavaScript能够成为国际标准，以此抵抗微软。1997年，欧洲计算机制造商协会（ECMA）以JavaScript 1.1为蓝本制订了ECMA-262新脚本语言的标准，并命名为ECMAScript，这个版本就是ECMAScript 1.0版，它规定了浏览器脚本语言的标准。之所以不叫JavaScript，一方面是由于商标的关系，Java是Sun公司的商标，根据一份授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript已经被Netscape公司注册为商标；另一方面也是想体现这门语言的制定者是ECMA，不是Netscape，这样有利于保证这门语言的开放性和中立性。因此，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。1998年6月，ECMAScript 2.0版发布。1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。2007年10月，ECMAScript 4.0版草案发布，对3.0版做了大幅升级，由于4.0版的目标过于激进，各方对于是否通过这个标准发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动；以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发，将其中涉及现有功能改善的一小部分发布为ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为Harmony（和谐）。2009年12月，ECMAScript 5.0版正式发布。Harmony项目则一分为二，一些较为可行的设想定名为JavaScript.next继续开发，后来演变成ECMAScript 6，2015年6月，ECMAScript 6发布了正式版本，并更名为ECMAScript 2015。如图1-2所示为JavaScript演进路线。图1-2 JavaScript演进路线
随着JavaScript再次成为关注的焦点，很多杰出的编程人员致力于改善JavaScript解释器，极大地改善了其运行阶段的性能。随着Gmail、GoogleMaps这一类客户端应用和Ajax的相继出现，大大促进了JavaScript开发模式的变革，也把JavaScript催生成为一种成熟的、某些方面独一无二的、拥有强大原型体系的面向对象语言。1.3.2 JavaScript介绍
程序设计语言分为解释型和编译型两大类。Java和C++等语言需要一个编译器（Compiler）。编码器是一种程序，能够把用Java等高级语言编写出来的源代码翻译为直接在计算机上执行的文件，代码错误在编译阶段就能被发现。解释型程序设计语言不需要编译器，运行仅需要解释器。JavaScript语言则由Web浏览器负责完成有关的解释和执行工作。JavaScript是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性能的解释型脚本语言，不但可用于编写客户端的脚本程序，由Web浏览器解释执行，还可以编写在服务器端执行的脚本程序，在服务器端处理用户提交的信息并动态地向客户端浏览器返回处理结果。浏览器中的JavaScript解释器将直接读入源代码并执行，代码错误只能等到解释器执行到有关代码时才能被发现。如果浏览器中没有解释器，JavaScript代码就无法执行。
JavaScript脚本语言的主要特点如下。（1）解释性。不同于一些编译性程序语言（如C、C++），JavaScript源代码不需要经过编译，而是直接嵌入在HTML页面中，使得前端页面支持用户交互并响应相应事件，在浏览器中运行时被解释。（2）基于对象。许多功能运用脚本环境对象的方法与脚本的相互作用来完成。（3）事件驱动。JavaScript可以直接对用户页面的操作行为（鼠标、键盘、手势等）做出响应，无须经过Web服务器处理。（4）跨平台。JavaScript依赖于浏览器本身，与操作环境无关，只要计算机能运行浏览器并支持JavaScript的浏览器，就可以正确执行。（5）安全性。JavaScript是一种安全性语言，不允许访问本地硬盘，不能将数据存入服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，以防止数据丢失和篡改。
JavaScript由一项主要适用于浏览器客户端的计算机技术，从一个简单的输入验证器逐渐发展成为一种多功能的强大的程序设计语言，甚至连服务端也能用它来编写，能够处理复杂的计算和交互，拥有闭包、匿名函数等，甚至元编程特性。现在已经具备了与浏览器窗口及其内容等几乎所有方面交互的能力。在互联网发展的早期，JavaScript就已经成为了支撑网页内容交互体验的基础技术，现在JavaScript毫无疑问已经成为了Web的核心技术，能够地理定位、播放视频和音频、绘图等，速度更快，性能更强。
JavaScript是世界上最流利的编程语言之一。使用JavaScript不仅可以开发浏览器应用程序，也可以开发手机应用（APP）和服务器端程序。JavaScript可实现以下功能。（1）创建拥有强大而丰富功能的Web应用程序，多数运行于Web浏览器，基于HTML5可开发应用缓存、本地存储、本地数据库等Web应用。（2）使用Node.js编写服务器端脚本。（3）开发移动设备应用程序。比如基于HTML5+的移动APP开发。1.3.3 Web页面渲染过程
Web技术的根基是HTML、CSS和JavaScript，其中HTML控制内容和结构，CSS控制表现，而JavaScript则控制交互行为。换句话说，JavaScript是让HTML和CSS协同运作的黏合剂。一个完整的JavaScript实现应该包括以下三个不同部分：核心（ECMAScript）、文档对象模型（DOM）和浏览器对象模型（BOM），如图1-3所示。图1-3 JavaScript实现
ECMAScript规定了JavaScript的语法、类型、语句、关键字、保留字、操作符和对象，它是语言的核心部分，包括变量、函数、循环等，独立于浏览器，并可以在其他环境中使用。文档对象模型（DOM）是用于操作HTML和XML文档的应用程序接口（Application Programming Interface，API），提供了一种与HTML、XML文档交互的方式。在浏览器中，主要用来操作HTML文档。HTML和DOM把整个页面映射为一个多层节点结构。HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。DOM1级（DOM Level1）于1998年10月成为W3C推荐标准，包括DOM核心（DOM Core）和DOM HTML。DOM核心规定如何映射基于XML的文档结构，以便简化对文档中任意部分的访问和操作。DOM HTML模块添加了针对HTML的对象和方法。DOM2包括DOM视图、DOM事件、DOM样式、DOM遍历和范围。浏览器对象模型（BOM）实际上是一个与浏览器环境有关的对象集合，使开发人员可以控制浏览器显示的页面以外的部分，BOM只处理浏览器窗口和框架。
Web页面渲染过程如图1-4所示，图中实线表示先后关系，虚线表示渲染过程可能调用的模块。如页面下载时需要使用网络和存储，计算布局和绘图时需要使用2D/3D图形模块生成可视化结果。具体渲染过程是：网页内容输入到HTML解释器，HTML解释器在解析后构建DOM树，如果遇到JavaScript代码则交给JavaScript引擎去处理，如果网页包含CSS则交给CSS解释器去解释，没有被定义CSS的元素渲染引擎将默认样式应用到HTML元素上。当DOM建立的时候，渲染引擎接收来自CSS解释器的样式信息，构建一个新的内部绘图模型。该模型由布局模块计算模型内部各元素的位置和大小信息，最后由绘图模块完成从模型到图像的绘制。
C、C++、Java等典型的编程语言，执行代码前必须先编译，而JavaScript只需直接在网页中编写代码，再在浏览中加载网页，浏览器JavaScript引擎就能直接执行代码。运行时，JavaScript不会修改服务器端的HTML文件，而是操控浏览器基于HTML文件构建的DOM树。图1-4 Web页面渲染过程1.3.4 Visual Studio Code介绍
2015年4月29日，微软在旧金山展览中心正式举行了Build 2015开发者大会，会上，微软发布了免费、跨平台编辑器Visual Studio Code，它是一个轻便、强大、性能优秀、功能完备的源代码编辑器，主要用于Web和云应用开发，并为Web前端开发进行优化。Visual Studio Code可运行于Windows、Mac OS和Linux平台，支持JavaScript、TypeScript和Node.js开发，借助丰富的扩展库可支持C++、C#、Java、Python、PHP和Go开发，支持.NET和Unity运行库，图1-5所示为VSCode扩展库。注意，Visual Studio Code并非Visual Studio。图1-5 VSCode扩展库1.3.5 Visual Studio Code快捷键
快捷键，又叫快速键或热键，指通过某些特定的按键、按键顺序或按键组合来完成一个操作，很多快捷键往往与Ctrl键、Shift键、Alt键、Fn键及Windows平台下的Windows键和Mac机上的Meta键等配合使用。利用快捷键可以代替鼠标快速选取命令，减少鼠标移动距离，提高代码开发速度。表1-1所示为Visual Studio Code快捷键。表1-1 Visual Studio Code快捷键1.3.6 EMMET语法
在Visual Studio Code、WebStorm等编程环境中，构建HTML文档结构时，常用EMMET语法，EMMET语法主要有后代>、兄弟+、上级^、分组（）、乘法*、自增符号$，具体用法如表1-2所示。表1-2 EMMET常用语法1.3.7 Node.js介绍
Node.js发布于2009年5月，由Ryan Dahl开发，使用高效且轻量级的事件驱动、非阻塞I/O模型，是一个基于Chrome V8引擎的JavaScript运行环境和平台。Node.js实质是对Chrome V8引擎进行了封装，V8引擎执行JavaScript的速度非常快，性能非常好，非常适合在分布式设备上运行密集型数据的实时应用，用于方便地搭建响应速度快、易于扩展的网络应用。包管理器npm是目前世界上最大的开源库生态系统。1.3.8 http-server介绍
http-server是一个简单的零配置命令行HTTP服务器，非常适合日常测试、本地开发等环境。启动http-server的命令是："http-server[path][options]"，其中path是网站发布根目录文件夹路径，options是服务器配置参数，具体如表1-3所示。表1-3 http-server参数说明1.3.9 在HTML中使用JavaScript
HTML页面由定义页面结构和内容的HTML、定义布局和外观的CSS和改变交互行为的JavaScript脚本相互结合而成。在HTML中使用JavaScript时，使用结束标记不能省略。带有src属性的之间嵌入JavaScript代码，嵌入的代码会被忽略，即不能在引用JavaScript文件的同时内嵌JavaScript代码。需要同时存在时，分别使用两个
使用之间，JavaScript是所有现在浏览器及HTML5默认的脚本语言，在script标签中不必使用type=“text/javascript”。商业开发应尽量避免把JavaScript代码直接嵌入文档，但对于练习来说，倒是一种简捷的测试手段。在脚本内部出现
字符串时使用转义字符“\”解决，如：JavaScript代码是否写到HTML文件中，并不存在硬性规定，但使用外部文件是最佳实践，具有以下好处。（1）可维护性。遍及不同HTML页面的JavaScript会造成维护问题，若把所有JavaScript文件都放在一个文件夹中，维护起来就轻松多了，否则JavaScript开发人员会受HTML标记干扰，难于集中精力开发JavaScript。（2）可缓存。浏览器根据设置缓存链接的外部JavaScript文件。如果两个页面都使用同一个文件，那么这个文件只需下载一次，可以加快页面的加载速度。1.3.10 高性能JavaScript
随着Web应用日趋丰富，越来越多的JavaScript被运用到网页中，前端性能对用户体验的影响备受关注，成为开发者所面临的最严重的可用性问题。JavaScript性能涉及语言特性、数据结构、浏览器机理、网络传输等导致性能问题的原因。在本书相关任务中将陆续介绍如何关注并提升JavaScript性能，实现高性能JavaScript开发。
IE8、Firefox 3.5、Chrome2都允许并行下载JavaScript文件，所以
HTML5提供的async属性用于异步加载脚本，async与defer的相同点是采用并行下载，在下载过程中不会产生阻塞，区别在于执行时机，async是加载完成后自动执行，而defer需要等待页面加载完成后执行。
2. 使用动态脚本
一段脚本是计算机能够一步一步遵照执行的一系列指令。每一条单独的指令或步骤叫一条语句。使用动态脚本有两种方式：一种方式是通过修改script对象的src属性值来更换一个外部JavaScript文件；另一种方式是使用document.write（）方法输出JavaScript脚本，这些动态输出的脚本会被马上执行，例如：
document.write（）方法输出的JavaScript字符串必须放在
新创建的script标签src属性所指定的file1.js文件，无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程，动态脚本也可以插入到head标签内而不会影响页面的其他部分。
使用动态脚本节点下载文件时，返回的代码通常会立刻执行。但是当代码中包含供页面其他脚本调用的接口时，必须跟踪并确保脚本下载完成且准备就绪。可以在动态脚本的元素上注册load事件，通过监听此事件来获得脚本加载完成时的状态。动态脚本加载状态检测代码如下：function loadScript(url, callback) { var script = document.createElement("script"); script.src = url; document.getElementsByTagName("head")[0].appendChild(script); if (script.readyState) { script.onreadystatechange = function () { if (script.readyState == "load" || script.readyState == "complete") { script.onreadystatechange = null; callback(); } }; } else { script.onload = function () { callback(); } } }
这个函数接受两个参数，JavaScript文件的URL和完成加载后的回调函数。函数中使用了特征检测来决定在脚本处理过程中监听哪个事件，再给src属性赋值，然后将script标签插入到页面。loadScript（）函数的用法如下：// 加载单个js文件 loadScript('file1.js', function () { alert(' 文件已经加载！') }) // 确保按顺序加载file2.js 、file3.js 和file4.js loadScript('file2.js', function () { loadScript('file3.js', function () { loadScript('file4.js', function () { alert(' 所有文件完成加载！') }) }) })
可以动态加载尽可能多的JavaScript文件到页面上，但要注意文件的加载顺序。在所有主流浏览器中，只有Firefox和Opera能保证脚本会按照指定的顺序执行，其他浏览器将会按照从服务端返回的顺序下载和执行代码。解决加载顺序依赖的更好的做法是按正确顺序合并成一个文件，下载这个文件就能获得所有执行代码。如果script标签设定了defer属性，文件大并不会有显著的性能影响。动态脚本加载凭借跨浏览器和易用的优势，成为最通用的无阻塞加载解决方案。
3. XMLHttpRequest脚本注入
首先创建XMLHttpRequest（XHR）对象，然后用它下载JavaScript文件，最后通过创建动态script元素将代码注入页面中，代码如下：var xhr = newXMLHttpRequest() xhr.open('get', 'file1.js', true) xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) { var script = document.createElement('script') script.text = xhr.responseText document.body.appendChild(script) } } } xhr.send(null)
以上代码发送一个get请求获取file1.js文件。事件处理函数onReadyStateChange检查readyState是否为4，同时检验HTTP状态码是否有效（2XX表示有效响应，304表示从缓存读取）。如果收到有效响应，就会创建一个script元素，设置该元素的text属性为从服务器上接收到的responseText。
这种方法的优点是可以下载JavaScript代码但不会立即执行，由于代码是script标签之外返回的，因此它下载后不会自动执行，开发者可以控制执行时机；另一个优点是代码浏览器兼容性好。该方法的主要局限性是JavaScript文件必须与所请求的页面处于相同的域，JavaScript文件不能从CDN下载，大型Web应用通常不会采用XHR脚本注入技术。
4. 推荐的阻塞模式
向页面中添加大量JavaScript的推荐做法是先添加动态加载所需的代码，然后加载初始化页面所需的剩下的代码。因为第一部分的代码尽量精简，甚至可能只包含loadScript（）函数，下载执行都很快，不会对页面有太多影响。一旦动态加载代码就位，就可以用它加载剩余的JavaScript。将代码放在body结束标签之前，确保JavaScript在执行过程中不会阻碍页面其他内容的显示。其次，当第二个JavaScript文件完成下载时，应用所需要的所有DOM结构已经创建完毕，能够执行交互准备，从而避免需要检测页面是否加载完成。使用阻塞模式加载JavaScript的代码如下：function loadScript(url, callback){ var script = document.createElement("script"); script.src = url; document.getElementsByTagName("head")[0].appendChild(script); if (script.readyState) { script.onreadystatechange = function () { if (script.readyState == "load" || script.readyState == "complete") { script.onreadystatechange = null; callback(); } }; } else { script.onload = function () { callback(); } } } loadScript("rest.js", function () { //回调函数 })
我们也可以采用Yahoo工程师Ryan Grove创建的更为通用的延迟加载工具LazyLoad，网址是http://github.com/rgrove/lazyload/，LazyLoad是loadScript（）函数的增强版，该文件压缩后约为1.5KB。1.3.15 选取DOM对象
document对象由HTML元素构成，HTML元素用于描述网页的结构，一个元素包含起始标签和结束标签及标签内的内容。起始标签可以包含属性，属性通常描述该元素的更多信息，全局属性适用于每个元素，例如class、id、title属性。属性有名称和值，值通常包含在一对双引号中，如图1-6所示。
有少数不包含任何内容的元素（例如img、br），它们有自结束的标签。可以通过HTML元素的id属性、类属性和标签名称来选取DOM元素，还可以通过W3C Selectors API规范中的querySelector（）和querySelectorAll（）方法来选取元素。其中用于选取单个元素的方法有getElementById（）、querySelector（），用于多个元素选择的方法有getElementsByClassName（）、getElementsByTagName（）和querySelectorAll（）。图1-6 HTML元素结构
document对象在浏览器窗口载入Web页面时建立，包含了页面的属性（如title）、页面事件（如load、click）和方法（如getElementById），使用document对象可以访问或修改用户在页面上看到的内容，并根据用户与页面的交互方式进行响应。其中，title属性就是head标签内的title标签值。lastModified属性是页面最后修改时间。需要注意的是，选择元素时尽量明确界定元素搜索范围，比如通过指定祖先元素、指定层级关系来限定查找范围，提高搜索效率。
1. getElementById
getElementById方法是document对象特有的方法，JavaScript语言是区分字母大小写的，写成“getElementsById”“GetElementById”和“getElementByID”等将无法选取元素。函数名后的圆括号设置要选取元素的id属性值，id属性值必须放在单引号或双引号里，getElementById返回带有指定id属性值的元素节点对应的对象，这个对象对应着document对象里的一个独一无二的元素，比如document.getElementById（"btn-alert"）。一般来说，无须为文档里的每一个元素都定义一个独一无二的id值，DOM提供了另外的方法来获取那些没有id属性的对象。支持的浏览器最低版本为IE5.5、Opera、所有版本的Chrome、Firefox和Safari。
2. getElementsByClassName
getElementsByClassName能够通过元素头标记中的class属性的类名来访问元素，该方法只接受查找的类名作为参数，语法格式为document.getElementsByClassName（"class"）。查找带有多个类名的元素时，通过在类名之间使用空格来分隔类名，语法格式为document.get ElementsByClassName（"class1class"），匹配与类的指定顺序无关，与是否全部匹配无关，只要包含了指定的类名就匹配，该方法返回一个具有相同类名的元素数组。可通过数组索引值来访问个别元素，或者通过使用数组长度length属性构建循环遍历每个元素，并执行相同的操作，比如绑定鼠标事件或者设置样式。支持的浏览器最低版本为IE9、Opera10、所有版本的Chrome4、Firefox3和Safari4。为了兼顾老式浏览器，程序员需要使用已有的方法实现document.get ElementsByClassName，代码如下：function getElementsByClassName(node, classname){ if (node.getElementsByClassName) { return node.getElementsByClassName(classname); } else { var results = newArray(); var elems = node.getElementsByTagName(" * "); for (var i = 0; i < elems.length; i++) { if (elems[i].className.indexOf(classname) != -1) { results[results.length] = elems[i]; } } return results; } }
该函数接受node和classname两个参数，node表示DOM树的搜索起点，classname是要搜索的类名。如果浏览器支持getElementsByClassName函数就直接返回节点列表，否则，循环遍历所有标签，查找具有类为classname的元素，然后以返回节点列表。
3. getElementsByTagName
getElementsByTagName方法返回指定标签的元素节点对应的对象数组，即使整个文档里只有一个元素，也返回一个长度为1的数组，函数名后的圆括号设置要获得的元素标签名称，每个对象分别对应着文档里有着给定标签的一个元素，getElementsByTagName允许把一个通配符（*）作为它的参数，返回文档中元素节点的总数，用length属性查出这个数组的元素个数，也可以把getElementsByTagName赋值给一个变量来改善代码的可读性。例如：var para = document.getElementsByTagName('* ') for (var i = 0;i < para.length;i++) { console.log(para[i].nodeName) }
可通过数组索引值来访问个别元素，或者通过使用数组长度length构建循环，对每个选取的对象执行相同的操作，比如绑定鼠标事件或者设置样式。可以把getElementById和getElementsByTagName结合起来，通过id元素节点限定标签查询范围，从而精确地获取某个特定元素包含的子元素对象。例如：var myCarousel = document.getElementById('carousel') var items = myCarousel.getElementsByTagName('div') for (var i = 0;i < items.length;i++) { console.log(items[i].nodeName) }
以上两条语句执行完毕后，items数组将只包含id属性值是carousel的元素所包含的div元素。支持的浏览器最低版本为IE6、Opera10、所有版本的Chrome、Firefox3和Safari4。
4. querySelector和querySelectorAll
W3C Selectors API规范中定义了querySelector和querySelectorAll方法，这种方式自然比使用JavaScript和DOM来遍历查找元素更快，其作用是根据CSS选择器规范，便捷地定位文档中指定的元素。querySelector和querySelectorAll的参数须是符合CSS选择器的字符串。querySelector（）能够获得第一个匹配的节点。querySelector（）和querySelectorAll（）都是DOM对象节点的属性，document.querySelectorAll（）可以查询整个文档，而el.querySelectorAll（）在子节点中进行查询。querySelectorAll（）使用CSS选择器作为参数并返回一个NodeList，NodeList包含着匹配节点的类数组对象，而不是HTML集合，返回的节点不会对应实时的文档结构。例如获取页面id属性为slide的元素：document.querySelector("#slide")
或者用document.querySelectorAll("#slide")[0] 。
querySelectorAll（）处理大量组合查询时效率更高，用法是：var divs=document.querySelectorAll("div.wrap,div.menu");
如果不使用querySelectorAll，要获得相同的结果则复杂得多，需要选择所有的div元素，遍历剔除那些不符合条件的部分，然后将获得的元素添加到元素集合数组，代码如下：var errs = [], divs = document.getElementsByTagName("div"), classname = ""; for (var i = 0, len = divs.length; i < len; i++) { classname = divs[i].className; if (classname === "wrap" || classname === "menu") { errs.push(divs[i]) } }
支持的浏览器最低版本为IE8、Opera10、所有版本的Chrome、Firefox3.5和Safari4。
5. 获取兄弟元素
先获取此元素的父节点的所有子节点，因为所有子节点也包括此元素自己，所以要从结果中去掉自己，再将符合条件的兄弟元素加入元素集合数组并返回。代码如下：function siblings (elm) { var arr_siblings = [] var p = elm.parentNode.children for (var i = 0,pl = p.length;i < pl;i++) { if (p[i] !== elm)a.push(p[i]) } return a }
还有另外一种看起来比较奇特的方法：先找到此元素的父节点的第一个子节点，然后循环查找此节点的下一个兄弟节点，一直到查找完毕。如jQuery里面获取兄弟节点的代码如下：function sibling (elem) { var r = [] var n = elem.parentNode.firstChild for (;n;n = n.nextSibling) {
试读结束[说明：试读内容隐藏了图片]