位置: 编程技术 - 正文

JavaScript DOM 学习第九章 选取范围的介绍(javascript的dom)

编辑:rootadmin

虽然我们会讲解用程序创建范围对象,但是我们把精力主要集中在如何将用户的选取范围转换成为W3C 范围或者微软的文档范围对象。

什么是范围

范围是指HTML文档中的任意一部分内容。一个范围的开始和结束点都可以是随意的,甚至是相同的(一个空范围)。最常见的范围就是用户选取的文本。当用户在页面上选取了一部分,你就可以他的选取部分转换为范围对象。然而,你也可以让程序自动选择范围。

让我们以下面的代码为例。假设用户选择了下面的文字:

<h4 id="entry"><ahref=" for a Blogger's Code of Conduct</a></h4><p>Tim O'Reilly calls for a Blogger Code of Conduct. His proposals are:</p><ol><li>Take responsibility not just for your own words, but for thecomments you allow on your blog.</li><li>Label your tolerance level for abusive comments.</li><li>Consider eliminating anonymous comments.</li></ol>

你可以将用户选择转换为一个包含用户选择范围的文本的范围对象(后面讲)。根据范围对象,你能找到开始和结束的范围点。如果你愿意你可以删除它拷贝它或者用其他文本代替,甚至用HTML代码来代替。

这是范围对象最简单的例子了,因为他只包含文本。下面我们来看一个复杂的例子:

<h4 id="entry"><ahref=" for a Blogger's Code of Conduct</a></h4><p>Tim O'Reilly calls for a Blogger Code of Conduct. His proposals are:</p><ol><li>Take responsibility not just for your own words, but for thecomments you allow on your blog.</li><li>Label your tolerance level for abusive comments.</li><li>Consider eliminating anonymous comments.</li></ol>

另外一个范围对象被创建了,而且还包含HTML。问题在于用户的选择范围跨越了几个元素。去掉其他的内容,就剩下:

calls for a Blogger Code of Conduct. His proposals are:</p><ol><li>Take responsibility not just for your own words, but for thecomments you allow on your blog.</li><li>Label your toleran

这是一段不完整的HTML。幸好所有的浏览器都会转化一下:

<p>calls for a Blogger Code of Conduct. His proposals are:</p><ol><li>Take responsibility not just for your own words, but for thecomments you allow on your blog.</li><li>Label your toleran</li></ol>

正如你所看到的,浏览器会添加最少的元素让这段HTML完整,如果你复制的话,那么这些添加的东西也会被复制。

浏览器兼容性一览

在我们继续之前,有必要看看浏览器的兼容性。主要问题在于这里有不下3个范围对象的类型,你必须都有所了解才行。

Module

Explorer 6/7

Firefox 2Safari 1.3Opera 9W3C RangenoyesyesyesMozilla SelectionnoyesincompleteyesMicrosoft Text Rangeyesnonoincomplete

访问用户选区

要处理用户的选择就必须先访问到用户的选区。这会立马又一个代码分支:IE使用微软的方法,其他浏览器使用Mozilla的方法:在Mozilla,Safari,Opera里面现在userSelection是一个选择对象(selection object),在IE中是一个文本范围对象(text range object)。这个区别在后面的代码中依然有效:IE的文本范围对象和W3C的范围对象以及Mozilla的选择对象有根本的不同,每一部分的代码都需要另一部分的补充。 要注意分支的顺序:Mozilla Selection一定要在前。因为Opera两种都支持,如果你用window.getSelection()读取用户的选区,Opera就会创建一个选择对象,可是你用document.selection的时候他也会创建一个文本范围对象。 虽然Opera支持Mozilla和W3C模式很不错,但是支持IE确是有毛病,这样就不得不把window.getSelection放在前面检测。 userSelection的内容 现在userSelection既是一个Mozilla的选择对象又是IE的文本范围对象。这样他就可以使用所有的方法和属性了。 然后,Mozilla的选择对象userSelection里面保存的用户选择的文本(而不是HTML)。这样写: 就会产生: calls for a Blogger Code of Conduct. His proposals are: Take responsibilitynot just for your own words, but for the comments you allow on your blog.Label your toleran如果想在微软的文本范围对象中得到相同的内容你就要使用: var selectedText = userSelection;if (userSelection.text) selectedText = userSelection.text;现在selectedText就包含了用户选择的文本。如果你觉得这样的信息足够的话,那么就开始准备后面的工作吧。 从选择对象创建范围对象 很多时候,你想处理的是代表用户选择范围的范围对象(range object)。在微软模式中条件已经具备:userSelection就是一个文本范围。在兼容W3C的浏览器中userSelection依然只是一个选择对象,是时候创建一个与选择对象内容相同的范围对象了。 按照下面这样:

理想情况下,我们通过选择对象的getRangeAt()来访问W3C范围对象。这个方法会在给定的位置返回一个范围对象:就像平常一样第一个范围对象的编号是0。(getRangeAt()已经设计好如果有多处选择的情况下怎么办。在那种情况下你的代码也很简单)

自从创建一个范围

不幸的是Safari1.3不支持getRangeAt()。因此我们需要创建一个跟用户选择一样的范围对象。这是一个很好的练习机会,可以让你知道如何创建自己的范围对象。

很明显的从创建一个对象开始:

var range = document.createRange();

现在我们已经有了一个空对象。为了把他插入到文档里面去我们需要使用setStart()函数和setEnd()函数。

这两个方法需要两个参数:

1、在哪个DOM节点上开始或者结束的?

2、从哪个文本偏移上开始或者结束的?文本偏移就是指范围对象的第一个或者最后一个字符的位置。

让我们再来看一遍第二个例子:

href=" for a Blogger's Code of Conduct</a></h4><p>Tim O'Reilly calls for a Blogger Code of Conduct. His proposals are:</p><ol><li>Take responsibility not just for your own words, but for thecomments you allow on your blog.</li><li>Label your tolerance level for abusive comments.</li><li>Consider eliminating anonymous comments.</li></ol>

范围从<p>节点开始,并且文字偏移量是,因为第个字符已经是包含在范围里面的了(和通常一样,编号从0开始的)。

范围从<li>结束,偏移量是,因为第个字符时范围内的最后一个字符了。

如何创建这个范围对象:(注意现在创建的范围对用户不可见,只在浏览器的内部) 现在我们已经创建了一个范围,我们也可以读出他的开始和结束点。startContainer和startOffset决定了范围的开始位置,同样的endContainer和endOffset决定了结束位置。 读取选区的开始和结束位置 不幸的是,你并不知道用户选择了页面哪个部分。所以你需要先读出用户选择的开始和结束的位置:这个必须在选择对象(selection object)里面完成,因为这时候还没有范围对象(range object)。 我们刚刚看到每一个范围对象都有标明他开始和结束位置的四个属性。选择对象也有相似的。当然是另外的名字:anchorNode/anchorOffset代表开始位置,focusNode/focusOffset代表结束位置。 所以读出了选择对象的开始和结束位置之后我们就能创建范围对象了: 待续 现在我们有了范围对象和微软的文本范围对象。以后我们会讲解如何使用它们,并且解决不兼容的问题。 翻译地址: 转载请保留以下信息 作者:北玉(tw:@rehawk)

推荐整理分享JavaScript DOM 学习第九章 选取范围的介绍(javascript的dom),希望有所帮助,仅作参考,欢迎阅读内容。

JavaScript DOM 学习第九章 选取范围的介绍(javascript的dom)

文章相关热门搜索词:javascript中的dom,js dom操作方法,javascript的dom,javascript的dom,javascript中dom的含义,js中dom的用法,javascript中dom的含义,javascript的dom,内容如对您有帮助,希望把文章链接给更多的朋友!

JavaScript CSS修改学习第一章 查找位置 offset在所有的浏览器里面元素的offsetTop和offsetLeft两个属性都是很有用的。他们会给出你元素相对于父元素的坐标位置。这段代码会向上查找offsetParent,

JavaScript CSS修改学习第二章 样式 另外,有时候你也许想知道添加到一个元素或者链接上的样式的具体内容。而style属性只能读取元素的内联形式的样式,所以如果你想读取其他样式就

JavaScript CSS修改学习第三章 修改样式表 请注意代码和传统的DHTML的区别。在DHTML你通过直接修改页面上的特定元素来改变样式,而这里的代码修改的是样式表。在这里查看W3CDOM-CSS的兼容性列

标签: javascript的dom

本文链接地址:https://www.jiuchutong.com/biancheng/381857.html 转载请保留说明!

上一篇:JavaScript DOM学习第八章 表单错误提示(js domcontentloaded)

下一篇:JavaScript CSS修改学习第一章 查找位置(js如何修改style)

  • 收到个人开票会计分录怎么做
  • 外购免税农产品进项税额如何抵扣
  • 劳务公司包工包料的法律法规
  • 预提的费用在做所得税的时候如何处理
  • 什么企业符合加计扣除的条件
  • 自然人个税申报错误怎么更改?
  • 企业购车支付购置税流程
  • 基本医疗保险基金与生育保险基金
  • 增值税10%怎么算
  • 专项产资金支出要怎么做分录?
  • 押金是为了什么
  • 收到一达通退税款怎么做账
  • 员工借款后离职怎么办
  • 租赁公司扣押金
  • 技术服务费收入怎么确认收入
  • 增值税发票暂时无法查看怎么回事
  • 已经开具的增值发票
  • 出租车发票日期可以改吗
  • 出口退税可以用电子专用发票吗
  • 减免能减多久
  • 固定资产进项税额怎么抵扣
  • 离线开票时间超限怎么办 发票都已经报送
  • 建筑业小规模纳税人认定标准
  • 印花税征税范围包括所有合同
  • 出租车发票有出租车信息吗
  • 应付利息在资产负债表中属于什么项目
  • 航天维护费全额抵扣
  • 营改增后城建税和教育费附加包含在哪里
  • switcher.exe - switcher是什么进程
  • 进货折扣是怎么计算
  • 以经营租赁方式租入的设备要折旧吗
  • php字符串数组函数
  • 实缴资本多久可以取出随便用吗
  • php 通信
  • java代理类是什么
  • 专项应付款怎么转固定资产
  • 极速开票怎么打不开
  • 什么情况下计入库存商品
  • 公司被吊销营业执照的法律后果是什么?
  • 通过法院拍卖取得的土地没有得到执行属于什么案件
  • 结转和结算
  • 权益法核算投资收益纳税调整
  • 跨期费用账务处理
  • 冲销主营业务收入怎么做分录
  • 未开发票已收款如何做账?
  • 销售折扣含义
  • 售后回租的实际利率怎么计算
  • 安全费用支付
  • 技术服务费怎么交税
  • 短期借款计提利息计入什么科目
  • 留抵税额在账上没有,怎么办
  • 税审报告一定要税所主任签吗
  • SQLServer XML查询18句话入门教程
  • 用命令创建文件夹
  • win10系统即将过期怎么办
  • ubuntu配置yum
  • 大白菜u盘启动按f几
  • win10edge浏览器不见了
  • win10系统怎么将桌面路径改为d盘
  • xp系统文件损坏怎么修复
  • 苹果电脑截图快捷键
  • centos6.7防火墙
  • win7升级win10系统版本软件还有吗
  • 如何改进个人工作作风
  • dos cat命令
  • bootstrap入门
  • vbs运行cmd命令
  • vue的自定义组件
  • jquery 鼠标悬浮显示文字
  • 离线安装驱动
  • linux重启关闭打开达梦数据库
  • 通过制作日晷我们可以探索发现一天之中
  • 仿淘宝源码
  • 有没有改善
  • javascript教学视频
  • javascript对象和方法
  • 河北省国家税务局电子税务局登录
  • 深圳市税务局网上办税大厅官网
  • 慰问金能直接转账吗
  • 八戒财税兼职
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设