javascript

2016-01-15 12:34:03   1  举报





AI智能生成

JavaScript是一种高级的、解释型的编程语言，主要用于网页和应用程序的开发。它是Web的三大核心技术之一，与HTML和CSS一起，构建了互联网的基础。JavaScript具有动态性，可以直接在浏览器中运行，无需编译。它支持面向对象和函数式编程风格，拥有丰富的内置对象和强大的DOM操作能力。此外，JavaScript还具备事件驱动的特性，能够响应用户的交互行为。随着Node.js的出现，JavaScript也能够用于服务器端开发。总的来说，JavaScript是一门强大而灵活的语言，广泛应用于各种场景。

作者其他创作

大纲/内容

13 事件

事件流

事件冒泡

事件捕获

DOM事件流

三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段

事件处理程序

HTML事件处理程序

DOM0 级事件处理程序

DOM2 级事件处理程序

addEventListener()、removeEventListener()

要处理的事件名、作为事件处理程序的函数和一个布尔值

addEventListener()、removeEventListener()

IE事件处理程序

attachEvent()和detachEvent()

支持IE 事件处理程序的浏览器有IE 和Opera

在IE 中使用attachEvent()与使用DOM0 级方法的主要区别在于事件处理程序的作用域。在使用DOM0 级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this 等于window

跨浏览器的事件处理程序

事件对象

DOM中的事件对象

兼容DOM 的浏览器会将一个event 对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法（DOM0 级或DOM2 级），都会传入event 对象

IE中的事件对象

跨浏览器的事件对象

事件类型

UI事件

DOMActivate

load、unload、abort、error

select、resize、scroll

焦点事件

blur、focus

鼠标与滚轮事件

click、dblclick、mousedown

mouseenter、mouseleave、mousemove

mouseout、mouseover、mouseup

clientX 和clientY、pageX 和 pageY

screenX 和screenY

shiftKey、ctrlKey、altKey 和metaKey

键盘与文本事件

keydown、keypress、keyup

textInput

keyCode

复合事件

变动事件

HTML5 事件

contextmenu 事件

beforeunload 事件、询问用户是否真想离开

DOMContentLoaded 事件

window 的load 事件会在页面中的一切都加载完毕时触发，但这个过程可能会因为要加载的外部资源过多而颇费周折。而DOMContentLoaded 事件则在形成完整的DOM 树之后就会触发

pageshow 和pagehide 事件

用浏览器的“后退”和“前进”按钮时加快页面的转换速度

hashchange 事件

设备事件

orientationchange 事件

MozOrientation 事件

deviceorientation 事件

devicemotion 事件

触摸与手势事件

触摸事件

手势事件

内存和性能

事件委托

最适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup 和keypress。虽然mouseover 和mouseout 事件也冒泡，但要适当处理它们并不容易，而且经常需要计算元素的位置

移除事件处理程序

模拟事件

DOM中的事件模拟

可以在document 对象上使用createEvent()方法创建event 对象。这个方法接收一个参数，即表示要创建的事件类型的字符串

UIEvents、MouseEvents

MutationEvents、HTMLEvents

模拟事件的最后一步就是触发事件。这一步需要使用dispatchEvent()方法

1. 模拟鼠标事件

2. 模拟键盘事件

3. 模拟其他事件

4. 自定义DOM 事件

IE中的事件模拟

14 表单脚本

表单的基础知识

通过document.forms 可以取得页面中所有的表单。在这个集合中，可以通过数值索引或 name 值来取得特定的表单

提交表单

type 特性的值设置为"submit"即可，而图像按钮则是通过将的type 特性值设置为 "image"来定义

用submit()方法也可以提交表单

在第一次提交表单后就禁用提交按钮，或者利用onsubmit 事件处理程序取消后续的表单提交操作。

重置表单

表单字段

共有的表单字段属性

disabled、form、name、readOnly、tabIndex、type、value

共有的表单字段方法

autofocus

focus()和 blur()

共有的表单字段事件

blur、change、focus

change 事件则经常用于验证用户在字段中输入的数据

文本框脚本

选择文本select

在文本框获得焦点时选择其所有文本

2. 取得选择的文本

：selectionStart 和selectionEnd。

E8 及更早的版本中有一个document.selection 对象

3. 选择部分文本

setSelectionRange()

过滤输入

1. 屏蔽字符

2. 操作剪贴板

clipboardData 对象有三个方法：getData()、setData()和clearData()。

有取消copy、cut 和paste 事件，才能阻止相应操作发生

beforecopy、copy、beforecut、cut、beforepaste、paste事件

自动切换焦点

子主题

15 Canvas绘图

16 HTML5脚本编程

17 错误处理与调试

18 javascript与XML

19 E4X

20 JSON

21 Ajax与Comet

22 高级技巧

23 离线应用与客户端存储

24 最佳实践

javascript简介

javascript简史

javascript实现

核心（ECMAScript）（提供核心语言功能）

我们常见的Web 浏览器只是ECMAScript 实现可能的宿主环境之一。宿主环境不仅提供基本的 ECMAScript 实现，同时也会提供该语言的扩展，以便语言与环境之间对接交互。而这些扩展——如 DOM，则利用ECMAScript 的核心类型和语法提供更多更具体的功能，以便实现针对环境的操作。

规定语言组成部分

语法

类型

语句

关键字

保留字

操作符

对象

对实现该标准规定的各个方面内容的语言的描述

文档对象模型（DOM）（提供访问和操作网页内容的方法和接口）

DOM级别

DOM1级

DOM核心（映射基于XML文档的结构，简化访问于操作)）

DOM HTML（扩展DOM核心，添加了针对html的对象和方法）

DOM2级

DOM视图（定义了跟踪不同文档视图的接口）

DOM事件（事件和事件处理的接口）

DOM样式（css为元素应用样式的接口）

DOM遍历和范围（遍历和操作文档树的接口）

DOM3级

DOM加载和保存模块（统一方式加载和保存文档的方法）

DOM验证模块（验证文档方法）

支持XML1.0规范

浏览器对象模型（BOM）（提供与浏览器交互的方法和接口）

javascript版本

html中使用js

< script>元素（可以跨域）（加载js代码，解析、执行完成以后才进行其它动作）

置于之前

延迟脚本（defer="defer"）

异步脚本（async 不保证下载顺序）

嵌入代码与外部文件

可维护性

可缓存

适应未来

文档模式

怪异模式

标准模式

基本概念

语法

区分大小写

标识符（变量、函数、属性的名字，或函数参数）第一个字符必须是一个字母、下划线（_）或一个美元符号（$）其他字符可以是字母、下划线、美元符号或数字。

注释（//单行，/**/双行）

严格模式（在顶部添加代码："use strict";）

语句（以分号；结束）

关键字和保留字

变量（松散型）

数据类型

基本数据类型

Number

浮点数值

浮点数值的最高精度是17 位小数，但在进行算术计算时其精确度远远不如整数。例如，0.1 加0.2 的结果不是0.3，而是0.30000000000000004。

数值范围

最小值：Number.MIN_VALUE（5e-324）

最大值：Number.MAX_VALUE（1.7976931348623157e+308）

NaN

非数值的一个特殊的数值

与任何值都不等、包括自己

isNaN()判断

数值转换

Number()

parseInt()

parseFloat()

String

(''或者"")

字符字面量（转义字符）（\n \t \r \b \f \\ \' \"）

转换为字符串toString()还可以限制转为二、八....进制

转换为字符串2：要转的 + 字符串“”

Boolean

只有两个值：true和false

true 不一定等于1，而false 也不一定等于0。（var found = true; var lost = false;）

true：任何非空字符串、任何非零数字值、任何对象、n/a

false: 空字符串“”、0和NaN、null、undefined

Undefined

只有一个值：undefined

未被声明

Null

只有一个值：null

空对象指针

复合数据类型

Object（Object 类型所具有的任何属性和方法也同样存在于更具体的对象中）

操作符

一元操作符

++、--、+、-

位操作符

布尔操作符

！、||、&&

乘性操作符

*、/、%

加性操作符

+、-

关系操作符

>、<、>=、<=

相等操作符

==、！=先转换再比较

===、！==仅比较不转换

条件操作符

赋值操作符（=）

逗号操作符（,）

语句

while

do...while

for

for-in

label语句

break和continue语句

with

switch

子主题

函数

理解参数arguments

没有重载（检查传入函数中参数的类型和数量并作出不同的反应，可以模仿方法的重载）

变量、作用域和内存问题

基本类型（原始值、基本数据类型）和引用类型的值（可能由多个值构成的对象）

动态的属性

引用类型值（添加属性和方法，也可以改变和删除其属性和方法）

基本类型值（可以给基本类型的属性赋值，不会报错但会undefined，一般不推荐这样做）

复制变量值

基本类型值（一个变量向另一个变量复制基本类型的值，会在变量对象上创建一个新值，然后把该值复制到为新变量分配的位置上）（两个变量互不影响）

引用类型值（不同的是，这个值的副本实际上是一个指针，而这个指针指向存储在堆中的一个对象。复制操作结束后，两个变量实际上将引用同一个对象。因此，改变其中一个变量，就会影响另一个变量）

传递参数（参数只能按值（地址）传递）

函数内部给参数重新赋新值不会影响到外部的对象，但是因为该参数是一个地址拷贝，所以在外面访问和里面访问的都是同一个对象,改变该参数对象的属性值将会影响到外部的对象。

被传递的值会被复制给一个局部变量（即命名参数，或者用 ECMAScript 的概念来说，就是arguments 对象中的一个元素）。

在向参数传递引用类型的值时，会把这个值在内存中的地址复制给一个局部变量，因此这个局部变量的变化会反映在函数的外部

原始值：存储在栈（stack）中的简单数据段，也就是说，它们的值直接存储在变量访问的位置

引用值：存储在堆（heap）中的对象，也就是说，存储在变量处的值是一个指针（point），指向存储对象的内存地址。

在javascript中是不允许直接访问保存在堆内存中的对象的，所以在访问一个对象时，首先得到的是这个对象在堆内存中的地址，然后再按照这个地址去获得这个对象中的值，这就是传说中的按引用访问

检测类型

typeof（检测基本数据类型）

instanceof（检测引用类型的值）

执行环境及作用域

某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁（全局执行环境直到应用程序退出——例如关闭网页或浏览器——时才会被销毁）。

每个环境都可以向上搜索作用域链，以查询变量和函数名；但任何环境都不能通过向下搜索作用域链而进入另一个执行环境

延长作用域链

try-catch语句块

with语句

没有块级作用域

声明变量

查询标识符

垃圾收集

标记清除

引用计数（不常用）

性能问题

管理内存

将其值设置为null 来释放其引用——这个做法叫做解除引用

解除一个值的引用并不意味着自动回收该值所占用的内存。解除引用的真正作用是让值脱离执行环境，以便垃圾收集器下次运行时将其回收

引用类型

Object类型

创建方法

new

字面量（常用）

Array类型

创建

new

字面量（常用）

检测数组

instanceof（只有一个全局执行环境）

isArray()（多个框架）

转换方法

toLocaleString()

toString()

valueOf()

栈方法（后进先出）

push()尾部插入

pop()尾部删除

队列方法（先进先出）

shift()顶部删除

unshift()顶部插入

重排序方法

reverse()反转顺序

sort()接收一个比较函数作为参数

操作方法

concat()先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。

slice()基于当前数组中的一或多个项创建一个新数组

splice()

删除：要删除的第一项的位置和要删除的项数

插入：起始位置、0（要删除的项数）和要插入的项

替换：起始位置、要删除的项数和要插入的任意数量的项

位置方法

indexOf()

lastIndexOf()

迭代方法

every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。

filter()：对数组中的每一项运行给定函数，返回该函数会返回true 的项组成的数组

forEach()：对数组中的每一项运行给定函数。这个方法没有返回值

map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组

some()：对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true

归并方法

reduce()前一个值、当前值、项的索引和数组对象

reduceRight()前一个值、当前值、项的索引和数组对象

Date类型

创建日期对象

Date,parse()

Date.UTC()

继承的方法

日期格式化方法

toDateString()——以特定于实现的格式显示星期几、月、日和年

toTimeString()——以特定于实现的格式显示时、分、秒和时区

toLocaleDateString()——以特定于地区的格式显示星期几、月、日和年

toLocaleTimeString()——以特定于实现的格式显示时、分、秒

toUTCString()——以特定于实现的格式完整的UTC 日期

日期/时间组件方法

getTime()、setTime(毫秒)、getFullYear()、getUTCFullYear()、setFullYear(年)、setUTCMilliseconds(毫秒)、getTimezoneOffset()

setUTCFullYear(年)、getMonth()、getUTCMonth()、setMonth(月)、setUTCMonth(月)、getDate()、getUTCDate()

setDate(日)、setUTCDate(日)、getDay()、getUTCDay()、getHours()、getUTCHours()、setHours(时)、setUTCHours(时)、getMinutes()

getUTCMinutes()、setMinutes(分)、setUTCMinutes(分)、getSeconds()、getUTCSeconds()、setSeconds(秒)、setUTCSeconds(秒)、getMilliseconds()0、getUTCMilliseconds()、setMilliseconds(毫秒)

RegExp 类型（正则表达式）

RegExp实例属性

RegExp实例方法

RegExp构造函数属性

模式的局限性

Function类型

由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定（函数的名字仅仅是一个包含指针的变量而已）

使用不带圆括号的函数名是访问函数指针，而非调用函数

没有重载

函数声明与函数表达式

解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问）；至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解释执行。

作为值的函数

函数的内部属性

arguments

arguments的主要用途是保存函数参数，但这个对象还有一个名叫calle 的属性，该属性是一个指针，指向拥有这个arguments对象的函数。

低耦合（函数的执行与函数名factorial紧紧耦合在了一起。为了消除这种紧密耦合的现象，可以像下面这样使用arguments.callee）

this

caller

保存着调用当前函数的函数的引用，如果是在全局作用域中调用当前函数，它的值为null

函数属性和方法

属性（length（参数个数）和prototype）在ECMAScript 5 中，prototype属性是不可枚举的，因此使用for-in无法发现

方法：apply(运行函数的作用域，参数数组)和call(第一个参数是this 值没有变化，变化的是其余参数都直接传递给函数)，两个方法的用途都是在特定的作用域中调用函数

两个方法：扩充函数赖以运行的作用域。好处：对象不需要与方法有任何耦合关系

ECMAScript 5还定义了一个方法：bind()其this 值会被绑定到传给bind()函数的值。

基本包装类型

每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而让我们能够调用一些方法来操作这些数据

(1) 创建String 类型的一个实例；(2)在实例上调用指定的方法；(3) 销毁这个实例。

引用类型与基本包装类型的主要区别就是对象的生存期

Boolean类型

Number类型

String类型

单体内置对象

由ECMAScript 实现提供的、不依赖于宿主环境的对象，这些对象在ECMAScript 程序执行之前就已经存在了

Global对象

URI 编码方法

eval()方法

就像是一个完整的ECMAScript 解析器，它只接受一个参数，即要执行的ECMAScript （或JavaScript）字符串

通过eval()执行的代码被认为是包含该次调用的执行环境的一部分，因此被执行的代码具有与该执行环境相同的作用域链。这意味着通过eval()执行的代码可以引用在包含环境中定义的变量

代码注入

Global 对象的属性

window 对象

Web 浏览器都是将这个全局对象作为window对象的一部分加以实现的

Math对象

min()和max()方法

Math.ceil()执行向上舍入，Math.floor()执行向下舍入，Math.round()执行标准舍入

Math.random()方法返回大于等于0 小于1 的一个随机数

其他方法

面向对象的程序设计

理解对象

属性类型

数据属性

[[Configurable]]：表示能否通过delete 删除属性从而重新定义属性，性默认值为true

[[Enumerable]]：表示能否通过for-in 循环返回属性。默认值为true

[[Writable]]：表示能否修改属性的值，默认值为true

[[Value]]：包含这个属性的数据值。读写属性值，默认值为undefined。

访问器属性

[[Configurable]]：表示能否通过delete 删除属性从而重新定义属性，性默认值为true

[[Enumerable]]：表示能否通过for-in 循环返回属性。默认值为true

[[Get]]：在读取属性时调用的函数。默认值为undefined

[[Set]]：在写入属性时调用的函数。默认值为undefined

定义多个属性

Object.defineProperties（要添加和修改其属性的对象，一一对应）

读取属性的特性

Object.getOwnPropertyDescriptor(属性所在的对象，要读取其描述符的属性名称)

创建对象

工厂模式

好：工厂模式虽然解决了创建多个相似对象的问题

坏：没有解决对象识别的问题（即怎样知道一个对象的类型）

构造函数模式

没有显式地创建对象；直接将属性和方法赋给了this对象；没有return 语句。

构造函数首字母大写

1 创建一个新对象；2 将构造函数的作用域赋给新对象（因此this 就指向了这个新对象）；3 执行构造函数中的代码（为这个新对象添加属性）；4 返回新对象。

创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型；而这正是构造函数模式胜过工厂模式的地方。

坏：每个方法都要在每个实例上重新创建一遍（每定义一函数，也就是实例化了一个对象）

以这种方式创建函数，会导致不同的作用域链和标识符解析，但创建Function 新实例的机制仍然是相同的。因此，不同实例上的同名函数是不相等的

解决办法：通过把函数定义转移到构造函数外部来解决这个问题

在全局作用域中定义的函数实际上只能被某个对象调用，这让全局作用域有点名不副实。而更让人无法接受的是：如果对象需要定义很多方法，那么就要定义很多个全局函数，于是我们这个自定义的引用类型就丝毫没有封装性可言

原型模式

1、理解原型对象

只要创建了一个新函数，就会为该函数创建一个prototype属性，这个属性指向函数的原型对象

默认情况下，所有原型对象都会自动获得一个constructor（构造函数）属性，这个属性包含一个指向prototype属性所在函数的指针

当调用构造函数创建一个新实例后，该实例的内部将包含一个指针（内部属性叫[[Prototype]]不可见），指向构造函数的原型对象

isPrototypeOf()方法来确定对象之间是否存在这种关系（是否有内部属性）

Object.getPrototypeOf()返回的对象实际就是这个对象的原型

用hasOwnProperty()方法可以检测一个属性是存在于实例中，还是存在于原型中

2、原型与in 操作符

单独使用和在for-in 循环中使用

在单独使用时，in 通过对象能够访问给定属性时返回true，无论该属性存在于实例中还是原型中。

同时使用hasOwnProperty()方法和in 操作符，就可以确定该属性到底是存在于对象中，还是存在于原型中

在使用for-in 循环时，返回的是所有能够通过对象访问的、可枚举的（enumerated）属性

Object.keys()方法。这个方法接收一个对象作为参数，返回一个包含所有可枚举属性的字符串数组

3、更简单的原型语法

用一个包含所有属性和方法的对象字面量来重写整个原型对象

：constructor 属性不再指向Person 了

4、原型的动态性

5、原生对象的原型

6、原型对象的问题

最大问题是由其共享的本性所导致的（包含引用类型值的属性）

组合使用构造函数模式和原型模式

每个实例都会有自己的一份实例属性的副本，但同时又共享着对方法的引用，最大限度地节省了内存。另外，这种混成模式还支持向构造函数传递参数

动态原型模式

寄生构造函数模式

稳妥构造函数模式

继承

接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。由于函数没有签名，在ECMAScript 中无法实现接口继承。ECMAScript 只支持实现继承，而且其实现继承主要是依靠原型链来实现的

原型链

1. 别忘记默认的原型

2. 确定原型和实例的关系

3. 谨慎地定义方法

给原型添加方法的代码一定要放在替换原型的语句之后

通过原型链实现继承时，不能使用对象字面量创建原型方法。因为这样做就会重写原型链

4. 原型链的问题

引用类型值的原型属性会被所有实例共享；而这也正是为什么要在构造函数中，而不是在原型对象中定义属性的原因

在通过原型来实现继承时，原型实际上会变成另一个类型的实例。于是，原先的实例属性也就顺理成章地变成了现在的原型属性了

没有办法在不影响所有对象实例的情况下，给超类型的构造函数传递参数（实践中很少会单独使用原型链）

借用构造函数（伪造对象或经典继）

子类型构造函数的内部调用超类型构造函数（使用apply()和call()方法）

传递参数

方法都在构造函数中定义，因此函数复用就无从谈起了

借用构造函数的技术也是很少单独使用的

组合继承（伪经典继承）

使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承

instanceof 和isPrototypeOf()也能够用于识别基于组合继承创建的对象

原型式继承（借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型）

寄生式继承（创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象。）

寄生组合式继承

函数表达式

函数声明

个重要特征就是函数声明提升

在执行代码之前会先读取函数声明。这就意味着可以把函数声明放在调用它的语句后面

函数表达式

理解函数提升的关键，就是理解函数声明与函数表达式之间的区别

递归

递归函数是在一个函数通过名字调用自身的情况下构成的

闭包

指有权访问另一个函数作用域中的变量的函数

由于闭包会携带包含它的函数的作用域，因此会比其他函数占用更多的内存

闭包与变量

关于this对象（匿名函数的执行环境具有全局性，因此其this 对象通常指向window①。但有时候由于编写闭包的方式不同，这一点可能不会那么明显）

内存泄漏

模仿块级作用域

子主题

私有变量

在构造函数中定义特权方法

静态私有变量

模块模式

如果必须创建一个对象并以某些数据对其进行初始化，同时还要公开一些能够访问这些私有数据的方法，那么就可以使用模块模式

增强的模块模式

BOM

window 对象

全局作用域

全局变量不能通过delete 操作符删除，而直接在window 对象上的定义的属性可以。

尝试访问未声明的变量会抛出错误，但是通过查询window 对象，可以知道某个可能未声明的变量是否存在

窗口关系及框架

如果页面中包含框架，则每个框架都拥有自己的window 对象，并且保存在frames 集合中

窗口位置

IE、Safari、Opera 和Chrome 都提供了screenLeft 和screenTop 属性

Firefox 则在screenX 和screenY 属性

moveTo()接收的是新位置的x 和y 坐标值，而moveBy()接收的是在水平和垂直方向上移动的像素数。

窗口大小

innerWidth、innerHeight、outerWidth 和outerHeight

resizeTo()和resizeBy()方法可以调整浏览器窗口的大小

导航和打开窗口

window.open()加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代

3. 弹出窗口屏蔽程序

1. 弹出窗口

2.安全限制

间歇调用和超时调用

setTimeout()方法

setInterval()

系统对话框

alert()、confirm()和prompt()

子主题

location 对象

查询字符串参数

位置操作

assign()

//假设初始URL 为http://www.wrox.com/WileyCDA/ //将URL 修改为"http://www.wrox.com/WileyCDA/#section1" location.hash = "#section1";

不能回到前一个页面，replace()

reload()，作用是重新加载当前显示的页面

navigator 对象

检测插件

对于非IE 浏览器，可以使用plugins 数组来达到这个目的

在IE 中检测插件的唯一方式就是使用专有的ActiveXObject 类型，并尝试创建一个特定插件的实例

注册处理程序

screen 对象

history 对象

go()

back()和forward()来代替go()

客户端检测

能力检测（又称特性检测）

更可靠的能力检测

在可能的情况下，要尽量使用typeof 进行能力检测

能力检测，不是浏览器检测

怪癖检测

用户代理检测

电子欺骗，就是指浏览器通过在自己的用户代理字符串加入一些错误或误导性信息，来达到欺骗服务器的目的

用户代理字符串的历史

用户代理字符串检测技术

DOM

节点层次

Node类型

JavaScript 中的所有节点类型都继承自Node 类型

1. nodeName 和nodeValue 属性

2. 节点关系

每个节点都有一个childNodes 属性，其中保存着一个NodeList 对象（基于DOM 结构动态执行查询的结果）

每个节点都有一个parentNode 属性

所有节点都有的最后一个属性是ownerDocument

3. 操作节点

appendChild()

insertBefore()要插入的节点和作为参照的节点

replaceChild()要插入的节点和要替换的节点

removeChild()移除

要使用这几个方法必须先取得父节点

4. 其他方法

cloneNode()方法接受一个布尔值参数，表示是否执行深复制（要添加父节点）。IE 在此存在一个bug，即它会复制事件处理程序

normalize()处理文档树中的文本节点

Document类型

1. 文档的子节点

document.documentElement 和document.body

2. 文档信息

title

URL、domain（跨域通信）和referrer

3. 查找元素

getElementById()和getElementsByTagName()

getElementsByName()

4. 特殊集合

document.anchors，包含文档中所有带name 特性的元素

document.forms，包含文档中所有的

document.images，包含文档中所有的元素

document.links，包含文档中所有带href 特性的元素

5. DOM 一致性检测

DOM1 级只为document.implementation 规定了一个方法，即hasFeature()。的名称及版本号

6. 文档写入

write()会原样写入，而writeln()则会在字符串的末尾添加一个换行符（\n）。

open()和close()分别用于打开和关闭网页的输出流

Element类型

1. HTML 元素

id、title、lang、className、dir

2. 取得特性

etAttribute()、setAttribute()和removeAttribute()

3. 设置特性

4. attributes 属性

5. 创建元素

document.createElement()

6. 元素的子节点

Text类型

1. 创建文本节点

document.createTextNode()

DOM扩展

选择符API

querySelector()方法

querySelector()方法接收一个CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null

可以通过Document 及Element 类型的实例调用它们

返回第一个元素

querySelectorAll()方法

返回元素集合

matchesSelector()方法

元素遍历

childElementCount

firstElementChild

lastElementChild

previousElementSibling

nextElementSibling

HTML5

与类相关的扩充

1. getElementsByClassName()方法

2. classList 属性

焦点管理

document.activeElement 属性，这个属性始终会引用DOM 中当前获得了焦点的元素。元素获得焦点的方式有页面加载、用户输入（通常是通过按Tab 键）和在代码中调用focus()方法

默认情况下，文档刚刚加载完成时，document.activeElement 中保存的是document.body 元素的引用。文档加载期间，document.activeElement 的值为null。

document.hasFocus()方法，确定文档是否获得了焦点

HTMLDocument的变化

1. readyState 属性

loading，正在加载文档

complete，已经加载完文档。

2. 兼容模式

在标准模式下，document.compatMode 的值等于"CSS1Compat"，而在混杂模式下，等于"BackCompat"

3. head 属性

字符集属性

document.characterSet

自定义数据属性

通过元素的dataset 属性来访问自定义属性的值

自定义属性是data-myname，那映射中对应的属性就是myname

scrollIntoView()方法,常用页面滚动方法

插入标记

1. innerHTML 属性

2. outerHTML 属性

div.outerHTML = "

This is a paragraph.

";新创建的

元素会取代DOM 树中的

元素

3. insertAdjacentHTML()方法

插入位置和要插入的HTML 文本

子主题

4. 内存与性能问题

专有扩展

文档模式

children属性

contains()方法

如果被检测的节点是后代节点，该方法返回true；否则，返回false

DOM Level 3 compareDocumentPosition()也能够确定节点间的关系

插入文本

1. innerText 属性

2. outerText 属性

滚动

scrollIntoViewIfNeeded(alignCenter)：只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中可见，这个方法什么也不做。

scrollByLines(lineCount)：将元素的内容滚动指定的行高，lineCount 值可以是正值，也可以是负值。Safari 和Chrome 实现了这个方法

scrollByPages(pageCount)：将元素的内容滚动指定的页面高度，具体高度由元素的高度决定。Safari 和Chrome 实现了这个方法。

，scrollIntoView()和scrollIntoViewIfNeeded()的作用对象是元素的容器，而scrollByLines()和scrollByPages()影响的则是元素自身。

DOM2和DOM3

DOM 变化

针对XML命名空间的变化

其他方面的变化

样式

访问元素的样式

DOM 样式属性和方法

cssText、length、parentRule：表示CSS 信息的CSSRule 对象

getPropertyCSSValue(propertyName)：返回包含给定属性值的CSSValue 对象。

getPropertyPriority(propertyName)：如果给定的属性使用了!important 设置，则返回 "important"；否则，返回空字符串。

getPropertyValue(propertyName)：返回给定属性的字符串值

removeProperty(propertyName)

item(index)

setProperty(propertyName,value,priority)：将给定属性设置为相应的值，并加上优先权标志（"important"或者一个空字符串）。

计算的样式

getComputedStyle()方法。这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如":after"）。如果不需要伪元素信息，第二个参数可以是null

currentStyle IE方法

操作样式表

1. CSS 规则

2. 创建规则

3. 删除规则

元素大小

1. 偏移量

offsetHeight、offsetWidth

offsetLeft、offsetTop

2.客户区大小

clientWidth是元素内容区宽度加上左右内边距宽度；

clientHeigh

3. 滚动大小

scrollHeight、scrollWidth、scrollLeft、scrollTop

4. 确定元素大小

getBoundingClientRect()

遍历

NodeIterator

root：想要作为搜索起点的树中的节点。 whatToShow：表示要访问哪些节点的数字代码。

filter：是一个NodeFilter 对象，或者一个表示应该接受还是拒绝某种特定节点的函数。 entityReferenceExpansion：布尔值，表示是否要扩展实体引用。这个参数在HTML 页面中没有用

TreeWalker

范围

DOM中的范围

IE8 及更早版本中的范围

25 新兴的API

 收藏

立即使用

黑客与画家

 收藏

立即使用

大教堂与集市

 收藏

立即使用

javascript

 收藏

立即使用

HTML结构

PO_dddd3c

职业：暂无

去主页





0 条评论

下一页

为你推荐

查看更多





图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定