2019-01-16

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


image.png

所有现代浏览器都支持事件冒泡,但在具体实现上还是有一些差别。IE5.5及更早版本中的时间冒泡会跳过<html>元素(从<body>直接跳到document)。IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象。

13.1.2 事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。触发click事件的顺序:
document——<html>——<body>——<div>

image.png

虽然事件捕获是Netscape Communicator唯一支持的事件流模型,但IE9、Safari、Chrome、Opera和Firefox目前也都支持这种事件流模型。尽管“DOM2级事件”规范事件应该从document对象开始传播,但这些浏览器都是从window对象开始捕获事件的。由于老版本的浏览器不支持,因此很少有人使用事件捕获。除非特殊需要时才需要使用事件捕获

13.1.3 DOM事件流

“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。
1)首先是事件捕获,为截获事件提供了机会
2)然后是实际的目标接收到时间
3)最后是冒泡阶段,可以在这个阶段做出相应


image.png

IE9、Opera、Firefox、Chrome和Safari都支持DOM事件流;IE8及更早版本不支持DOM事件流。

——————————————————————————————————

Git工作流程

image.png

◆ Workspace:工作区(进行开发的,当前看到最新的工作区)
◆ Index/Stage:暂存区(记录git add添加文件的相关信息,不保存实体,通过id指向每个文件实体。)
——使用git status 查看暂存区的状态。暂存区标记了当前工作区中,哪些内容是被git管理的。
◆ Repository:仓库区(或本地仓库)(保存了对象对提交过的各个版本,比起工作区和暂存区的内容,它更旧一些)
——git commit 后同步index的目录树到本地仓库,方便下一步通过git push同步本地仓库与远程仓库的同步
◆ Remote:远程仓库(远程仓库的内容可能被分布在多个地点的处于协作关系的本地仓库修改,因此它可能与本地仓库同步,也可能不同步,但是它的内容是最旧的。)

小结:
1、任何对象都是在工作区中诞生和被修改;
2、任何修改都是从进入index区才开始被版本控制;
3、只有把修改提交到本地仓库,该修改才能在仓库中留下痕迹;
4、与协作者分享本地的修改,可以把他们push到远程仓库来共享。

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342