12.4.2 IE8及更早版本中的范围
顾名思义,文本范围处理的主要是文本(不一定是DOM节点)。通过<body><button><input><textarea>等这几个元素,可以调用createTextRange()文本来创建文本范围:
var range = document.body.createTextRange();
像这样通过document创建的范围可以在页面中的任何地方使用(通过其他元素创建的范围则只能在相应的元素中使用)。与DOM范围类似,使用IE文本范围的方式也有很多种:
1、用IE范围实现简单的选择
选择页面中某一区域的最简单方式,就是使用范围的findeText()方法。这个方法会找到第一次出现的给定文本,并将范围移过来以环绕该文本。
如果没有找到文本,返回false;否则返回true。
<p id="p1"><b>Hello</b>world!</p>
//要选择“Hello”,可以使用下列代码
var range = document.body.createTextRange();
var found = range.findText("Hello");
alert(found);//true
alert(range.text);//"Hello"
2、使用IE范围实现复杂的选择
在IE中创建复杂范围的方法,就是以特定的增量向四围移动范围。
为此,IE提供了4个方法:move()、moveStart()moveEnd()和expand()。这些方法都接受两个参数:移动单位和移动单位的数量。
3、操作IE范围中的内容
在IE中操作范围中的内容可以使用text属性或pasteHTML()方法。
4、折叠IE范围
IE为范围提供的collapse()方法与相应的DOM用法一样:传入true把范围折叠到起点,传入false把范围折叠到终点:
range.collapse(true);//折叠到起点
5、比较IE范围
IE中的compareEndPoints()方法与DOM范围的compareBoundaryPoints()方法类似。
这个方法接受两个参数:比较的类型和要比较的范围。
6、复制IE范围
在IE中使用duplicate()方法可以复制文本范围,结果会创建原范围的一个副本:
var newRange = range.duplicate();
新创建的范围会带有与原范围完全相同的属性
第12章 DOM2和DOM3总结
DOM2级规范定义了一些模块,用于增强DOM1级。“DOM2级核心”为不同的DOM类型引入了一些与XML命名空间有关的方法。这些变化只在使用XML或XHTML文档时才有用;对于HTML文档没有实际意义。
除了与XML命名空间有关的方法外,“DOM2级核心”还定义了以编程方式创建Document实例的方法,也支持了创建DocumentType对象。
“DOM2级样式”模块主要针对操作元素的样式信息而开发,其特性简要总结如下:
◆ 每个元素都有一个关联的style对象,可以用来确定和修改行内的样式
◆ 要确定某个元素的计算样式,可以使用getComputedStyle()方法
◆ IE不支持getComputedStyle()方法,但为所有元素都提供了能够返回相同信息currentStyle属性
◆ 可以通过document.styleSheets集合访问样式表
◆ 除IE之外的所有浏览器都支持针对样式表的这个接口,IE也为几乎所有相应的DOM功能提供了自己的一套属性和方法
“DOM2级遍历和范围”模块提供了与DOM结构交互的不同方式:
◆ 遍历即使用NodeIterator或TreeWalker对DOM执行深度优先的遍历。
◆ NodeIterator是一个简单的接口,只允许以一个节点的步幅前后移动。而TreeWalker在提供相同功能的同时,还支持在DOM结构的各个方向上移动,包括父节点、同辈节点和子节点等方向。
◆ 范围是选择DOM结构中特定部分,然后再执行相应操作的一种手段
◆ 使用范围选区可以在删除文档中某些部分的同事,保持文档结构的 格式良好,或者复制文档中的相应部分。
◆ IE8及更早版本不支持“DOM2级遍历和范围”模块,但它提供了一个专有的文本范围对象,可以用来完成简单的基于文本的范围操作。IE9完全支持DOM遍历。
第13章 事件
Javascript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。
13.1事件流
页面的哪一部分会拥有某个特定的事件?
事件流描述的是从页面中接收时间的顺序。IE的事件流是时间冒泡流,而Netscape Communicator的事件流是事件捕获流。
13.1.1 事件冒泡
IE的事件流叫做时间冒泡,即事件开始时由最具体的元素(文档中嵌套层次最深的那个点)接收,然后逐级向上传播到较为不具体的节点(文档)
<!DOCTYPE>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click me</div>
</body>
</html>
如果单击了页面中的<div>元素,那么这个click事件会按照下列顺序传播:
<div>——<body>——<html>——document
所有现代浏览器都支持事件冒泡,但在具体实现上还是有一些差别。IE5.5及更早版本中的时间冒泡会跳过<html>元素(从<body>直接跳到document)。IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象。
13.1.2 事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。触发click事件的顺序:
document——<html>——<body>——<div>
虽然事件捕获是Netscape Communicator唯一支持的事件流模型,但IE9、Safari、Chrome、Opera和Firefox目前也都支持这种事件流模型。尽管“DOM2级事件”规范事件应该从document对象开始传播,但这些浏览器都是从window对象开始捕获事件的。由于老版本的浏览器不支持,因此很少有人使用事件捕获。除非特殊需要时才需要使用事件捕获
13.1.3 DOM事件流
“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。
1)首先是事件捕获,为截获事件提供了机会
2)然后是实际的目标接收到时间
3)最后是冒泡阶段,可以在这个阶段做出相应
IE9、Opera、Firefox、Chrome和Safari都支持DOM事件流;IE8及更早版本不支持DOM事件流。
——————————————————————————————————
Git工作流程
◆ Workspace:工作区(进行开发的,当前看到最新的工作区)
◆ Index/Stage:暂存区(记录git add添加文件的相关信息,不保存实体,通过id指向每个文件实体。)
——使用git status 查看暂存区的状态。暂存区标记了当前工作区中,哪些内容是被git管理的。
◆ Repository:仓库区(或本地仓库)(保存了对象对提交过的各个版本,比起工作区和暂存区的内容,它更旧一些)
——git commit 后同步index的目录树到本地仓库,方便下一步通过git push同步本地仓库与远程仓库的同步
◆ Remote:远程仓库(远程仓库的内容可能被分布在多个地点的处于协作关系的本地仓库修改,因此它可能与本地仓库同步,也可能不同步,但是它的内容是最旧的。)
小结:
1、任何对象都是在工作区中诞生和被修改;
2、任何修改都是从进入index区才开始被版本控制;
3、只有把修改提交到本地仓库,该修改才能在仓库中留下痕迹;
4、与协作者分享本地的修改,可以把他们push到远程仓库来共享。