11. javacript高级程序设计-DOM扩展

1. DOM扩展 1.1 选择符API l querySelector() 接收一个css选择符,返回与该模式匹配的第一个元素 l querySelectorAll() 接收一个css选择符,返回所有匹配的NodeList元素 1.2 HTML5 1.2.1 与类相关的扩充 l getElementsByClassName() 接收一个参数,一个包含一或者多个类名的字符串,返回带有指定类的所有元素的NodeList l classList属性,add(value),contains(value)…

10. javacript高级程序设计-DOM

1. DOM DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序接口) 1.1 节点层次 DOM可以将任何HTML和XML文档描绘成一个由多层节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息及标记. 1.1.1 Node类型 DOM1中定义了一个Node接口,该接口由DOM中所有的节点类型实现,这个Node接口在JavaScript中作为Node类型实现. 每个节点都有一个nodeType属性,因此所有节点类型都共享着相同的基本属性和方法每个节点都有…

2020/6/11 JavaScript高级程序设计 DOM

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序接口).他描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 10.1 节点层次 DOM将任何HTML和XML文档描绘成一个由多层节点构成的结构. 文档节点(Document)是每个文档的根节点.文档节点只有一个子节点(HTML文档中实终是<html>),我们称之为文档元素(每个文档只能有一个文档元素).文档元素是文档的最外层元素,其他所有元素都包含在文档元素中. 每一段标记都能通过树中一个节点来表示,包…

javascript高级程序设计---DOM

DOM是文档对象模型的简称,DOM的基本思想是把结构化文档解析成一系列的节点,由这些节点组成数装的DOM树,所有的这些节点和最终的树状结构都有统一的对外接口,达到使用编程语言操作文档的目的,DOM可以理解为XML文档.SVG文档.HTML文档的编程接口API.DOM不属于javascript但是可以通过javascript操作DOM. 节点的概念: DOM的最小组成单位叫节点(node),一个文档的树形结构(DOM树),就是由各种不同的类型的节点组成. 对于HTML文档,节点主要有一下六种类型:…

19. javacript高级程序设计-E4X

1. E4X E4X是对ECMAScript的一个扩展, l 与DOM不同,E4X只用一个类型节点来表示XML中的各个节点 l XML对象中封装了对所有节点都有用的数据和行为.为了表示多个节点的集合,这个规范定义了XMList l 另外两个类型,Namespace和QName,分别表现命名空间和限定名…

24. javacript高级程序设计-最佳实践

1. 最佳实践 l 来自其他语言的代码约定可以用于决定何时进行注释,以及如何进行缩进,不过JavaScript需要针对其松散类型的性质创造一些特殊的约定 l javascript应该定义行为,html应该定义内容,css应该定义外观 l 这些职责上的混乱会导致难以调试的错误和维护上的问题 l javascript执行所花费的事件直接影响到web页面的性能 l DOM交互的开销很大,需要限制DOM操作的次数 l 可以考虑将javascript文件合并为单个文件 l 使用压缩器将文件尽可能变小 l…

22. javacript高级程序设计-高级技巧

1. 高级技巧 1.1 函数 l 可以使用惰性载入函数,将任何分支推迟到第一个调用函数的时候 l 函数绑定可以让你创建始终在指定环境中运行的函数,同时函数柯里化可以让你创建已经填写了某些参数的函数 l 将绑定和柯里化组合起来,可以在任意环境中以任意参数执行函数的方法 1.2 对象 ECMAScript5允许通过以下几种方式来创建防篡改对象 l 不可扩展对象,不允许给对象添加新的属性或者方法 l 密封的对象,也是不可扩展对象,不允许删除已有的属性和方法 l 冻结的对象,也是密封对象,不允许重新对象…

21. javacript高级程序设计-Ajax与Comet

1. Ajax与Comet 1.1 XMLHttpRequest对象 IE5是第一款引入XHR对象的浏览器,IE5中是通过MSXML库中的一个ActiveX对象实现的.因此在IE中可能存在MSXML2.XMLHttp, MSXML2.XMLHttp.3.0, MSXML2.XMLHttp.6.0,要支持旧浏览器,可以使用如下函数: function createXHR(){ if(typeof XMLHttpRequest != 'undefined'){ return new XMLHttpR…

18. javacript高级程序设计-JavaScript与XML

1. JavaScript与XML IE采取了下列方式: l 通过ActiveX对象来支持处理XML,而相同的对象也可以用来构建桌面应用程序 l Windows携带了MSXML库,JavaScript能够访问这个库 l 这个库包含对基本XML解析和序列化的支持,同时也支持XPath和XSLT等技术 firefox为处理XML的解析和序列化,实现了两个新类型, l DOMParser类型比较简单,其对象可以将XML字符串解析为DOM文档 l XMLSerializer类型执行相反的操作,即将DOM…

13. javacript高级程序设计-事件

1. 事件 1.1 事件流事件流描述的是从页面中接受事件的顺序,IE的事件是冒泡流,而Netscape Communicator的事件流是事件捕捉流. 1.1.1 事件冒泡 <!DOCTYPE html> <html> <title>xxx</title> <body> <div id="myDiv">click me</div> </body> </html> 如果你点击了页…

12. javacript高级程序设计-DOM2和DOM3

1. DOM2和DOM3 DOM2级规范定义了一些模块,用于增强DOM1级.“DOM2级核心”为不同的DOM类型引入了一些与XML命名空间有关的方法,这些变化只在使用XML或者XHTML,对于HTML文档没有实际意义.除了与XML命名空间有关方法外,“DOM2核心”还定义了以编程方式创建Document实例的方法,也支持了创建DocumentType对象. “DOM2级样式”模块主要针对操作元素的样式信息而开发,其简要特性总结如下: l 每个元素都有一个关联的style样式,可以用来确定和修改行…

3. javacript高级程序设计-基本概念

1.1 语法 ECMAScript借鉴了C和其他类C语言的语法 1.1.1 区分大小写 ECMAScript中的一切(变量,函数和操作符)都是区分大小写的,变量test和Test是不同的变量 1.1.2 标识符标识符,就是指变量,函数和属性的名字,或者函数的参数.标识符可以是按照以下格式规则组合起来的一或多个字符 (1). 第一个字符必须是一个字母,下划线或者一个美元符号 (2). 其他字符可以是字母.下划线.美元符号或数字标识符中的字母也可以包含扩展的ASCII或者Unicode字母字符…

1. javacript高级程序设计-JavaScript简介

JavaScript诞生于1995年,由Netscape公司布兰登·艾奇开发,JavaScript主要包括三个部分: (1). ECMAScript,由ECMA-262定义,提高核心语言功能 (2). 文档对象模型(DOM),提供访问和操作网页内容的方法和接口 (3). 浏览器对象模型(BOM),提供与浏览器交互的方法和接口…

25. javacript高级程序设计-新兴的API

1. 新兴的API requestAnimationFrame():是一个着眼于优化js动画的api,能够在动画运行期间发出信号.通过这种机制,浏览器就能够自动优化屏幕重绘操作 Page Visibility API:让开发人员知道用户什么时候正在看着页面,而什么时候页面是隐藏. Geolocation API:在得到用户许可的情况下,可以确定用户的位置 File API:可以读取文件内容,用户显示.处理和上传 Web Timing:给出了页面加载和渲染过程的很多信息,对性能优化非常有价值 We…

23. javacript高级程序设计-数据存储

1. 数据存储 1.1 cookie HTTP Cookie, cookie,最初用来在客户端存储回话信息. (1). 限制,不同浏览器对特定域名下的cookie 的个数有限制,每个域名下最好不要操过20个cookie (2). cookie的构成名称:一个唯一确定cookie的名称,不区分大小写,cookiede 名称必须经过URL编码值:存储在cookie中的字符串值,值必须被URL编码域:cookie对那个域是有效的,所有向该域发送的请求都会包含该cookie,可以包含子域,没有明确…

20. javacript高级程序设计-JSON

1. JSON JSON是一种数据格式,存在以下三种类型的值: l 简单值:使用与JavaScript相同的语法,可以在JSON中表示字符串.数值.布尔值和null,不支持 undefined,例如:5,’hello world’ l 对象:对象作为一种复杂数据类型,表示一组无须的键值对,例如: { ‘name’:’cc’, ‘age’:20 } l 数组:数据是一种复杂的数据类型,表示一组有序的列表,例如: [12,’cc’,34] ECMAScript 5对JSON的行为进行规范,支持这个对…

17. javacript高级程序设计-错误处理与调试

1. 错误处理与调试 l 在可能发生错误的地方使用try-catch方法,可以对错误进行及时的相应 l 使用window.onerror事件处理程序,这种方式可以接受try-catch不能处理的所有错误 l javascript中发生错误的主要原因如下: 类型转化未充分检测数据类型发送给服务器或者从服务器接收到的数据有错误 2. JavaScript与XML…

16. javacript高级程序设计-HTML5脚本编程

1. HTML5脚本编程 l 跨文档消息传递API能够让我们在不降低同源策略安全性的前提下,在来至不同的域的文档间传递消息 l 原生拖放功能可以方便的指定某个元素是否可以拖动,并在放置时做出响应.还可以创建自定义的可拖放元素及放置目标 l 新的媒体元素<audio>和<video>可以拥有自己的与视频和音频交互的API l 历史状态管理让我们不必卸载当前页面即可以修改浏览器的历史状态栈.…

15. javacript高级程序设计-Canvas绘图

1. Canvas绘图 HTML5的<canvas>元素提供了一组JavaScript API,让我们可以动态的创建图形和图像.图形是在一个特定的上下文中创建的,而上下文对象目前有两种. 第一种是2D上下文,可以执行原始的绘图操作, l 设置填充.描边颜色和模式 l 绘制矩形 l 绘制路径 l 绘制文本 l 创建渐变和模式第二种是3D上下文,即WebGL上下文. l 使用GLSL编写的顶点和片段着色器 l 支持类型化数组,即能够将数组中的数据限定为某种特定的数值类型 l 创建和操作纹理主流…

14. javacript高级程序设计-表单

1. 表单脚本 1.1 基础知识 <from>元素表示表单: l acceptCharset:服务器能处理的字符集 l action:接受请求的URL l elements:表单中所有控件的集合 l enctype:请求的编码类型 l length:表单中控件的数量 l method:要发送的HTTP请求类型,通常是get或者post l name:表单的名称 l reset():将所有的表单重置为默认值 l submit():提交表单 l target:用于发送和接受请求响应的窗口名称 1.…

9. javacript高级程序设计-客户端检测

1. 客户端检测 1.1 能力检测在编写代码之前先检测特定浏览器的能力. 1.2 怪癖检测怪癖实际上是浏览器实现中的bug 1.3 用户代理检测通过检测用户代理字符串来识别浏览器.用户代理字符串中包含大量与浏览器有关的信息,包括浏览器.平台.操作系统及浏览器版本.…

8. javacript高级程序设计-BOM

1. BOM 1.1 window BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象有双重身份, 1.1.1 全局作用域由于window对象同时扮演着ECMAScript中Global对象的角色,因此所有在全局作用域中声明的变量.函数都会变成window对象的属性和方法. 1.1.2 窗口关系及框架如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中.在frames集合中,可以通过数值索引(从0开始,从左至右,从上到下)…

7. javacript高级程序设计- 函数表达式

1. 函数表达式 1.1 函数定义函数定义的方式有两种:一种是函数声明,另一种就是函数表达式. (1). 函数声明:函数声明的重要特征就是函数声明提示,函数声明会在函数执行前执行 function functionName(arg0,arg1,arh2){ //函数体 } (2). 函数表达式 var functionName = function (arg0,arg1,arh2){ //函数体 } 1.2 递归递归函数是在一个函数通过名字调用自身的情况下构成的,例如: function f…

6. javacript高级程序设计-面向对象设计

1. 面向对象设计 1.1 理解对象 1.1.1 属性类型 (1). 数据属性:相当于对象的字段,包含一个数据值的位置,在这个位置可以读取和写入值.数据属性中有4个描述其行为的特性: l [[Configurable]]:表示能否通过delete删除属性从而重新定义属性 l [[Enumerable]]:表示是否通过for-in循环返回属性 l [[Writable]]:表示能否修改属性的值 l [[Value]]:包含这个属性的数据值要修改属性默认的特性,必须使用ECMAScript5的Ob…

5. javacript高级程序设计-引用类型

1. 引用类型 1.1 Object类型创建Object类型有两种方式: 使用new操作符后跟Object构造函数 var person =new Object(); 字符量表示法 var person = { name:’chuck’ } 1.2 Array类型 1.2.1 创建方式使用Array构造函数 var colors = new Array(); 字符量表示法 var colors = []; var names= [‘a’,’b’,’c’]; 1.2.2 检测数组使用 Arr…

4. javacript高级程序设计-变量、作用域和内存问题

1.1 基本类型和引用类型的值变量包含两种不同数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段,引用类型值可以由多个值构成的对象 1.1.1 动态的属性针对引用对象的值,可以为其动态的添加属性和方法 var person = new Object(); person.name = “chuck”; alert(person.name); // chuck 1.1.2 复制变量值 (1). 基本类型的变量复制 var num = 5; var num2 = num; 复制前:…

2. javacript高级程序设计-在HTML中使用JavaScript

1.1 <script>元素向HTML页面中插入JavaScript的主要方法,就是使用<script>元素,<script>元素定义了一下6个元素: (1). async:可选,表示立即下载脚本,只对外部脚本文件有效 (2). charset:可选,表示通过src属性指定的代码的字符集 (3). defer:可选,表示脚本可以延迟到文档完全被解析和显示之后再执行,只对外部脚本文件有效 (4). language:已废弃,原来用于表示编写代码使用的脚本语言 (5).…

JavaScript高级程序设计-10.11: DOM及其扩展

什么是DOM? DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 文档节点(document)是每个文档的根节点.文档元素是文档的最外层元素,文档中的其他所有元素都包含在文档元素之中.在HTML页面中,文档元素始终都是元素.在 XML 中,没有预定义的元素,因此任何元素都可能成为文档元素. 每一段标记都可以通过树中的一个节点来表示: HTML 元素通过元素节点表示,特性(att…

《JAVASCRIPT高级程序设计》DOM扩展

虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商发现某项功能缺失时,仍然会直接往DOM中添加专有扩展,以弥补不足.下面分别介绍这些标准扩展和专有扩展. 一.选择符API 选择符API的功能是根据CSS选择符选择与某个模式匹配的DOM元素.Jquery的核心就是通过CSS选择符查询DOM文档以取得元素的引用,从而抛开了getElementById(…

JavaScript高级程序设计学习笔记第十一章--DOM扩展

1.对 DOM 的两个主要的扩展是 Selectors API(选择符 API)和 HTML5 2.Selectors API Level 1 的核心是两个方法: querySelector()和 querySelectorAll(). 3.querySelector():方法接收一个 CSS 选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回 null.用法如下: //取得 body 元素 var body = document.querySelector("body"…

【11. javacript高级程序设计-DOM扩展】的更多相关文章