JavaScript高级程序设计-读书笔记

Posted 2020-06-21 浅岸

第11章 DOM扩展

1、选择符API

Selector API Level 1 的核心是两个方法：querySelector()和querySelectorAll()。在兼容的浏览器中，可以通过Document及Element类型的实例调用它们。目前完全支持Selector API Level 1的浏览器有IE 8+、 Firefox 3.5+、 Safari 3.1+、 Chrome和Opera 10+。

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

querySelectorAll()方法返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList对象。

 

2、元素遍历

   为了弥补浏览器处理DOM元素间空白符的方式不一样，Element Traversal API为DOM元素定义了额外属性:

l        childElementCount:返回子元素（不包括文本节点和注释）的个数。

l        firstElementChild：指向第一个子元素；firstChild的元素版。

l        lastElementChild：指向最后一个子元素；lastChild的元素版。

l        previousElementSibling：指向前一个同辈元素；previousSibling的元素版。

l        nextElementSibling：指向后一个同辈元素；nextSibling的元素版。

支持Element Traversal规范的浏览器有IE 9+、 Firefox 3.5+、 Safari 4+、 Chrome和Opera 10+。

 

3、html5

（1）与类相关的扩充

HTML5新增了很多API，致力于简化CSS类的用法。getElementsByClassName()方法是最受欢迎的一个方法，可以通过document对象及所有HTML元素调用该方法。

 在操作类名时，需要通过className属性添加、删除和替换类名。因为className中是一个字符串，所以即使只修改字符串一部分，也必须每次都设置整个字符串的值。

 HTML5新增了一种操作类名的方式，可以使操作更简单也更安全，那就是为所有元素添加classList属性。这个类型定义了如下方法：add()、contains()、remove()、toggle()。

 

（2）焦点管理

HTML5也添加了补助管理DOM焦点的功能。首先就是document.activeElement属性，这个属性会始终引用DOM中当前获得了焦点的元素。

 元素获得焦点的方式有页面加载、用户输入（通常是通过按Tab键）和在代码中调用focus()方法。

 

（3）HTMLDocument的变化

HTML5扩展了HTMLDocument，新增了新的功能：

readyState属性：有两个可能的值loading（正在加载文档）和complete（已经加载完文档）；

compatMode（兼容模式）属性： 在标准模式下，值为CSS1Compat，而在混杂模式下，值为BackCompat。

head属性

 

 （4）字符集属性

charset属性：表示文档中实际使用的字符集，也可以用来指定新字符集。默认情况下，值为“UTF-16”,但可以通过<meta>元素、响应头部或直接设置charset属性修改这个值。

defaultCharset属性：表示根据浏览器和操作系统的设置，荡秋千文档默认的字符集应该是什么。

 

5）自定义数据属性

HTML5规定可以为元素添加非标准属性，但要添加前缀data-。添加了自定义属性后，可以通过元素的dataset属性来访问自定义的属性值。

 

（6）插入标记

通过DOM操作给文档插入大量新HTML标记非常麻烦。相对而言，使用插入标记的技术，直接插入HTML字符串不仅更简单，速度也更快。

  在读模式下，innerHTML属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML标记。在写模式下，innerHTML会根据指定的值创建新的DOM树，然后应这个DOM树完全替换调用元素原先的所有子节点。

  在读模式下，outerHTML返回它的元素及所有子节点的HTML标签。在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用的函数。

 

为了方便开发人员更好地控制页面滚动，HTML5选择了scrollIntoView作为标准方法。

 

4、专有扩展

    浏览器开发商在发现某项功能缺失时，会向DOM中添加专有扩展，以弥补功能上的不足。目前，仍有大量专有扩展没有被写入标准，它们还是专有功能。

   children属性：在元素中只包含元素子节点时，children属性与childNode没什么区别。

contains()方法：识别某个节点是不是另一个节点的后代。调用contains()方法的应该是祖先节点，这个方法接收一个参数，即桃检测的后代节点。如果被检测的节点是后代节点，该方法返回true；否则。返回false。

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

通过innerHTML属性可以操作元素中包含的所有文本内容，包括子文档树中的文本。outerHTML属性的作用范围扩大到了包含它的节点。

 

第12章 DOM2和DOM3

1.样式

在HTML中定义样式的方式有3种：通过<link/>元素包含外部样式表文件、使用<style/>元素定义嵌入式样式，以及使用style特性定义针对特定元素的样式。

（1）访问样式表

任何支持style特性的HTML元素在javascript中都有一个相应的style属性。这个style对象包含着通过HTML的style特性指定的所有样式信息，但不包含于外部样式表或嵌入样式表经层叠而来的样式。在style特性中指定的任何CSS属性都将表现为这个style对象的相应属性。

var myDiv = document.getElementById(“myDiv”);

//设置背景颜色

myDiv.style.border = “1px solid black”;

 

虽然style对象能够提供支持style特性的任何元素的样式信息，但它不包含那些从其他样式表层叠而来并影响到当前元素的样式信息。要获取计算的样式，用到了getComputedStyle()方法。IE不支持此方法，但它有一个类似的概念，currentStyle属性。

 

（2）操作样式表

应用文档的所有样式表是通过document.styleSheets集合来表示的。

要向现有样式表中添加新规则，需要使用insertRule()方法；从样式表中删除规则的方法是deleteRule()。

（3）元素大小

l        偏移量

 

 

l        客户区大小

 

 

l        滚动大小

 

 

3、遍历

“DOM2级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM结构的类型：NodeIterator和TreeWalker。这两个类型能够基于给定的起点对DOM结构执行深度优先(depth-first)的遍历操作。

 

4、范围

范围是选择DOM结构中特定部分，然后再执行相应操作的一种手段。

DOM2级在Document类型中定义了createRange方法。使用hasFeature()或者直接检测该方法，都可以确定浏览器是否支持范围。

操作范围中的内容：

l        deleteContents()方法能够从文档中删除范围所包围的内容；

l        extractContents()也会从文档中移除范围选区，但其会返回范围的文档片段；

l        使用insertNode()方法可以向范围选区的开始处插入一个节点；

l        以环绕范围插入内容，使用surroundContents()方法；

l        使用collapse()方法来折叠范围；

l        在有多个范围的情况下，可以使用compareBoundaryPoints()方法来确定这些范围是否有公共的边界（起点或终点）；

l        可以使用cloneRange()方法复制范围；

l        在使用完范围之后，最好调用detach()方法，以便从创建范围的文档中分离出该范围。

 

IE8及更早版本不支持DOM范围，不过支持一种类似的概念，既文本范围。

 

第17章 错误处理与调试

  1、几种避免浏览器响应JavaScript错误的方法:

    在可能发生错误的地方使用try-catch语句，这样就有机会以适当的方式对错误给出响应，而不必沿用浏览器处理错误的机制。

使用window.onerror事件处理程序，这种方式可以接受try-catch不能处理的所有错误（仅限于IE和Firefox）。

   2、常见的错误类型

     类型转换错误、数据类型错误、通信错误

   3、调试技术

     （1）最常见的做法就是在要调试的代码中随处插入alert()函数。我们也不再建议在调试中使用alert()了，因为调试后还需要清理。

     （2）将消息记录到控制台

       对IE8、Firefox、Chrome和Safari来说，可以通过console对象向JavaScript控制台中写入消息，这个对象有下列方法：

²   error(message)：将错误消息记录到控制台；

²   info(message)：将信息性消息记录到控制台；

²   log(message)：将一般消息记录到控制台；

²   warn(message)：将警告消息记录到控制台。

     （3）将消息记录到当前页面

       就是在页面中开辟一小块区域，用于显示消息。

     （4）抛出错误

       如果错误消息很具体，基本上可以把它当做确定错误来源的依据。