![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript高级程序设计
文章平均质量分 74
Minn0916
这个作者很懒,什么都没留下…
展开
-
JavaScript高级程序设计之DOM之DOM 操作技术之操作表格第10.2.3讲
元素是HTML 中最复杂的结构之一。要想创建表格,一般都必须涉及表示表格行、单元格、表头等方面的标签。由于涉及的标签多,因而使用核心DOM 方法创建和修改表格往往都免不了要编写大量的代码。假设我们要使用DOM 来创建下面的HTML 表格。Cell 1,1Cell 2,1Cell 1,2Cell 2,2要使用核心DOM 方法创建这些元素,得需要像下面这么多的代码:原创 2015-11-04 11:41:42 · 567 阅读 · 0 评论 -
JavaScript高级程序设计之DOM 扩展之HTML5之焦点管理第11.3.2讲
HTML5 也添加了辅助管理DOM 焦点的功能。首先就是document.activeElement 属性,这个属性始终会引用DOM 中当前获得了焦点的元素。元素获得焦点的方式有页面加载、用户输入(通常是通过按Tab 键)和在代码中调用focus()方法。来看几个例子。var button = document.getElementById("myButton");button.fo原创 2015-11-05 14:10:39 · 511 阅读 · 0 评论 -
JavaScript高级程序设计之DOM 扩展之专有扩展之contains()方法第11.4.3讲
在实际开发中,经常需要知道某个节点是不是另一个节点的后代。IE 为此率先引入了contains()方法,以便不通过在DOM 文档树中查找即可获得这个信息。调用contains()方法的应该是祖先节点,也就是搜索开始的节点,这个方法接收一个参数,即要检测的后代节点。如果被检测的节点是后代节点,该方法返回true;否则,返回false。以下是一个例子:alert(document.do原创 2015-11-05 15:58:35 · 1782 阅读 · 0 评论 -
JavaScript高级程序设计之DOM 扩展之HTML5之字符集属性第11.3.4讲
HTML5 新增了几个与文档字符集有关的属性。其中,charset 属性表示文档中实际使用的字符集,也可以用来指定新字符集。默认情况下,这个属性的值为"UTF-16",但可以通过元素、响应头部或直接设置charset 属性修改这个值。来看一个例子。alert(document.charset); //"UTF-16"document.charset = "UTF-8";另一个属原创 2015-11-05 14:37:41 · 463 阅读 · 0 评论 -
JavaScript高级程序设计之DOM 扩展之HTML5之插入标记第11.3.6讲
虽然DOM 为操作节点提供了细致入微的控制手段,但在需要给文档插入大量新HTML 标记的情况下,通过DOM 操作仍然非常麻烦,因为不仅要创建一系列DOM 节点,而且还要小心地按照正确的顺序把它们连接起来。相对而言,使用插入标记的技术,直接插入HTML 字符串不仅更简单,速度也更快。以下与插入标记相关的DOM 扩展已经纳入了HTML5 规范。1. innerHTML 属性在读模式原创 2015-11-05 15:26:29 · 985 阅读 · 0 评论 -
JavaScript高级程序设计之DOM 扩展之HTML5之scrollIntoView()方法第11.3.7讲
如何滚动页面也是DOM 规范没有解决的一个问题。为了解决这个问题,浏览器实现了一些方法,以方便开发人员更好地控制页面滚动。在各种专有方法中,HTML5 最终选择了scrollIntoView()作为标准方法。scrollIntoView()可以在所有HTML 元素上调用,通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视口中。如果给这个方法传入true 作为参数,或者不传入任原创 2015-11-05 15:30:14 · 3415 阅读 · 0 评论 -
JavaScript高级程序设计之DOM 扩展之专有扩展之文档模式第11.4.1讲
虽然所有浏览器开发商都知晓坚持标准的重要性,但在发现某项功能缺失时,这些开发商都会一如既往地向DOM 中添加专有扩展,以弥补功能上的不足。表面上看,这种各行其事的做法似乎不太好,但实际上专有扩展为Web 开发领域提供了很多重要的功能,这些功能最终都在HTML5 规范中得到了标准化。即便如此,仍然还有大量专有的DOM 扩展没有成为标准。但这并不是说它们将来不会被写进标准,而只是说原创 2015-11-05 15:48:18 · 533 阅读 · 0 评论 -
JavaScript高级程序设计之DOM 扩展之HTML5之HTMLDocument的变化第11.3.3讲
HTML5 扩展了HTMLDocument,增加了新的功能。与HTML5 中新增的其他DOM 扩展类似,这些变化同样基于那些已经得到很多浏览器完美支持的专有扩展。所以,尽管这些扩展被写入标准的时间相对不长,但很多浏览器很早就已经支持这些功能了。1. readyState 属性IE4 最早为document 对象引入了readyState 属性。然后,其他浏览器也都陆续添加这个属性,原创 2015-11-05 14:19:26 · 614 阅读 · 0 评论 -
JavaScript高级程序设计之DOM 扩展之专有扩展之children属性第11.4.2讲
由于IE9 之前的版本与其他浏览器在处理文本节点中的空白符时有差异,因此就出现了children属性。这个属性是HTMLCollection 的实例,只包含元素中同样还是元素的子节点。除此之外,children 属性与childNodes 没有什么区别,即在元素只包含元素子节点时,这两个属性的值相同。下面是访问children 属性的示例代码:var childCount = el原创 2015-11-05 15:52:42 · 552 阅读 · 0 评论 -
JavaScript高级程序设计之DOM2和DOM3之样式之访问元素的样式第12.2.1讲
在HTML 中定义样式的方式有3 种:通过元素包含外部样式表文件、使用元素定义嵌入式样式,以及使用style 特性定义针对特定元素的样式。“DOM2 级样式”模块围绕这3 种应用样式的机制提供了一套API。要确定浏览器是否支持DOM2 级定义的CSS 能力,可以使用下列代码。var supportsDOM2CSS = document.implementation.hasFeature原创 2015-11-07 22:39:59 · 558 阅读 · 0 评论 -
JavaScript高级程序设计之DOM2和DOM3之DOM 变化之针对XML命名空间的变化第12.1.1讲
DOM1 级主要定义的是HTML 和XML 文档的底层结构。DOM2 和DOM3 级则在这个结构的基础上引入了更多的交互能力,也支持了更高级的XML 特性。为此,DOM2 和DOM3级分为许多模块(模块之间具有某种关联),分别描述了DOM 的某个非常具体的子集。这些模块如下。DOM2 级核心(DOM Level 2 Core):在1 级核心基础上构建,为节点添加了更多方法和属性。原创 2015-11-06 16:32:02 · 700 阅读 · 0 评论 -
JavaScript高级程序设计之DOM 扩展之专有扩展之滚动第11.4.5讲
如前所述,HTML5 之前的规范并没有就与页面滚动相关的API 做出任何规定。但HTML5 在将scrollIntoView()纳入规范之后,仍然还有其他几个专有方法可以在不同的浏览器中使用。下面列出的几个方法都是对HTMLElement 类型的扩展,因此在所有元素中都可以调用。scrollIntoViewIfNeeded(alignCenter):只在当前元素在视口中不可见的情况下原创 2015-11-05 16:12:41 · 498 阅读 · 0 评论 -
JavaScript高级程序设计之DOM 扩展之HTML5之与类相关的扩充第11.3.1讲
11.3 HTML5对于传统HTML 而言,HTML5 是一个叛逆。所有之前的版本对JavaScript 接口的描述都不过三言两语,主要篇幅都用于定义标记,与JavaScript 相关的内容一概交由DOM 规范去定义。而HTML5 规范则围绕如何使用新增标记定义了大量JavaScript API。其中一些API 与DOM 重叠,定义了浏览器应该支持的DOM 扩展。因为HTML5原创 2015-11-05 13:52:33 · 477 阅读 · 0 评论 -
JavaScript高级程序设计之DOM之DOM 操作技术之动态脚本第10.2.1讲
10.2 DOM操作技术很多时候,DOM 操作都比较简明,因此用JavaScript 生成那些通常原本是用HTML 代码生成的内容并不麻烦。不过,也有一些时候,操作DOM 并不像表面上看起来那么简单。由于浏览器中充斥着隐藏的陷阱和不兼容问题,用JavaScript 代码处理DOM 的某些部分要比处理其他部分更复杂一些。10.2.1动态脚本使用元素可以向页面中插入Java原创 2015-11-03 16:24:07 · 609 阅读 · 0 评论 -
JavaScript高级程序设计之DOM之节点层次之DocumentFragment类型第10.1.8讲
在所有节点类型中,只有DocumentFragment 在文档中没有对应的标记。DOM 规定文档片段(document fragment)是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源。DocumentFragment 节点具有下列特征:nodeType 的值为11;nodeName 的值为"#document-fragment";nod原创 2015-11-03 15:39:13 · 550 阅读 · 0 评论 -
JavaScript高级程序设计之函数表达式之闭包之关于 this 对象第7.2.2讲笔记
在闭包中使用 this 对象也可能会导致一些问题。我们知道, this 对象是在运行时基于函数的执行环境绑定的:在全局函数中, this 等于 window ,而当函数被作为某个对象的方法调用时, this 等于那个对象。不过,匿名函数的执行环境具有全局性,因此其 this 对象通常指向 window ① 。但有时候由于编写闭包的方式不同,这一点可能不会那么明显。下面来看一个例子。原创 2015-09-30 20:24:17 · 632 阅读 · 0 评论 -
JavaScript高级程序设计之DOM之节点层次之Attr类型第10.1.9讲
元素的特性在DOM 中以Attr 类型来表示。在所有浏览器中(包括IE8),都可以访问Attr 类型的构造函数和原型。从技术角度讲,特性就是存在于元素的attributes 属性中的节点。特性节点具有下列特征:nodeType 的值为2;nodeName 的值是特性的名称;nodeValue 的值是特性的值;parentNode 的值为null;在HTML 中原创 2015-11-03 15:49:58 · 583 阅读 · 0 评论 -
JavaScript高级程序设计之DOM之DOM 操作技术之动态样式第10.2.2讲
能够把CSS 样式包含到HTML 页面中的元素有两个。其中,元素用于包含来自外部的文件,而元素用于指定嵌入的样式。与动态脚本类似,所谓动态样式是指在页面刚加载时不存在的样式;动态样式是在页面加载完成后动态添加到页面中的。我们以下面这个典型的元素为例:使用DOM 代码可以很容易地动态创建出这个元素:var link = document.createElement("link")原创 2015-11-03 20:38:32 · 530 阅读 · 0 评论 -
JavaScript高级程序设计之DOM之DOM 操作技术之使用NodeList第10.2.4讲
理解NodeList 及其“近亲”NamedNodeMap 和HTMLCollection,是从整体上透彻理解DOM 的关键所在。这三个集合都是“动态的”;换句话说,每当文档结构发生变化时,它们都会得到更新。因此,它们始终都会保存着最新、最准确的信息。从本质上说,所有NodeList 对象都是在访问DOM 文档时实时运行的查询。例如,下列代码会导致无限循环:var divs = d原创 2015-11-04 14:55:35 · 726 阅读 · 0 评论 -
JavaScript高级程序设计之DOM 扩展之专有扩展之插入文本第11.4.4讲
前面介绍过,IE 原来专有的插入标记的属性innerHTML 和outerHTML 已经被HTML5 纳入规范。但另外两个插入文本的专有属性则没有这么好的运气。这两个没有被HTML5 看中的属性是innerText和outerText。1. innerText 属性通过innertText 属性可以操作元素中包含的所有文本内容,包括子文档树中的文本。在通过innerText 读原创 2015-11-05 16:07:54 · 604 阅读 · 0 评论 -
JavaScript高级程序设计之DOM 扩展之选择符API第11.1讲
尽管DOM 作为API 已经非常完善了,但为了实现更多的功能,仍然会有一些标准或专有的扩展。2008 年之前,浏览器中几乎所有的DOM 扩展都是专有的。此后,W3C 着手将一些已经成为事实标准的专有扩展标准化并写入规范当中。对DOM 的两个主要的扩展是Selectors API(选择符API)和HTML5。这两个扩展都源自开发社区,而将某些常见做法及API 标准化一直是众望所归。此原创 2015-11-05 11:30:35 · 690 阅读 · 0 评论 -
JavaScript高级程序设计之DOM 扩展之HTML5之自定义数据属性第11.3.5讲
HTML5 规定可以为元素添加非标准的属性,但要添加前缀data-,目的是为元素提供与渲染无关的信息,或者提供语义信息。这些属性可以任意添加、随便命名,只要以data-开头即可。来看一个例子。添加了自定义属性之后,可以通过元素的dataset 属性来访问自定义属性的值。dataset 属性的值是DOMStringMap 的一个实例,也就是一个名值对儿的映射。在这个映射中,每个data原创 2015-11-05 14:41:32 · 613 阅读 · 0 评论 -
JavaScript高级程序设计之DOM 扩展之元素遍历第11.2讲
对于元素间的空格,IE9 及之前版本不会返回文本节点,而其他所有浏览器都会返回文本节点。这样,就导致了在使用childNodes 和firstChild 等属性时的行为不一致。为了弥补这一差异,而同时又保持DOM 规范不变,Element Traversal 规范(www.w3.org/TR/ElementTraversal/)新定义了一组属性。Element Traversal AP原创 2015-11-05 11:39:10 · 644 阅读 · 0 评论 -
JavaScript高级程序设计之DOM2和DOM3之DOM 变化之其他方面的变化第12.1.2讲
DOM 的其他部分在“DOM2 级核心”中也发生了一些变化。这些变化与XML 命名空间无关,而是更倾向于确保API 的可靠性及完整性。1. DocumentType 类型的变化DocumentType 类型新增了3 个属性:publicId、systemId 和internalSubset。其中,前两个属性表示的是文档类型声明中的两个信息段,这两个信息段在DOM1 级中是没有办法访原创 2015-11-06 16:55:46 · 921 阅读 · 0 评论 -
JavaScript高级程序设计之DOM2和DOM3之样式之操作样式表第12.2.2讲
CSSStyleSheet 类型表示的是样式表,包括通过元素包含的样式表和在元素中定义的样式表。有读者可能记得,这两个元素本身分别是由HTMLLinkElement 和HTMLStyleElement 类型表示的。但是,CSSStyleSheet 类型相对更加通用一些,它只表示样式表,而不管这些样式表在HTML中是如何定义的。此外,上述两个针对元素的类型允许修改HTML 特性,但CSS原创 2015-11-07 23:20:37 · 445 阅读 · 0 评论 -
JavaScript高级程序设计之DOM2和DOM3之样式之元素大小第12.2.3讲
本节介绍的属性和方法并不属于“DOM2 级样式”规范,但却与HTML 元素的样式息息相关。DOM中没有规定如何确定页面中元素的大小。IE 为此率先引入了一些属性,以便开发人员使用。目前,所有主要的浏览器都已经支持这些属性。1.偏移量首先要介绍的属性涉及偏移量(offset dimension),包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定,包括所有原创 2015-11-08 16:56:18 · 761 阅读 · 0 评论 -
JavaScript高级程序设计之JavaScript 简介 第1.1讲笔记
JavaScript 诞生于1995 年。当时,它的主要目的是处理以前由服务器端语言(如Perl)负责的一些输入验证操作。在JavaScript 问世之前,必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域,是否输入了无效的值。Netscape Navigator 希望通过JavaScript 来解决这个问题。在人们普遍使用电话拔号上网的年代,能够在客户端完成一些基本的验证原创 2015-09-25 13:44:29 · 667 阅读 · 0 评论 -
avaScript高级程序设计之在 HTML 中使用 JavaScript 第2.2讲笔记
2.2 嵌入代码与外部文件在 HTML 中嵌入 JavaScript 代码虽然没有问题,但一般认为最好的做法还是尽可能使用外部文件来包含 JavaScript 代码。不过,并不存在必须使用外部文件的硬性规定,但支持使用外部文件的人多会强调如下优点。 可维护性:遍及不同 HTML 页面的 JavaScript 会造成维护问题。但把所有 JavaScript 文件都放在一个文件原创 2015-09-25 23:06:54 · 856 阅读 · 0 评论 -
JavaScript高级程序设计之客户端检测之怪癖检测第9.2讲笔记
与能力检测类似,怪癖检测(quirks detection)的目标是识别浏览器的特殊行为。但与能力检测确认浏览器支持什么能力不同,怪癖检测是想要知道浏览器存在什么缺陷( “怪癖”也就是 bug) 。这通常需要运行一小段代码,以确定某一特性不能正常工作。例如,IE8 及更早版本中存在一个 bug,即如果某个实例属性与 [[Enumerable]] 标记为 false 的某个原型属性同名,原创 2015-10-13 22:59:48 · 770 阅读 · 0 评论 -
JavaScript高级程序设计之客户端检测之能力检测第9.1讲笔记
浏览器提供商虽然在实现公共接口方面投入了很多精力,但结果仍然是每一种浏览器都有各自的长处,也都有各自的缺点。即使是那些跨平台的浏览器,虽然从技术上看版本相同,也照样存在不一致性问题。面对普遍存在的不一致性问题,开发人员要么采取迁就各方的“最小公分母”策略,要么(也是更常见的)就得利用各种客户端检测方法,来突破或者规避种种局限性。迄今为止,客户端检测仍然是 Web 开发领域中一个饱受原创 2015-10-13 22:43:28 · 597 阅读 · 0 评论 -
JavaScript高级程序设计之DOM之节点层次之Comment类型第10.1.5讲
注释在DOM 中是通过Comment 类型来表示的。Comment 节点具有下列特征:nodeType 的值为8;nodeName 的值为"#comment";nodeValue 的值是注释的内容;parentNode 可能是Document 或Element;不支持(没有)子节点。Comment 类型与Text 类型继承自相同的基类,因此它拥有除splitTex原创 2015-11-01 23:03:20 · 374 阅读 · 0 评论 -
JavaScript高级程序设计之DOM之节点层次之CDATASection类型第10.1.6讲
CDATASection 类型只针对基于XML 的文档,表示的是CDATA 区域。与Comment 类似,CDATASection 类型继承自Text 类型,因此拥有除splitText()之外的所有字符串操作方法。CDATASection 节点具有下列特征:nodeType 的值为4;nodeName 的值为"#cdata-section";nodeValue 的值是C原创 2015-11-01 23:21:04 · 525 阅读 · 0 评论 -
JavaScript高级程序设计之DOM之节点层次之Text类型第10.1.4讲
文本节点由Text 类型表示,包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML 字符,但不能包含HTML 代码。Text 节点具有以下特征:nodeType 的值为3;nodeName 的值为"#text";nodeValue 的值为节点所包含的文本;parentNode 是一个Element;不支持(没有)子节点。可以通过nodeValu原创 2015-11-01 22:27:44 · 665 阅读 · 0 评论 -
JavaScript高级程序设计之DOM之节点层次之Element类型第10.1.3讲
除了Document 类型之外,Element 类型就要算是Web 编程中最常用的类型了。Element 类型用于表现XML 或HTML 元素,提供了对元素标签名、子节点及特性的访问。Element 节点具有以下特征:nodeType 的值为1;nodeName 的值为元素的标签名;nodeValue 的值为null;parentNode 可能是Document 或El原创 2015-11-01 20:53:28 · 1291 阅读 · 0 评论 -
JavaScript高级程序设计之DOM之节点层次之Document类型第10.1.2讲
JavaScript 通过Document 类型表示文档。在浏览器中,document 对象是HTMLDocument(继承自Document 类型)的一个实例,表示整个HTML 页面。而且,document 对象是window 对象的一个属性,因此可以将其作为全局对象来访问。Document 节点具有下列特征:nodeType 的值为9;nodeName 的值为"#docum原创 2015-10-27 22:58:00 · 967 阅读 · 1 评论 -
JavaScript高级程序设计之DOM之节点层次之DocumentType类型第10.1.7讲
DocumentType 类型在Web 浏览器中并不常用,仅有Firefox、Safari 和Opera 支持它①。Document-——————————①Chrome 4.0 也支持DocumentType 类型。Type 包含着与文档的doctype 有关的所有信息,它具有下列特征:nodeType 的值为10;nodeName 的值为doctype 的名称;原创 2015-11-01 23:34:54 · 344 阅读 · 0 评论 -
JavaScript高级程序设计之JavaScript实现 第1.2讲笔记
1.2 JavaScript 实现虽然 JavaScript 和ECMAScript 通常都被人们用来表达相同的含义,但JavaScript 的含义却比ECMA-262 中规定的要多得多。没错,一个完整的JavaScript 实现应该由下列三个不同的部分组成(见图1-1)。 核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) 图 1-1原创 2015-09-25 13:59:53 · 663 阅读 · 0 评论 -
JavaScript高级程序设计之DOM之节点层次之Node类型第10.1.1讲
DOM(文档对象模型)是针对HTML 和XML 文档的一个API(应用程序编程接口)。DOM 描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。DOM 脱胎于Netscape 及微软公司创始的DHTML(动态HTML),但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。1998 年10 月DOM1级规范成为W3C 的推荐标准,为基本的文档结构及查原创 2015-10-20 23:22:07 · 1311 阅读 · 0 评论 -
JavaScript高级程序设计之BOM之window 对象之窗口大小 第8.1.4讲笔记
跨浏览器确定一个窗口的大小不是一件简单的事。IE9+、Firefox、Safari、Opera 和Chrome 均为此提供了4 个属性:innerWidth、innerHeight、outerWidth 和outerHeight。在IE9+、Safari 和Firefox中,outerWidth 和outerHeight 返回浏览器窗口本身的尺寸(无论是从最外层的window 对象还是从原创 2015-10-13 09:53:38 · 886 阅读 · 0 评论 -
JavaScript高级程序设计之BOM之window 对象之窗口位置第8.1.3讲笔记
用来确定和修改window 对象位置的属性和方法有很多。IE、Safari、Opera 和Chrome 都提供了screenLeft 和screenTop 属性,分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在screenX 和screenY 属性中提供相同的窗口位置信息,Safari 和Chrome 也同时支持这两个属性。Opera虽然也支持screenX 和scre原创 2015-10-13 09:52:10 · 754 阅读 · 0 评论