JavaScript高级程序设计-2
2021/10/12 9:45:37
本文主要是介绍JavaScript高级程序设计-2，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
- BOM（Browser Object Model，浏览器对象模型）
- window 对象
- BOM 的核心对象，表示浏览器的一个实例
- 双重角色：通过 JavaScript 访问浏览器窗口的一个接口、ECMAScript规定的 Global 对象
- 所有在全局作用域中声明的变量、函数都会成为 window 对象的属性和方法
- 定义全局变量与在window对象上直接定义属性的差别：
- 全局变量不能通过delete操作符删除（通过这种方式添加的window属性其[[configurable]]值为 false ），而直接在window对象上定义的属性可以
- 访问未声明的变量会抛出错误，但可以通过window对象查询其是否存在
- 后面将要介绍的location对象、navigator对象等全局JavaScript对象实际上都是window对象的属性
- 窗口关系及框架
- 如果页面中包含框架，每个框架都会拥有自己的window对象，保存在frames集合中
- 每个window对象都有一个 name 属性，包含框架的名称
- 要引用某个框架，可以使用window对象或者top对象
- 通过数值索引（从0开始，从左到右，从上到下）或框架名称来访问相应的window对象
- top 对象
- 始终指向最外层的框架，即浏览器窗口
- parent 对象
- 始终指向当前框架的直接上层框架
- 某些情况下，parent 有可能等于 top
- 没有框架时，parent 一定等于 top（此时它们都等于 window）
- self 对象
- 始终指向 window
- 引入其目的是为了与 top 和 parent 对应起来
- top 对象
- 除非最外层窗口是通过 window.open() 打开的，否则其 window 对象的 name 属性不会包含任何值
- 不同层次的window对象可以连缀起来，例如：window.parent.parent.frames[0]
- 每个框架都有一套自己的构造函数，这些构造函数一一对应，但并不相等，例如：top.Object并不等于top.frames[0].Object
- 窗口位置
- screenLeft
- screenTop
- screenX
- screenY
- 不同浏览器对以上两组属性的支持情况不同，无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值，使用以下方法移动窗口的位置：
- moveTo() 参数是新位置的x和y的坐标值
- moveBy() 参数是水平和垂直方向上移动的像素数
- 注意：这两个方法可能会被浏览器禁用，而且这两个方法都不适用于框架，只能对最外层的window对象使用
- 窗口大小
- 导航和打开窗口
- 间歇调用和超时调用
- 系统对话框
- 窗口关系及框架
- location 对象
- navigator 对象
- screen 对象
- history 对象
- window 对象
- 客户端检测
- 现实中，各种浏览器之间的差异以及不同浏览器的”怪癖“（quirk）多得不胜枚举，鉴于此，客户端检测不仅是一种补救措施，更是一种行之有效的开发策略
- 建议：不到万不得已，不要使用客户端检测，先设计最通用的方案，然后再使用特定于浏览器的技术增强该方案
- 能力检测
- 又称特性检测
- 目标：识别浏览器的能力
- 基本模式：
1 if(<特性>){ 2 //使用特性 3 }- 举例
1 //IE5.0之前的版本不支持document.getElementById()，但可以使用非标准的document.all() 2 function getElement(id){ 3 if(document.getElementById){ 4 return document.getElementById(id); 5 } 6 else if(document.all){ 7 return document.all[id]; 8 } 9 else{ 10 throw new Error("No way to retrieve element!"); 11 } 12 }- 遵循两个原则：
- 先检测达成目的的最常用的特性，如上面例子中先检测document.getElementById()而后检测document.all，这样可以保证代码最优化
- 必须检测实际要用到的特性
- 遵循两个原则：
- 举例
- 检测某个或某几个特性并不足以确定浏览器，某个浏览器不支持某个特性并不代表它以后不会实现这个特性
- 实际开发中，能力检测应该作为确定下一步解决方案的依据，而不是用它来判读用户使用的是什么浏览器
- 怪癖检测
- 目的：识别浏览器的特殊行为
- 怪癖检测是想知道浏览器存在哪些缺陷，通常需要运行一小段代码以确定某一个特性不能正常工作
- 怪癖是个别浏览器所独有的，通常被视为bug，在新版本中，这些怪癖可能会也可能不会得到修复
- 用户代理检测（详见书籍）
- 通过检测用户代理字符串来确定实际使用的浏览器
- DOM（Document Object Model，文档对象模型）
- DOM是针对HTML和XML文档的一个API，它描绘了一个层次化的结点树，允许开发人员添加、移除和修改页面的某一部分
- DOM脱胎于Netscape及微软公司创始的DHTML，但现在已经成为表现和操作页面标记的的真正的跨平台、语言中立的方式
- IE中的DOM对象都是以COM对象的形式实现的，与原生的JavaScript对象的行为或活动特点并不一致
- 节点层次
- DOM将HTML或XML文档描绘成一个由多层节点构成的结构，各种不同的节点表示文档中不同的信息及标记，拥有各自的特点、数据和方法，与其他节点存在某种关系，节点之间的关系构成了层次，所有页面标记为一个以特定节点为根节点的树形结构
- 文档节点是每个文档的根节点，其子节点称为文档元素（如上图中的<html>），文档元素包含着其他所有元素，每个文档只能有一个文档元素，在HTML中，文档元素是<html>，在XML中，没有预定义的元素，任何元素都可能成为文档元素
- 每一段标记都可以通过树中的一个节点来表示：
- HTML元素通过元素节点表示，特性通过特性节点表示，文档类型通过文档类型节点表示，注释通过注释节点表示，。。。。。。，一共有12种节点类型，所有这些类型都继承自一个基类型
- Node类型
- DOM1级定义了Node接口，这个接口由DOM中的所有节点类型实现，在JavaScript中作为Node类型实现，除IE外，其他浏览器都能访问到
- JavaScript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法
- 每个节点都有一个nodeType属性，用于表明节点的类型，12种节点类型由Node类型中定义的12个数值常量来表示：
- Node.ELEMENT_NODE(1);
- Node.ATTRIBUTE_NODE(2);
- Node.TEXT_NODE(3);
- Node.CDATA_SECTION_NODE(4);
- Node.ENTITY_REFERENCE_NODE(5);
- Node.ENTITY_NODE(6);
- Node.PROCESSING_INSTRUCTION_NODE(7);
- Node.COMMENT_NODE(8);
- Node.DOCUMENT_NODE(9);
- Node.DOCUMENT_TYPE_NODE(10);
- Node.DOCUMENT_FRAGMENT_NODE(11);
- Node.NOTATION_NODE(12);
- 上述12个数值常量在IE中无效
- 为了确保跨浏览器兼容，建议最好使用数值
1 if(someNode.nodeType == Node.ELEMENT_NODE){ 2 ...... 3 } 4 5 //最好使用数值： 6 if(someNode.nodeType == 1){ 7 ...... 8 } - 并不是所有节点类型都受到浏览器的支持
- nodeName 属性和 nodeValue 属性
- 这两个属性的值完全取决于节点的类型
- 节点关系
- 节点间的各种关系可以用传统的家族关系来描述：父节点、子节点、同胞节点等 每个节点都有一个 childNodes 属性，保存着一个类似数组的 NodeList 对象，可以对其使用slice()、item()等方法
- NodeList 对象保存着一组有序的节点，可以通过位置来访问，虽然也有 length 属性，但它并不是的Array的实例
- NodeList 对象是基于DOM结构动态执行查询的结果，DOM结构的变化能自动反映在其中
- 每个节点都有一个 parentNode 属性，指向文档树中的父节点
- 包含在 childNodes 列表中的所有节点具有相同的父节点，相互之间是同胞节点
- previousSibling 属性和 nextSibling 属性可分别用于访问某个节点的上一个节点和下一个节点
- 列表中第一个节点的 previousSibling 属性为 null，列表中的最后一个节点的 nextSibling 属性也为 null
- 父节点的 firstChild 和 lastChild 属性分别指向其 childNodes列表中的第一个和最后一个节点
- 每个节点都有一个 ownerDocument 属性，指向表示整个文档的文档节点
- 任何节点都属于它所在的文档，不能同时存在于两个或更多个文档中
- 通过这个属性，可以直接访问文档节点，不必层层回溯
- 并不是每种节点都有子节点
- 操作节点
- appendChild()
- insertBefore()
- replaceChild()
- removeChild()
- 其他方法（所有类型的节点都有的方法）
- cloneNode() 创建调用这个方法的节点的一个完全相同的副本（不会复制添加到节点中的JavaScript属性），可接受一个布尔值参数，表示是否执行深复制（参数为true时执行深复制，复制节点及整个子节点树，参数为false时执行浅复制，只复制节点本身）
- normalize() 处理文本节点
- Document类型
- JavaScript通过Document类型表示文档
- 在浏览器中，document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面，而且，document对象还是window对象的一个属性，可以将其作为全局对象来访问
- Document节点具有以下特征：
- nodeType的值为9
- nodeName的值为"#document"
- nodeValue的值为null
- parentNode的值为null
- ownerDocument的值为null
- 其子节点可能是一个DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或Comment
- Document类型可以表示HTML页面或者其他基于XML的文档
- 最常见的应用是作为HTMLDocument实例的document对象
- 通过document对象，不仅可以取得与页面有关的信息，还能操作页面的外观及其底层结构
- 文档的子节点
- Document节点有两个内置的访问其子节点的快捷方式：
- documentElement属性，该属性始终指向HTML页面中的<html>元素
- 通过 childNodes 列表访问文档元素
- document对象有一个body属性，直接指向<body>元素
- DocumentType子节点：
- 通常将<!DOCTYPE>看成一个与文档其他部分不同的实体，通过doctype属性访问它
- 各个浏览器对document.doctype的支持并不一致
- 不同的浏览器在处理<html>元素外部的注释方面也存在很大的差异
- Document节点有两个内置的访问其子节点的快捷方式：
- 文档信息
- document对象还有一些标准的Document对象所没有的属性，它们提供了document对象所表现网页的一些信息：
- title属性 包含<title>元素中的文本，可以修改，但修改它的值不会改变<title>元素
- 以下3个是与对网页的请求相关的属性，这些信息存在于请求的HTTP头部，通过这些属性可以让我们在JavaScript中访问它们：
- URL属性 包含地址栏中显示的URL
- domain属性 包含页面的域名
- referrer属性 保存着链接到当前页面的那个页面的URL，没有来源页面的情况下其中可能会包含空字符串
- document对象还有一些标准的Document对象所没有的属性，它们提供了document对象所表现网页的一些信息：
- 查找元素
- getElementById()
- 如果页面中多个元素的id值相同，它只会返回文档中第一次出现的元素
- getElementsByTagName()
- 返回一个类似 NodeList 的 HTMLCollection 对象
- HTMLCollection 对象有一个 namedItem()，其通过元素的 name 属性取得集合中的项
- 对HTMLCollection 对象而言，通过方括号传入数值索引或字符串索引会在后台分别调用item()、namedItem()
- 可以向getElementsByTagName()传入"*"取得文档中的所有元素（JS和CSS中的"*"通常表示“全部”）
- 对于HTML，传给getElementsByTagName()的标签名不区分大小写，但对于XML（包括XHTML），区分大小写
- getElementsByName()
- 也返回一个 HTMLCollection对象
- getElementById()
- 特殊集合（HTMLCollection对象，集合中的项会随当前文档的更新而更新）
- document.anchors 文档中所有带name属性的 <a>
- document.applets 文档中所有的<applet>
- document.forms 文档中所有的<form>
- document.images 文档中所有的<img>
- document.links 文档中所有带href属性的 <a>
- DOM一致性检测
- 文档写入
- Element类型
- Element类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问
- Element节点具有以下特征：
- nodeType的值为1
- nodeName的值为元素的标签名
- nodeValue的值为null
- parentNode可能是Document或Element
- 其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference
- 访问元素的标签名时，还可以使用tagName属性
- 在HTML中，取得的标签名始终都以全大写形式表示，而在XML中（包括XHTML），标签名始终与源代码中的保持一致
- 如果不确定自己的脚本将用于HTML还是XML，最好将标签名转换为相同的大小写形式
- HTML元素
- 所有HTML元素都由HTMLElement类型来表示，但有的并不是直接通过这个类型，而是通过其子类型来表示
- HTMLElement类型直接继承自Element并添加了一些属性，这些添加的属性分别对应于每个HTML元素中都存在的下列标准特性（可通过JavaScript取得或修改这些属性（提示：点操作符））：
- id
- title
- lang 元素内容的语言代码
- dir 语言的方向，值为"ltr"（left-to-right，从左至右）或"rtl"（right-to-left，从右至左）
- className
- 所有HTML元素都由HTMLElement类型来表示，但有的并不是直接通过这个类型，而是通过其子类型来表示
- 取得特性
- 每个元素都有一个或多个特性，用于给出相应元素或其内容的附加信息
- 操作特性的DOM方法主要有3个：
- getAttribute()
- 传入的特性名与实际的特性名相同
- 可通过其取得自定义特性（根据HTML5规范，自定义特性应该加上data-前缀）
- 特性名称不区分大小写
- setAttribute()
- removeAttribute()
- getAttribute()
- 任何元素的所有特性，都可以通过DOM元素本身的属性来访问，HTMLElement也会有5个（见上）属性与相应的特性一一对应，但只有公有的特性才会以属性的形式添加到DOM对象中（IE除外）
- 有两类特性，它们虽然也有对应的属性名，但属性值与通过getAttribute()返回的值并不相同
- style特性 用于通过CSS为元素指定样式
- 通过getAttribute()访问时，返回的style特性值中包含的是CSS文本
- 通过属性来访问时，会返回一个对象
- 注：style属性是用于以编程方式访问元素样式的，并没有直接映射到style特性
- onclick事件处理程序
- onclick中包含的是JavaScript代码，通过getAttribute()访问会返回相应代码的字符串
- 在访问onclick属性时，会返回一个JavaScript函数（未指定特性时返回null）
- style特性 用于通过CSS为元素指定样式
- 由于存在以上差别，通常不使用getAttribute()，而是使用对象属性，只有在取得自定义特性值的情况下才会使用getAttribute()
- 设置特性（推荐通过属性来设置特性）
- setAttribute()，接受两个参数：要设置的特姓名和值
- 既可以操作HTML特性，也可以操作自定义特性
- 通过这个方法设置的特性名会被统一转为小写形式
- 所有特性都是属性，可以直接给属性赋值可以设置特性的值，但为DOM元素添加一个自定义的属性不会自动成为元素的特性
- removeAttribute() 用于彻底删除元素的特性
- 不仅会清除特性的值，也会从元素中完全删除特性
- 在序列化DOM元素时，通过它来确切地指定要包含哪些特性
- setAttribute()，接受两个参数：要设置的特姓名和值
- attributes属性
- Element类型是唯一一个使用attributes属性的DOM节点类型
- attributes属性中包含一个NamedNodeMap ，它与NodeList类似，也是一个“动态”的集合
- 元素的每一个特性都由一个Attr节点表示，每个节点保存在 NamedNodeMap 对象中
- NamedNodeMap 对象拥有以下方法：
- getNamedItem()
- removeNamedItem()
- setNamedItem()
- item()
- 创建元素
- document.createElement()
- 接受一个参数，要创建元素的标签名
- 标签名在HTML中不区分大小写，但在XML中区分大小写
- 使用这个方法创建元素的同时，也为新元素设置ownerDocument属性，此时还可以操作元素特性、添加子节点等
- document.createElement()
- 元素的子节点
- 元素可以有任意数目的子节点和后代节点，这些子节点可能是元素、文本、注释或处理命令，不同浏览器在看待这些节点时存在显著的不同
- 元素也支持getElementsByTagName()方法，搜索起点是当前元素
- Text类型
- 文本节点由Text类型表示，包含的是纯文本内容，可以是转义后的HTML字符，但不能包含HTML代码
- Text节点的特征：
- nodeType的值为3
- nodeName的值为"#text"
- nodeValue的值所包含的文本
- parentNode是一个Element
- 没有子节点
- 通过data属性也可以访问Text节点中包含的文本
- 使用以下方法操作节点中的文本
- appendData()
- deleteData()
- insertData()
- replaceData()
- splitText()
- substringData()
- 文本节点有个 length 属性保存着节点中字符的数目，nodeValue.length和data.length中也保存着同样的值
- 创建文本节点
- document.createTextNode()
- 规范化文本节点
- DOM文档中存在相邻的同胞文本节点容易导致混乱，分不清哪个文本节点表示哪个字符串
- 在一个包含两个或多个文本节点的父元素上调用normalize()方法，将所有文本节点合并成一个节点
- 分隔文本节点
- splitText() 将一个文本节点分成两个文本节点
- Comment类型
- 注释在DOM中是通过Comment类型来表示的
- Comment节点具有以下特征：
- nodeType的值为8
- nodeName的值为"#comment"
- nodeValue的值是注释的内容
- parentNode可能是Document或Element
- 没有子节点
- Comment类型与Text类型继承自相同的基类，因此拥有除了splitText()之外的所有字符串操作方法，也可以通过nodeValue或data属性来取得注释的内容
- 注释节点可以通过父节点来访问
- 使用document.createComment()并为其传递注释文本可以创建注释节点
- 注意：浏览器不会识别</html>后面的注释，要访问注释节点，一定要确保它们是<html>元素的后代
- CDATASection类型
- CDATASection类型只针对基于XML的文档，表示的是CDATA区域，也继承自Text类型，拥有除了splitText()外的所有字符串操作方法
- CDATASection节点具有以下特征：
- nodeType的值为4
- nodeName的值为"#cdata-section"
- nodeValue的值是CDATA区域中的内容
- parentNode可能是Document或Element
- 没有子节点
- CDATA区域只会出现在XML文档中，因此多数浏览器都会把CDATA区域错误地解析为Comment或Element
- 即使对于有效的XHTML页面，浏览器也没有正确地支持嵌入CDATA区域
- 在真正的XML文档中，可以使用document.createCDataSection()来创建CDATA区域，只需为其传入节点的内容
- DocumentType类型
- 支持此类型的浏览器：Firefox、Safari、Opera、Chrome
- DocumentType 包含着与文档的doctype 有关的所有信息，它具有以下特征：
- nodeType的值为10
- nodeName的值为doctype的名称
- nodeValue的值为null
- parentNode是Document
- 没有子节点
- DocumentFragment类型
- 所有的节点类型中，只有DocumentFragment类型在文档中没有对应的标记
- DOM规定：文档片段（document fragment）是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源
- DocumentFragment节点具有以下特征：
- nodeType的值为11
- nodeName的值为"#document-fragment"
- nodeValue的值为null
- parentNode的值为null
- 子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference
- 虽然不能把文档片段直接插入到文档中，但可以将其作为一个"仓库"，即可以在里面保存将来可能会添加到文档中的节点
- 创建文档片段使用document.createDocumentFragment()
- 文档片段继承了Node的所有方法，通常用于执行那些针对文档的DOM操作
- Attr类型
- 元素的特性在DOM中以Attr类型来表示，特性就是存在于元素的attribute属性中的节点
- 特性节点具有以下特征：
- nodeType的值为11
- nodeName的值是特性的名称
- nodeValue的值是特性的值
- parentNode的值为null
- 在HTML中没有子节点，在XML中子节点可以是Text或EntityReference
- 尽管特性也是节点，但却不被认为是DOM文档树的一部分，通常不是直接引用特性节点，而是使用getAttribute()、setAttribute()、removeAttribute()
- Attr对象的3个属性
- name 特性名称
- value 特性的值
- specified 布尔值，用以区别特性是在代码中指定的还是默认的
- 使用document.createAttribute()并传入特性的名称可以创建特性节点
- DOM将HTML或XML文档描绘成一个由多层节点构成的结构，各种不同的节点表示文档中不同的信息及标记，拥有各自的特点、数据和方法，与其他节点存在某种关系，节点之间的关系构成了层次，所有页面标记为一个以特定节点为根节点的树形结构
- DOM操作技术
- 动态脚本
- 创建动态脚本的两种方式：
- 插入外部文件
- 直接插入JavaScript代码
- 动态脚本在页面加载时并不存在，是在将来的某一时刻通过修改DOM动态添加的脚本
- 创建动态脚本的两种方式：
- 动态样式
- 动态样式是在页面加载完成后执行DOM操作动态添加到页面中的
- 操作表格
- 由于涉及的标签众多，使用核心DOM方法创建和修改表格要编写大量的代码，为了方便，HTML DOM 为<table>、<tbody>、<tr>添加了一些属性和方法
- 为<table>添加的属性和方法：
- caption
- tBodies
- tFoot
- tHead
- rows
- createTHead()
- createTFoot()
- createCaption()
- deleteTHead()
- deleteTFoot()
- deleteCaption()
- deleteRow()
- insertRow()
- 为<tbody>添加的属性和方法：
- rows
- deleteRow()
- insertRow()
- 为<tr>添加的属性和方法：
- cells
- deleteCell()
- insertCell()
- 使用NodeList
- 动态脚本
- DOM是语言中立的API，用于访问和操作HTML和XML文档，DOM1级将HTML和XML文档形象地看成一个层次化的节点树，使用JavaScript来操作这个节点树，进而改变底层文档的外观和结构
- DOM扩展
- 对DOM的两个主要扩展是 Selectors API 和 HTML5
- 选择符 API
- Selectors API Level 1的核心是两个方法（通过Document及Element类型的实例调用）：
- querySelector()
- querySelectorAll()
- matchesSelector()
- querySelector()
- Selectors API Level 1的核心是两个方法（通过Document及Element类型的实例调用）：
- HTML5
- 与类相关的扩充
- getElementsByClassName()
- classList属性
- 焦点管理
- HTMLDocument 的变化
- readyState属性
- 兼容模式——compatMode
- document.head属性
- 字符集属性
- charset属性
- defaultCharset属性
- 自定义数据属性
- 插入标记
- innerHTML属性
- outerHTML属性
- insertAdjacentHTML()
- 应注意的内存与性能问题
- scrollIntoView()
- 与类相关的扩充
- 元素遍历
- 专有扩展（详见书籍）。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
- 文档模式
- 文档模式决定了可以使用哪个级别的CSS，可以在JavaScript中使用哪些API，以及如何对待文档类型
- children属性
- contains()
- 插入文本
- innerText属性
- outerText属性
- 滚动
- scrollIntoViewIfNeeded()
- scrollByLines()
- scrollByPages()
- 本节基本内容
- 文档模式
- DOM2和DOM3
- DOM1级定义的主要是HTML和XML文档的底层结构
- DOM2和DOM3级则在DOM1级定义的结构的基础上引入了更多的交互能力，也支持了更高级的XML特性
- DOM2和DOM3分为许多模块，模块间具有某种关联，分别描述了DOM的某个非常具体的子集：
- DOM Level 2 Core
- DOM Level 2 Views
- DOM Level 2 Events
- DOM Level 2 Style
- DOM Level 2 Traversal and Range
- DOM Level 2 HTML
- ......
- DOM变化
- DOM2和DOM3的目的在于扩展DOM API，以满足操作XML的所有需求，同时提供更好的错误处理及特性检测能力，实现这一目的很大程度上意味着对命名空间的支持
- 针对XML命名空间的变化
- 有了XML命名空间，不同XML文档的元素可以混合在一起（例如可以把XHTML和SVG语言混合在一起），共同构成格式良好的文档，不必担心发生命名冲突
- 命名空间使用xmlns特性来指定
- HTML不支持XML命名空间，但XHTML支持XML命名空间
- “DOM2级核心”为大多数DOM1级方法提供了特定于命名空间的版本
- Node类型的变化
- Document类型的变化
- Element类型的变化
- NamedNodeMap类型的变化
- 其他方面的变化
- DOM的其他方面在“DOM2级核心”中也发生了一些变化，这些变化与XML命名空间无关，而是更倾向于确保API的可靠性和完整性
- DocumentType类型的变化
- Document类型的变化
- Node类型的变化
- 框架的变化
- DOM的其他方面在“DOM2级核心”中也发生了一些变化，这些变化与XML命名空间无关，而是更倾向于确保API的可靠性和完整性
- 样式
- 在HTML中定义样式有3种方式：<link>、<style>、行内样式，“DOM2级样式”模块围绕这3种应用样式的机制提供了一套API
- 访问元素的样式
- DOM样式属性和方法
- 计算的样式
- 操作样式表
- CSS规则
- 创建规则
- 删除规则
- 元素大小
- 偏移量
- 客户区大小
- 滚动大小
- 确定元素大小
- 在HTML中定义样式有3种方式：<link>、<style>、行内样式，“DOM2级样式”模块围绕这3种应用样式的机制提供了一套API
- 遍历
- NodeIterator
- TreeWalker
- 范围
- 通过范围可以选择文档中的一个区域，而不必考虑节点的界限，在常规的DOM操作不能有效地修改文档时，使用范围可以达到目的
- DOM中的范围
- 用DOM范围实现简单选择
- 用DOM范围实现复杂选择
- 操作DOM范围中的内容
- 插入DOM范围中的内容
- 折叠DOM范围
- 比较DOM范围
- 复制DOM范围
- 清理DOM范围
- IE及更早版本中的范围
- 用IE范围实现简单的选择
- 用IE范围实现复杂的选择
- 操作IE范围中的内容
- 折叠IE范围
- 。。。。。。
- 事件
- JavaScript与HTML的交互通过事件实现
- 事件流
- IE的事件流——事件冒泡
- Netscape事件流——事件捕获
- “DOM2级事件”模块的事件流
- 事件处理程序（事件侦听器）
- 为事件指定处理程序的方式：
- HTML事件处理程序（使用一个与事件处理程序同名的HTML特性来指定要进行事件处理的JavaScript代码）
- 这样指定事件处理程序会创建一个封装着属性的函数，其中有一个局部变量event（事件对象）
- 这样指定事件处理程序有3个缺点
- DOM 0级事件处理程序（传统方式）
- 将一个函数赋值给一个事件处理程序属性：取得一个要操作对象的引用，然后指定事件处理程序
- DOM 2级事件处理程序
- addEventListener()
- removeEventListener()
- IE事件处理程序
- attachEvent()
- detachEvent()
- 跨浏览器的事件处理程序
- duii使用JavaScript库
- 自己编写（基于EventUtil对象创建addHandler()、removeHandler()）
- HTML事件处理程序（使用一个与事件处理程序同名的HTML特性来指定要进行事件处理的JavaScript代码）
- 事件对象
- 在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包括着所有与事件有关的信息
- DOM中的事件对象
- IE中的事件对象
- 跨浏览器的事件对象
- IE中的事件对象与DOM中的事件对象实现方法不同，可以基于两者增强EventUtil对象以实现跨浏览器的事件对象
- 事件类型
- 事件有很多类型，不同的对象类型有不同的信息
- ”DOM3级事件“规定的几类事件：
- UI事件
- 交点事件
- 鼠标事件
- 滚轮事件
- 文本事件
- 键盘事件
- 合成事件
- 变动事件
- 变动名称事件（已废弃）
- HTML5事件
- 设备事件
- 触摸与手势事件
- 内存和性能
- 添加到页面上的事件处理程序的数量将直接影响到页面的整体运行性能，如何利用好事件处理程序可以从以下解决办法入手：
- 事件委托
- 移除事件处理程序
- 添加到页面上的事件处理程序的数量将直接影响到页面的整体运行性能，如何利用好事件处理程序可以从以下解决办法入手：
- 模拟事件
- 事件通常由用户操作和浏览器功能触发，但也可以使用JavaScript在任意时刻来触发事件，以此来模拟浏览器创建的事件
- DOM中的事件模拟
- IE中的事件模拟
- 事件通常由用户操作和浏览器功能触发，但也可以使用JavaScript在任意时刻来触发事件，以此来模拟浏览器创建的事件
- 为事件指定处理程序的方式：
- 表单脚本
- JavaScript最初被用于处理表单脚本，尽管经历了长足的发展，但表单方面的变化并不明显，本章主要介绍表单的处理以及开发人员为表单处理做的一些增强
- 在JavaScript中，表单对应的是HTMLFormElement类型，继承自HTMLElement，由与其他元素相同的默认属性，也有一些自己的属性
- 表单的基础知识
- 提交表单
- 重置表单
- 表单字段
- 文本框脚本
- 选择文本
- 过滤输出
- 自动切换焦点
- HTML5约束验证API
- 选择框脚本
- 选择选项
- 添加选项
- 移除选项
- 移动和重排选项
- 表单序列化
- 富文本编辑（WYSIWYG，What You See Is What You Get，所见即所得）
- 实现在网页中编辑富文本内容的技术本质：在页面嵌入一个包含空HTML的ifame，......
- 使用Contenteditable属性
- 操作富文本
- 富文本选区
- 表单与富文本
- JavaScript最初被用于处理表单脚本，尽管经历了长足的发展，但表单方面的变化并不明显，本章主要介绍表单的处理以及开发人员为表单处理做的一些增强
- 使用Canvas绘图
- 基本用法
- 2D上下文
- 填充和描边
- 绘制矩形
- 绘制路径
- 绘制文本
- 变换
- 绘制图像
- 阴影
- 渐变
- 模式（重复的图像，用来填充和描边图形）
- 使用图像数据
- 合成
- WebGL
- HTML5脚本编程
- HTML5规范定义了新的HTML标记，为配合这些标记的变化，也定义了许多新的JavaScript API，简化以前很难实现的任务
- 跨文档消息传递（XDM）:来自不同域的页面间传递消息
- 原生拖放
- 媒体元素
- 历史状态管理
- 错误处理与调试
- 语言特性、工具支持
- 浏览器报告的错误
- IE
- 唯一一个在浏览器的界面窗体中显示JavaScript错误信息的浏览器
- Firefox
- firebug
- Safari
- Opera
- Chrome
- IE
- 错误处理
- 处理JavaScript错误时的手段
- try-catch语句
1 try{ 2 //可能会导致错误的代码 3 } 4 catch(error){ 5 //处理错误的代码 6 }- finally子句（可选，无论catch块是否执行，finally子句始终都会执行）
- 错误类型
- 每种错误都有对应的错误类型，当错误发生时，会抛出相应类型的错误对象，ECMA-262定义的7种错误类型：
- Error 基类型，其他类型继承自该类型，主要用途：供开发人员抛出自定义错误
- EvalError
- RangeError
- ReferenceError
- SyntaxError
- TypeError
- URIError
- 要想知道错误的类型，可以在try-catch语句中的catch语句中使用instanceof操作符
- 每种错误都有对应的错误类型，当错误发生时，会抛出相应类型的错误对象，ECMA-262定义的7种错误类型：
- 合理使用try-catch
- try-catch适合处理那些我们无法控制的错误
- try-catch语句中发生错误时，浏览器会认为错误已经被处理了，用户看不到实际存在的错误，可供开发者实现自己的错误处理机制
- 抛出错误
- throw操作符与try-catch语句相匹配，用于随时抛出自定义错误
- 在遇到throw操作符时，代码会立即停止执行，当有try-catch语句捕获到被抛出的错误时，代码才会继续执行
- 何时抛出错误，何时用try-catch语句来捕获错误？
- 抛出错误的目的在于提供错误发生的具体原因的消息，而捕获错误的目的在于避免浏览器以默认的方式处理它们
- 错误对象
- 任何没有通过try-catch语句处理的错误都会触发window对象的error事件
- 处理错误的策略
- 略（）
- 常见的错误类型
- 一般关注三种错误：
- 类型转换错误
- 数据类型错误
- 通信错误
- 一般关注三种错误：
- 区分致命错误和非致命错误
- 把错误记录到服务器
- try-catch语句
- 处理JavaScript错误时的手段
- 调试技术
- 将消息记录到控制台
- console对象
- error()
- info()
- log()
- warn()
- 错误消息带有红色图标，警告消息带有黄色图标
- 向JavaScript控制台中写入消息除了使用console.log()、opera.postError()等外，还可以使用LiveConnect（如果系统设置恰当）
- LiveConnect：在JavaScript中运行java代码
- console对象
- 将消息记录到当前页面
- 不支持JavaScript控制台时，用一个总是可以出现在页面中的元素显示消息（也可以动态创建）
- 抛出错误
- 使用throw抛出具体的错误信息
- 大型应用程序中，自定义的错误通常都使用assert()函数抛出，减少代码量
- 将消息记录到控制台
- 常见的IE错误
- 略
- JavaScript与XML
- 浏览器对XML DOM 的支持
- 将XML解析为DOM文档
- 将DOM文档序列化为XML字符串
- 浏览器对XPath的支持
- XPath是被设计用来在DOM文档中查找结点的一种手段
- 浏览器对XSLT的支持
- XSLT是与XML相关的一种技术，它利用XPath将文档从一种表现形式转换为另一种表现形式，它没有正式的API，在DOM规范中也没有它，只能依靠浏览器开发厂商以自己的方式实现它
- 浏览器对XML DOM 的支持
- E4X
- E4X是以ECMAScript-357标准的形式发布的针对ECMAScript的一个扩展，目的是为了操作XML数据提供与标准ECMAScript更相近的语法
- JSON
- JSON（JavaScript Object Notation，JavaScript对象表示法）是JavaScript的一个严格的子集，利用了JavaScript中的一些模式来表示结构化数据
- 与XML相比，JSON是JavaScript中读写结构化数据的更好的方式，因为可以把JSON直接传给eval()，而且不必创建DOM对象
- JSON是一种数据格式，不是一种编程语言，
- 虽然与JavaScript具有相同的语法形式，但它并不从属于JavaScript
- 很多编程语言都有针对JSON的解析器和序列化器
- 语法
- JSON可以表示3种类型的值：
- 简单值
- 使用与JavaScript相同的语法，可以表示数值、布尔值、字符串（必须使用双引号）和null，但不支持undefined
- 对象
- 一种复杂数据类型，表示一组有序的键/值对，其中的键可以是简单值也可以是复杂数据类型的值
- 属性名必须加双引号
- 数组
- 一种复杂数据类型，表示一组有序的值的列表，可通过数值索引来访问其中的值，数组的值可以是任意类型——简单值、对象或数组
- 简单值
- JSON不支持变量、函数或对象实例
- 对象和数组通常是JSON数据结构的最外层形式，利用它们可以创造出各种数据结构
- JSON可以表示3种类型的值：
- 解析与序列化
- JSON数据结构可以解析为JavaScript对象
- 与XML数据结构要解析为DOM文档并从中提取数据相比，JSON的优势极为明显，已成为Web服务开发中交换数据的事实标准
- JSON对象
- eval()函数可以解析、解释并返回JavaScript对象和数组，早期的JSON解析器就是使用eval()函数
- ECMAScript5对解析JSON的行为进行规范，定义了全局对象JSON
- JSON对象的两个方法
- stringify() 把JavaScript对象序列化为JSON字符串（不包含空格字符和缩进）
- parse() 把JSON字符串解析为原生JavaScript值
- 将一个JavaScript对象序列化为一个JSON字符串后再解析得到的JavaScript对象与原来的JavaScript对象是两个独立的、没有任何关系的对象
- 序列化选项
- stringify()可以指定以不同的方式序列化JavaScript对象
- 可实现过滤结果、字符串缩进等
- toJSON()可以实现自定义序列化，可为任何对象添加toJSON()
- stringify()可以指定以不同的方式序列化JavaScript对象
- 解析选项
- parse()也可以接受另一参数
- Ajax与Comet
- Ajax（Asynchronous JavaScript + XML 的简写），这一技术能够向服务器请求额外的数据而无须卸载页面，彻底改变了“单击，等待”的交互模式，带来了更好的用户体验（2005年由Jesse James Garrett 发表的一篇在线文章提出）
- 浅谈Ajax
- XMLHttpRequest对象
- IE7+、Firefox、Opera、Chrome、Safari都支持原生的XHR对象，在这些浏览器中创建XHR对象要像下面这样使用XMLHttpRequest构造函数
1 var xhr = new XMLHttpRequest();
- XHR的用法
- 要调用的第一个方法是open()，启动一个请求以备发送
- 只能向同一个域中使用相同端口和协议的URL发送请求，如果URL与启动请求的页面有任何差别都会引发安全错误
- 要发送特定的请求，必须调用send()，调用send()后，请求被分派到服务器
- 如果请求是同步的，JavaScript代码会等到服务器响应之后再继续执行，在收到响应后，响应的数据会自动填充XHR对象的属性，相关属性如下：
- responseText 作为响应主体被返回的文本
- responseXML 如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存着响应数据的XML DOM 文档
- status 响应的HTTP状态
- statusText HTTP状态的说明
- HTTP头部信息
- GET请求
- POST请求
- IE7+、Firefox、Opera、Chrome、Safari都支持原生的XHR对象，在这些浏览器中创建XHR对象要像下面这样使用XMLHttpRequest构造函数
- XMLHttpRequest 2级
- XMLHttpRequest 1级只是把已有的XHR对象的实现细节描述了出来，XMLHttpRequest 2级进一步发展了XHR
- FormData
- FormData类型为序列化表单以及创建与表单格式相同的数据（用于XHR的传输）提供了便利，使用FormData的方便之处体现在不必明确地在XHR对象上设置请求头部
- （相关的属性和方法请参考API文档）
- 超时设定
- overrideMimeType()
- 进度事件
- 跨源资源共享
- CORS（Cross-Origin Resource Sharing，跨源资源共享）是W3C的一个工作草案，定义了在必须访问跨源资源时，浏览器与服务器应该如何沟通
- IE对CORS的实现
- 其他浏览器对CORS的实现
- Preflighted Requested
- CORS通过一种叫 Preflighted Requests 的透明服务器验证机制支持开发人员使用自定义的头部、GET或POST之外的方法，以及不同类型的主体内容
- 带凭据的请求
- 默认情况下，跨源请求不提供凭据（cookie、HTTP认证以及客户端SSL证明等），通过将withCredentials属性设置为true，可以指定某个请求应该发送凭据
- 实现跨浏览器的CORS
- 其他跨域技术
- 图像Ping
- 可以从任何网页中加载图像，不用担心跨不跨域，利用事件可以动态地创建图像，使用事件处理程序来确定是否接收到了响应
- 图像Ping是与服务器端进行简单、单向的跨域通信的一种方式，常用于跟踪用户点击页面或动态广告曝光次数，只能发送GET请求，而且无法访问服务器的响应文本
- JSONP
- JSONP是JSON with padding 的简写，一种应用JSON的新方法，从形式上看，它是被包含在函数调用中的JSON，JSONP通过动态<script>元素来使用（<script>与<img>类似，都有能力不受限制地从其他域加载资源）
- Comet
- 在Firefox、Safari、Opera、Chrome中，通过侦听readystatechange事件及检测readyState的值是否为3，就可以利用XHR对象实现HTTP流
- 服务器发送事件
- SSE（Server-Sent Events，服务器发送事件）是围绕只读Comet交互推出的API或者模式，使用它可以更容易地实现Comet
- 组合使用XHR和SSE也能实现双向通信
- Web Sockets
- 其目的是在一个单独的持久连接上提供全双工、双向通信
- 在JavaScript中创建了Web Socket之后，会有一个HTTP请求发送到浏览器以发起连接，在取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为Web Socket协议
- 使用自定义协议而非HTTP协议的好处是能够在客户端和服务器之间发送非常少量的数据，而不必担心HTTP那样字节级的开销
- 图像Ping
- 安全
- 对于未被授权系统有权访问某个资源的情况，我们称之为CSRF(Cross-Site Request Forgery，跨站点请求伪造)，未被授权系统会伪装自己，让处理请求的服务器认为它是安全的
- 确保安全
- 本章小结
这篇关于JavaScript高级程序设计-2的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-07-04TiDB 资源管控的对撞测试以及最佳实践架构
- 2024-07-03万字长文聊聊Web3的组成架构
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难？答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图，怎么办？
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗？
- 2024-06-0514-ShardingSphere的分布式主键实现
