DOM 之Range(范围)

-------<javascript高级程序设计> 12.4 范围笔记------- DOM2级在Document类型中定义了createRange()方法,在兼容DOM的浏览器中,这个方法属于Document对象.可以使用HasFeature方法来检测浏览器是否支持范围 var supportsRange = document.implementation.hasFeature(‘Range’, ‘2.0’) var alsoSupportsRange = (typeof docume…

使用Dom的Range对象处理chrome和IE文本光标位置

有这样一段js: var sel = obj.createTextRange(); sel.move('character', num); sel.collapse(); sel.select(); 那么在IE中是没有问题的,如:textArea它是可以创建出createTextRange对象的.那么下面的三句就是让当前的鼠标“光标”停留在num的位置(可以查询相关的资料).这段代码你可选择在click中去触发. 也可以在focus中触发,这个时机你可以自己控制. 同样的效果在chrome中可以…

JS 之DOM range对象

DOM范围 DOM中的range对象是DOM2中新定义的接口.通过这个对象可以选择文档中的某个区域,而不必考虑节点的界限. 创建范围 document.createRange()创建一个范围,这个范围是range类型的实例.包含下面这些属性和方法. startContainer:包含范围起点的节点(选区中第一个节点的父节点). startOffset:范围在startContainer中起点的偏移量. endContainer:包含范围终点的节点(选区中最后一个节点的父节点). endOffse…

XML DOM - Range 对象

Range对象 Range对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域. dom标准Range对象在IE中使用TextRange对象 range对象常用的建立方法在开发中除了上述文档中的标准建立方法,大多如下方式建立标准dom: var range=window.getSelection().getRangeAt(0); IE: var range=document.selection.createRange(); 注意:标准dom是从window中获取sel…

DOM拓展

DOM拓展 1.选择符API 所谓选择符API即是根据css选择符选择与某个模式相匹配的DOM元素,jQuery的核心就是通过css选择符查询DOM文档取得元素的引用,从而抛弃了原有繁琐的getELement等等 querySelector()方法:接受一个css选择符,有则返回该元素,没有则返回null.通过document类型调用其,则在文档元素<html>中查找;通过element类型调用其,则在该元素后代元素范围内查找 var body=document.querySelector(&…

JavaScript之DOM等级概述

这两日对DOM等级的理解不是太通透,就进Mozilla官网去看了一下,然后进行了首次的对技术文档的翻译工作,虽然官网也有中文解释,但我想,自己翻译出来时,已经有了原汁原味的理解了吧,这边是做此次翻译的原因所在.----Johnny Zen 2017-11-17 DOM Levels[DOM 等级概述] @source:https://developer.mozilla.org @translator:Johnny Zen @school:XiHua University @contact:QQ:…

dom2和dom3

第十二章 DOM2和DOM3 一.DOM变化 1.针对XML命名空间的变化 2.其他方面的变化二.样式 1.访问元素的样式 .style 1)DOM样式属性方法 cssText:访问style特性中的CSS代码 length:应用给元素的CSS属性数量 parentRule:表示CSSRule对象 getProperty…

js-DOM2，表单脚本

DOM2: 1.DOM2中:创建一个完整的HTML文档 document.implementation.createHTMLDocument("new Doc"); alert(htmldoc.title);------"New Doc" alert(typeof htmldoc.body);-----"object" 2. 样式: 1) 在css属性是color,background-image ,在js中style.color,sty…

Javascript高级编程学习笔记（55）—— DOM2和DOM3（7）操作范围

操作范围中的内容在创建范围时,内部会为这个范围创建一个文档片段范围所属的全部节点都会被添加到这个片段中虽然选取范围可以不是完整的.良好的DOM结构但是在这个为范围创建的文档片段中,会自己完缺少的闭合标签,以此构建有效的DOM结构来方便我们操作上述步骤都是内部实现的,因此我们可以不用过多地关注这一方面首先是 deleteContents() 这个方法会从文档中删除选中范围的内容以下方的HTML代码为例 <p id = "p1"><b>hello<…

原生js 复制内容到剪切板

代码: function copyHandle(content){ let copy = (e)=>{ e.preventDefault() e.clipboardData.setData('text/plain',content) this.$message.success('复制成功') document.removeEventListener('copy',copy) } document.addEventListener('copy',copy) document.execCommand…

H5/纯JS实现：把网页中的文字复制到剪切板

copy =() => { const dom = document.getElementById(`collect-text-${t.Id}`) const selection = window.getSelection() const range = document.createRange() if (!dom || !selection || !range) return // 选择复制目标 range.selectNodeContents(dom) selection.removeAl…

Notes: DOM Range

通过DOM范围可以选择文档中的某个区域,而不需考虑节点的界限,例如文本高亮的处理就可以使用范围来实现. 1.Range的创建使用document的createRange来创建一个范围,该方法返回一个Range实例,该实例有很多属性和方法,如下所示: startContainer:包含范围起点的节点 startOffset:范围起点在startContainer中的偏移量,既节点索引 endContainer:包含范围终点的节点 endOffset:范围终点在endContainer的偏移量,节…

web dom api中的Selection和Range

如果你做过wysiwyg这样的app,一个很让人头疼的问题是如何保证执行bold,italic等格式化操作后保持先前鼠标所在的位置.要好好的解决这个问题,就必须将Selection和Range的api搞搞清楚. https://javascript.info/selection-range Selection and Range js可以获得当前的选中区域信息,可以选择或者去选择部分或者全部内容,清楚document中的选中部分,使用一个心的tag来进行包裹等操作.所有这些操作的基石就是Selc…

iOS 字符串删除 DOM

iOS string 删除包含的 DOM NSMutableString *mutableString = [NSMutableString stringWithString:responseString]; NSString *string = @"\xEF\xBB\xBF"; while ([mutableString rangeOfString:string].location != NSNotFound) { NSRange range = [mutableString r…

解密jQuery内核 DOM操作的核心buildFragment

文档碎片是什么 http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-B63ED1A3 DocumentFragment is a "lightweight" or "minimal" Document object. It is very common to want to be able to extract a portion of a document's tree or to create…

深入理解DOM事件类型系列第五篇——文本事件

× 目录 [1]change [2]textInput [3]input[4]propertychange[5]兼容前面的话如果DOM结构发生变化,触发的是变动事件:如果文本框中的文本发生变化,触发的是文本事件 HTML5为input控件新增了很多type属性,大大增加了input控件的应用场景.其中一个是type="range"的input控件,可以通过拖动游标改变value值,但并不是所有浏览器都可以实时显示,除了IE10+浏览器 <input type="ra…

Dom 概览

前言我们已经接触并使用了很多api去操作html文档,例如:appendChild,getElementById, 等等.但是,每当我在浏览器输入document,window 按下回车,会发现还有好多api不会使用.感觉自己在一个海洋里,找不到边界,有点茫然失措. 试想其原因,可能是,我一接触js编程时.就会被教着使用getElementById获取一个元素,使用removeChild删除一个元素等等.没有时间去思考事情的宏观,全貌.会完全沉浸在使用这些api的业务逻辑当中.那么解决这个问题…

HTML5部分新标签属性及DOM扩展元素

HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. 语义化标签:如<p>表示一个段落.<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等,在此基础上HTML5增加了大量更有意义的语义标签,更有利于搜索引擎或辅助设备来理解HTML页面内容. 常用语义标签: <nav> :导航 <hea…

JavaScript和DOM的产生与发展

首先本篇文章摘自:http://itbilu.com/javascript/js/Vyxodm_1g.html 非常感谢本篇文章的作者,他理清了我映像中混乱的DOM Level级别.让我知道了DOM0级并不存在,而我们现在常用CoreDOM.HTML-DOM都属于DOM1级,而事件的接口,则是从DOM2级开始引入. ====================== 具体内容 ===================== JavaScript历经了从被人误解到现在的被万众瞩目的转变.随着一些JavaSc…

getSelection、range 对象属性，方法理解，解释

网上转了一圈发现没有selection方面的解释,自己捣鼓下以这段文字为例子.. <p><b>法国国营铁路公司(SNCF)20日承认,</b>新订购的2000列火车因车体过宽,<strong>无法开进国内许多火车站的站台,从而不得不花大笔资金改造站台.</strong>法国国营铁路公司发言人克里斯托夫·皮耶诺埃尔告诉法国新闻电台:“我们发现问题晚了点.<b>我们承认这一失误并为此承担责任.”</b></p>…

javascript 解析dom字符串

知识要求:1:熟悉dom结构层次(如childNodes,nodeType,parent,children)等. 2:熟悉jq对象转换js 对象,反之毕竟不是专业js人.借助第3方框架.其实jq也是js封装的,所以请不要侮辱jq. 3:递归的使用(http://www.iteye.com/job/topic/1126012) iteye 深圳7k难找写递归的人不知道大侠你们是怎么认为的. 4:学会调试js.工具谷歌或者火狐 ie个人不习惯. 第1文本编辑器.http://www.cnbl…

DOM--3 DOM核心和DOM2 HTML(1)

网页是一种结构化的文档,使用一组预定义的XML和HTML标签进行标记:当浏览器接受到网页文档时,会根据文档类型和关联的样式表对其进行解析,然后以可视化形式显示在屏幕上. DOM是一组用来描述脚本怎样与结构化文档进行交互和访问的Web标准,DOM定义来一系列对象.方法和属性,用于访问.操作和创建文档中的内容.结构.样式和行为 DOM的级别 DOM 0级一般指在标准之前的一些特性,不同浏览器实现不一 DOM 1级(1998) DOM Core:为XML规定了树形节点结构,同时给出了创建.编辑和操纵…

Range对象理解，浏览器兼容性，获取鼠标光标位置

一.关于浏览器的兼容性目前主要有3种关于range的类似的对象,分别是W3C range 对象,Mozzlia selection ,ie TextRange 关于这三种的区别,请查看文档 http://www.quirksmode.org/dom/w3c_range.html 这里面对这三个是说的很清楚的可以看出 Mozilla 的 range 是一个selection对象 ,而在ie下 range 是一个 text Range 这个和Mozilla是完全不同的,所以需要为这两种类型的ra…

DOM系列---DOM操作样式

发文不易,若转载传播,请亲注明出处,谢谢! 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检测当前浏览器支持CSS能力的级别. DOM1级实现了最基本的文档处理,DOM2和DOM3在这个基础上增加了更多的交互能力,这里我们主要探讨CSS,DOM2增加了CSS编程访问方式和改变CSS样式信息. DOM一致性检测功能版本号说明 Core 1.0.2.0.3.0 基本的DOM,用于表…

读JS高级API笔记_(DOM&&DOM2&&DOM3)哎呀——园龄才9个月啊

---恢复内容开始--- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&…

BOM DOM

http://www.cnblogs.com/yexiaochai/archive/2013/05/28/3102674.html DOM Document Object Model 文档对象模型一个Window对象有一个document属性引用了Document对象 Document对象表示窗口内容,他是一个巨大的API中的核心对象,他代表操作文档的内容BOM 浏览器对象模型 Browser Object Model 说白点就是window这个东东:表示浏览器的一个实例,是访问浏览器窗口…

HTML5 编辑 API 之 Range 对象（二）

1.Range.cloneContents()The Range.cloneContents() returns a DocumentFragment copying the objects of type Node included in the Range. SyntaxdocumentFragment = range.cloneContents(); Examplerange = document.createRange();range.selectNode(document.getEle…

JS基础DOM篇之二：ＤＯＭ级别与节点层次？

通过上一篇我们大致了解了什么是DOM,今天我们继续深入了解. 1.DOM级别在大家阅读DOM标准的时候,可能会看到DOM(0/1/2/3)级的字眼,这就是DOM级别.但实际上,DOM0级标准是不存在的:所谓DOM0级只是DOM历史坐标中的一个参照点而已.具体说来,DOM0级指的是Internet Explorer 4.0和Netscape Navigator 4.0最初支持的DHTML.那下面就介绍一下这存在的三个级别. DOM1级(DOM Level 1)于1998年10月成为W…

javascript与DOM的渊源

1. JavaScript的起源 1.1 JavaScript的诞生与发展 JavaScript最初由Netscape的Brendan Eich设计, Netscape在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为JavaScript.由此看来,JavaScript只是出于营销考虑,看起来像Java实则与Java没有一点关系. 在JavaScript出现之前,Web浏览器仅是一种能够显示超文本文档的软件:在JavaScript出现之后,网页的交互性…

【JavaScript DOM编程艺术(第二版)】笔记

第1章 javascript简史 1.什么是DOM? 简单的说,DOM是一套对文档的内容进行抽象和概念化的方法.\ 第2章 javascript语法 1.内建对象: 内建在javascript语言里的对象.(可以new出来的) 2.宿主对象: 由浏览器提供的预定义对象称为宿主对象. 第3章 DOM 1.getElementById(): 使用getElementById()方法,返回一个与那个有着给定ID属性值的元素节点对应的对象,该方法的参数就是指定的ID,…

【DOM 之Range(范围)】的更多相关文章