富文本选区 在富文本编辑器中使用 iframe 的 getSelection() 方法可以获取选中的文本 该方法是 window 对象和 document 对象的属性,调用后会返回一个当前选选择文本的 Selection 对象 selection 对象拥有下列属性: anchorNode: 选区起点所在节点 anchorOffset:选区起点在其所在节点中的偏移量 focusNode:选区终点所在节点 focusOffest:选区终点在其所在节点中的偏移量 isCollapsed:布尔值,表示选…
操作富文本 与富文本编辑器的交互的主要方式就是使用 document.execCommand() 方法 该方法可以对文档执行自定义命令,并且可以应用大多数格式 该方法接收三个参数: 要执行命令的名称 浏览器是否应该为当前页面提供用户界面 执行命令的值 为了保证跨浏览器的兼容性,最好保证第二个参数为 false,因为Firefox会在该参数为 true 时报错 命令 值(第三个参数) 说明 backcolor 颜色字符串 设置文档的背景颜色 bold null 将选中的文本转为粗体显示 copy…
富文本编辑 富文本编辑又称为: WYSIWYG(What You See Is What You Get,所见即所得) 常用于博客等用途,虽然没有规范,但是在IE最先引入后其他的浏览器厂商也相继完成了对应功能的实现 该技术的本质就是在 HTML 页面中嵌入<iframe> 通过设置页面的 designMode 属性,使该页面可以被编辑 将该属性设置为 on 后文档就会变得可编辑 "off" 是默认值 以下方的 HTML 代码为例 <!DOCTYPE html>…
绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘制文本的X坐标 绘制文本的Y坐标 最大像素宽度 这些方法都以以下属性为基础: font: 表示文本样式,大小,字体, 该属性以 CSS 中指定字体的格式来指定 textAlign: 表示文本对齐方式,可能的值有 "start" "end" "left"…
文本框脚本 在HTML中文本框有两种实现方式: <input> <textarea> 这两种实现方式虽然在多数情况下表现一致,但是两者之间仍存在许多重要区别 对于<input>来说,如果需要展现一个文本框则需要将 type 特性设置为“text” 通过设置其 size 特性可以指定文本框中能够显示的最大字符数 通过 value 特性则可以设置文本框的初始值 通过设置 maxlength 特性可以设置文本框接收的最大字符数 <input type="tex…
键盘与文本事件 用户在使用键盘时会触发键盘事件 “DOM2级事件”最初规定了键盘事件,但是最后在定稿时又删除了相应内容 所以键盘事件被放入了DOM3级事件的规范中 总的来说有三个键盘事件: keydown:当用户按下键盘上的任意键时触发,按住不放会重复触发 keypress:用户按下键盘上的字符键时触发,按住不放重复触发(按下ESC键也会触发) keyup:用户释放按键触发 所有元素都支持上述三个事件,但只有用户通过文本文本框输入文本时比较常用 文本事件只有一个就是 textInput 事件 该…
遍历 “DOM2级遍历和范围” 定义了两个用于辅助完成顺序遍历的DOM结构类型 NodeIterator 和 TreeWalk 上述两种类型可以基于给定起点的DOM结构执行深度优先的遍历操作 对于检测浏览器对于该功能的实现可以使用以下代码 var supportTraversals = document.implementation.hasFeature("Traversal","2.0"); var supportsNodeIterator = (typeof d…
Element类型 除了Document类型之外,Element类型应该就是web编程中最常用的类型了 Element类型主要用于表现XML.HTML元素,提供对元素标签名.子节点以及特性的访问 特性 nodeType:1 nodeName:元素标签名 nodeValue:null parentNode:Document.Element tagName:用于访问元素的标签名(为了清晰,返回的值都是大写的标签名,在进行比较时需注意转换) HTML元素 Html 元素都使用 HTMLElement…
DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上就是三种规范,只要是实现了这三种规范,那么这个语言就可以说是JS DOM(文档对象模型)也是一种规范,是针对HTML和XML文档的API(应用程序编程接口) DOM的功能主要是用于将文档解析为一个层次化的节点树,通过DOM提供的API让开发人员能够操作这棵节点树 用于对文档内容进行操作(增.删.改.…
JS中处理字符串最常用的应该就是正则了 同样正则(RegExp)类型也是JS中引用类型的一种 ECMAScript通过 RegExp类型 来支持正则表达式 创建正则 var expression = / pattern / flags; 在上面创建正则实例中 pattern 部分可以是任意简单或复杂的正则表达式,每个正则表达式可以有一个或多个 flags 来标明正则的行为 使用构造函数创建 var expression = new RegExp("pattern","flag…