位置: 编程技术 - 正文

Javascript标准DOM Range操作全集第1/3页(js dom操作方法)

编辑:rootadmin
2级DOM定义了一个createRange()方法,如果是按照DOM此标准的浏览器(IE并不是支持此标准的,但是IE里的属性或方法却远比标准中定义的多得多),它属于document对象,所以创建一个range对象要这样做:var oRange = document.createRange();如果你要检测你的浏览器是否支持此标准Range对象,可以用hasFeature()方法来检测:var supportsDOMRanges = document.implementation.hasFeature("Range", "2.0");if (supportsDOMRange) {var oRange = document.createRange();//range code here}Range对象进行简单的选择最简单用Range进行选择,用selectNode()或者selectNodeContents()方法,这两个方法只有一个接收参数,一个DOM节点。selectNode()方法选择全部节点,包括它的孩子,而selectNodeContents()选择的节点只是它的孩子。如 <p id="p1"><b>Hello</b> World</p><script>var oRange1 = document.createRange();var oRange2 = document.createRange();var oP1 = document.getElementById("p1");oRange1.selectNode(oP1);oRange2.selectNodeContents(oP1);</script>oRange1和oRange2包含上面所说的两种方法,但是看了下面的示图相信你能很快明白这两个方法的区别:当你创建了一个Range对象时,Range实例就会有以下的属性:startContainer — 返回range对象从何开始的节点对象(父节点的第一个节点)startOffset — 返回Range开始的偏移量(offset),如果startContainer是一个文本节点,注释节点,或者是CDATA节点,这个属性返回文本的偏移量,否则返回第一个节点的索引。endCOntainer — 返回Range对象最后一个节点对象(父节点的最后一个节点)endOffset — 返回Range结束时的偏移量(offset)特性与startOffset相同。commonAncestorContainer — 返回第一个包含该Range对象的节点。注:这些属性均为只读属性(read-only),startOffset和endOffset将在下文中有较详细的解释。下面这段代码将说明这些属性,请在Mozilla firefox里运行(支持此标准的浏览器——DOM2级,IE里将无效): <html> <head> <title>DOM Range Example</title> <script type="text/javascript"> function useRanges() { var oRange1 = document.createRange(); var oRange2 = document.createRange(); var oP1 = document.getElementById("p1"); oRange1.selectNode(oP1); oRange2.selectNodeContents(oP1); document.getElementById("txtStartContainer1").value = oRange1.startContainer.tagName; document.getElementById("txtStartOffset1").value = oRange1.startOffset; document.getElementById("txtEndContainer1").value = oRange1.endContainer.tagName; document.getElementById("txtEndOffset1").value = oRange1.endOffset; document.getElementById("txtCommonAncestor1").value = oRange1.commonAncestorContainer.tagName; document.getElementById("txtStartContainer2").value = oRange2.startContainer.tagName; document.getElementById("txtStartOffset2").value = oRange2.startOffset; document.getElementById("txtEndContainer2").value = oRange2.endContainer.tagName; document.getElementById("txtEndOffset2").value = oRange2.endOffset; document.getElementById("txtCommonAncestor2").value = oRange2.commonAncestorContainer.tagName; } </script> </head> <body><p id="p1"><b>Hello</b> World</p> <input type="button" value="Use Ranges" onclick="useRanges()" /> <table border="0"> <tr> <td> <fieldset> <legend>oRange1</legend> Start Container: <input type="text" id="txtStartContainer1" /><br /> Start Offset: <input type="text" id="txtStartOffset1" /><br /> End Container: <input type="text" id="txtEndContainer1" /><br /> End Offset: <input type="text" id="txtEndOffset1" /><br /> Common Ancestor: <input type="text" id="txtCommonAncestor1" /><br /> </fieldset> </td> <td> <fieldset> <legend>oRange2</legend> Start Container: <input type="text" id="txtStartContainer2" /><br /> Start Offset: <input type="text" id="txtStartOffset2" /><br /> End Container: <input type="text" id="txtEndContainer2" /><br /> End Offset: <input type="text" id="txtEndOffset2" /><br /> Common Ancestor: <input type="text" id="txtCommonAncestor2" /><br /> </fieldset> </td> </tr> </table> </body></html>上面的代码将不作注释了,有什么问题,在评论中留言。Range中还有一些其它的方法:setStartBefore(node) — 设置Range的相对于node节点的起始位置setStartAfter(node) — 同上setEndBefore — 设置Range的相对于node节点的结束位置setEndAfter — 同上

推荐整理分享Javascript标准DOM Range操作全集第1/3页(js dom操作方法),希望有所帮助,仅作参考,欢迎阅读内容。

Javascript标准DOM Range操作全集第1/3页(js dom操作方法)

文章相关热门搜索词:javascript中dom的含义,js dom bom,js中dom的用法,js设置dom样式,JavaScript标准内置对象在编程中的作用,js中dom的用法,javascript中dom的含义,javascript中dom,内容如对您有帮助,希望把文章链接给更多的朋友!

尽可能写"友好"的"Javascript"代码 在SearchEngine的robot搜索时,针对的type,text/html此类文本的友好度是最高的(现阶段text/xml除外),而text/javascript此类的友好度不理想,如果robot还要判断D

兼容Mozilla必须知道的知识。 我想我也该把这个东西先拿出来了。希望可以帮助大家,我也是想到了哪些就写哪些,如果有遗漏的地方,还请指出,我会加上去的。列表了多种IE与M

你所要知道JS(DHTML)中的一些技巧 这些天都没有更新日志了,这篇文章就也算是自己的一些经验谈了。简单的说一些技巧给大家,希望对你有所帮助,如果还有疑问,可以在下边留言。

标签: js dom操作方法

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

上一篇:javascript中的对象和数组的应用技巧(javascript中的对象用于)

下一篇:尽可能写"友好"的"Javascript"代码(尽有可能的拼音)

  • 纳税标准怎么算
  • 印花税技术合同计税依据
  • 增值税纳税申报时间
  • 工程项目的存货含哪些科目
  • 退休返聘人员工资
  • 会计中预付款包括
  • 营改增之前
  • 公司缴纳个人所得税会计分录
  • 应收账款客户少了几毛没有付怎么处理
  • 申报个人所得税的详细流程
  • 技术开发费加计扣除优惠政策
  • 税率是3%开成5%怎么办
  • 非公司私营企业属于什么类型
  • 增加以前年度收入是否需要更正申报年报
  • 利润总额要减去营业外支出吗
  • 周转天数是越大越好吗
  • 只有进项没有销项怎么报税
  • 有限合伙人的投资风险有哪些
  • 支付工程款会计处理
  • 罕见病药品进口要求
  • 收据怎么写比较规范
  • win1020h2更新0x800f081f
  • 息税前利润变化率计算
  • 折旧可以计入主体成本吗
  • linux系统参数调优
  • 拍卖本人文字作品原稿
  • php响应时间
  • php io操作
  • 保险公司的展业方式
  • 辞退补偿款怎么算
  • yolov5 教程
  • 在金税卡里面如何交社保
  • 大前端需要掌握什么技能
  • 微软 new bing 广告收入
  • 收到销售方的负债怎么办
  • 一次开票分期确认怎么弄
  • js基本数据类型和复杂数据类型的区别
  • 新购入的汽车需要年检吗
  • java 邮件
  • 固定资产原值和净值在报表哪里看
  • 发票开具内容与实际经营范围不符是否合适呢?
  • 付国外专利费用需办什么手续
  • 个人所得税手续费返还增值税申报表怎么填
  • mysql升级-5.1升级到5.7
  • 进销存有什么用
  • 进口化妆品品牌大全
  • 所有者权益和负债的主要区别
  • 外购的商品赠送客人是否销售吗
  • 长期借款短期利息怎么算
  • 补交增值税税款怎么做账
  • 医院收费单可以当发票吗
  • 存货跌价准备的账务处理
  • 制造费用如何结转生产成本
  • 实收资本未到账减资要交税吗
  • 使用sql查询
  • 注册表 启动
  • Win10 Build 10565版Edge浏览器完整更新日志一览
  • xp系统怎么设置系统启动项
  • centos chrony
  • xp系统怎么调性能
  • osx安装win10
  • schupd.exe - schupd是什么进程 有什么用
  • win8网络图标不显示
  • win10移动版和win10区别
  • win8.1应用商店下载位置
  • 如何解决在沟通中产生的漏斗效应
  • unix怎么操作
  • js如何使用
  • 人应该掌握的基本知识
  • js移动端拖拽
  • jquery validation plugin
  • jqueryattrprop区别
  • linux释放cache
  • jquery操作元素样式
  • 国家税务总局官网电子税务局
  • 微信群记账小程序
  • 上海税务开户
  • 防伪开票系统操作流程
  • 四川税务2021
  • 国家税务系统
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设