DOM 其他一些特性
cookie
允许javascript程序读写HTTP cookie 的特殊的属性
domain
允许当Web页面之间交互时,相同域名下相互信任的Web服务器之间协作放宽同源策略安全限制
lastModified
包含文档修改时间的字符串(js获得网页的最后更新时间lastModified详解)
location
与window对象的location属性引用同一个Location对象
referrer
如果有,它表示浏览器导航到当前链接的上一个文档,该属性值和HTTP的Referer头信息的内容相同,只是拼写上有两个r(浅析document.referrer)
title
文档的<title>和</title>标签之间的内容
URL
文档的URL,只读字符串而不是Location对象,该属性值与location.href的初始值相同,只是不包含Location对象的动态变化,
查询选取的文本
选取文本function getSelectedText() {
if (window.getSelection) //HTML5
return window.getSelection().toString()
else if (document.selection) //ie
return document.selection.createRange().text;
}
可编辑的内容
有两种方法来启用编辑功能
1. 设置任何标签的HTML contenteditable属性
2.设置对应元素的javascript contenteditable属性
以上两种方法都使得元素的内容变成可编辑,当用户单击该元素的内容时,就会出现插入光标;
可以显式的为元素添加spellcheck属性来开启拼写检查(spellcheck = false 关闭)
3. 将Document对象的designMode属性设置为字符串 ‘on’ 使得整个文档可编辑(设置为 ‘off’将恢复为只读文档),designMode属性并没有对应的HTML属性,只能通过脚本来修改
针对designMode属性,各浏览器的支持情况也各不相同:
IE8:出于安全考虑,不允许使用designMode属性让页面进入编辑状态。
IE9:允许使用designMode属性让页面进入编辑状态。
Chrome 3和Safari:使用内嵌frame的方式,该内嵌frame是可编辑的。
Firefox和Opera:允许使用designMode属性让页面进入编辑状态。
4. document.execCommand()方法,(如果一个文档中有多个可编辑的元素,命令将自动应用到选区或插入光标所在的那个元素上)
document.queryCommandSupport()传递命令名来查询浏览器是否支持该命令
document.queryCommandEnabled()来查询当前所使用的命令
document.queryCommandState()来判定命令的当前状态
document.queryCommandValue() 来查询相关系列值 (如果在查询范围内一个属性有两个不同的值,则查询结果是不确定的;如fontname)
document.queryCommandIndeterm() 来检测多个值(如fontname)
以下内容转自 http://www.designcss.org/qianduan/single/369
[语法] :object.execCommand(sCommand[,bUserInterface][,vVlaue])
[返回值] :布尔值,若成功,返回true,否则返回false
[sCommand可选项及意义][Copy Form BlueIdea]:QUOTE
2D-Position 允许通过拖曳移动绝对定位的对象。
AbsolutePosition 设定元素的 position 属性为“absolute”(绝对)。
BackColor 设置或获取当前选中区的背景颜色。
BlockDirLTR 目前尚未支持。
BlockDirRTL 目前尚未支持。
Bold 切换当前选中区的粗体显示与否。
BrowseMode 目前尚未支持。
Copy 将当前选中区复制到剪贴板。
CreateBookmark 创建一个书签锚或获取当前选中区或插入点的书签锚的名称。
CreateLink 在当前选中区上插入超级链接,或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL。
Cut 将当前选中区复制到剪贴板并删除之。
Delete 删除当前选中区。
DirLTR 目前尚未支持。
DirRTL 目前尚未支持。
EditMode 目前尚未支持。
FontName 设置或获取当前选中区的字体。
FontSize 设置或获取当前选中区的字体大小。
ForeColor 设置或获取当前选中区的前景(文本)颜色。
FormatBlock 设置当前块格式化标签。
Indent 增加选中文本的缩进。
InlineDirLTR 目前尚未支持。
InlineDirRTL 目前尚未支持。
InsertButton 用按钮控件覆盖当前选中区。
InsertFieldset 用方框覆盖当前选中区。
InsertHorizontalRule 用水平线覆盖当前选中区。
InsertIFrame 用内嵌框架覆盖当前选中区。
InsertImage 用图像覆盖当前选中区。
InsertInputButton 用按钮控件覆盖当前选中区。
InsertInputCheckbox 用复选框控件覆盖当前选中区。
InsertInputFileUpload 用文件上载控件覆盖当前选中区。
InsertInputHidden 插入隐藏控件覆盖当前选中区。
InsertInputImage 用图像控件覆盖当前选中区。
InsertInputPassword 用密码控件覆盖当前选中区。
InsertInputRadio 用单选钮控件覆盖当前选中区。
InsertInputReset 用重置控件覆盖当前选中区。
InsertInputSubmit 用提交控件覆盖当前选中区。
InsertInputText 用文本控件覆盖当前选中区。
InsertMarquee 用空字幕覆盖当前选中区。
InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。
InsertParagraph 用换行覆盖当前选中区。
InsertSelectDropdown 用下拉框控件覆盖当前选中区。
InsertSelectListbox 用列表框控件覆盖当前选中区。
InsertTextArea 用多行文本输入控件覆盖当前选中区。
InsertUnorderedList 切换当前选中区是项目符号列表还是常规格式化块。
Italic 切换当前选中区斜体显示与否。
JustifyCenter 将当前选中区在所在格式化块置中。
JustifyFull 目前尚未支持。
JustifyLeft 将当前选中区所在格式化块左对齐。
JustifyNone 目前尚未支持。
JustifyRight 将当前选中区所在格式化块右对齐。
LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观,而不是只在移动或缩放完成后更新。
MultipleSelection 允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素。
Open 打开。
Outdent 减少选中区所在格式化块的缩进。
OverWrite 切换文本状态的插入和覆盖。
Paste 用剪贴板内容覆盖当前选中区。
PlayImage 目前尚未支持。
Print 打开打印对话框以便用户可以打印当前页。
Redo 重做。
Refresh 刷新当前文档。
RemoveFormat 从当前选中区中删除格式化标签。
RemoveParaFormat 目前尚未支持。
SaveAs 将当前 Web 页面保存为文件。
SelectAll 选中整个文档。
SizeToControl 目前尚未支持。
SizeToControlHeight 目前尚未支持。
SizeToControlWidth 目前尚未支持。
Stop 停止。
StopImage 目前尚未支持。
StrikeThrough 目前尚未支持。
Subscript 目前尚未支持。
Superscript 目前尚未支持。
UnBookmark 从当前选中区中删除全部书签。
Underline 切换当前选中区的下划线显示与否。
Undo 撤消。
Unlink 从当前选中区中删除全部超级链接。
Unselect 清除当前选中区的选中状态。合理的应用execCommand可以使我们的网页产生意想不到的效果。这里我是应用在一个所见即所得的多功能的编辑器上。
首先大家知道用传统的textarea标签是不能实现发帖的所见即所得的,顶多是使用UBB代码就像野花用的IPB一样,于是我们只能使用另外的方法,那就是iframe。iframe?对就是他。要实现对他的编辑我们需要调用designMode属性,举个例子。QUOTE
<iframe ID="sd_Content" width=100% height=100%></iframe>
<script>
sd_Content.document.designMode="On";
</script>这样我们就可以在iframe里面进行编辑了,你可以将这段代码Copy到html文件中打开试试在里面填入内容,而且Ctrl-I,Ctrl-U,Ctrl-B都可以用。
这时候,我们当然要想到,既然用了iframe标签那么我们如何使用form发送了。其实静下心考虑,方法很简单我们只需要建立一个隐藏的标签,然后在发送的时候使标签的值等于iframe里面的值就行了。现在代码就变成了QUOTE
<script>
function CopyDate(){
document.all("content").value=frames["sd_Content"].document.body.innerHTML;
}
</script>
<form onsubmit="CopyData();" action=save.asp method=post>
<INPUT type=hidden name=content value="">
<iframe ID="sd_Content" width=100% height=100%></iframe>
<script>
sd_Content.document.designMode="On";
</script>
</form>到现在我们的显示和发送的问题都解决了。接下来当然是编辑的内容了。也就是我们的正题也就是execCommand的应用。
这个函数的语法其实很简单。我这里举几个例子,大家照着上面的参数表改改就知道了。设置字体:
设置字体的内容包括文字颜色,文字背景色,文字字体,粗体,斜体,下划线,删除线,上标,下标,段落格式,字号,左对齐,居中对齐,右对齐,标号,项目标号,减少缩进,增大缩进QUOTE
//字体设置函数
function sd_FormatText(Command,value) {
execCommand(Command,false,value);
}
//以下如何得到颜色,字体,段落格式,字号值自拟
//设置文字颜色方式,设置为红色
sd_FormatText('forecolor', '#FF0000')
//设置文字背景颜色方式,设置为红色
sd_FormatText('backcolor', '#FF0000')
//设置文字字体方式,设置为宋体
sd_FormatText('fontname', '宋体')
//设置段落格式方式,设置为标题一,即H1
sd_FormatText('FormatBlock', '<H1>')
//设置文字字号方式,设置为一号字
sd_FormatText('fontsize', '1')
//设置加粗方式
sd_FormatText('bold', '')
//设置斜体方式
sd_FormatText('italic', '')
//设置下划线方式
sd_FormatText('underline', '')
//设置上标方式
sd_FormatText('superscript', '')
//设置下标方式
sd_FormatText('subscript', '')
//设置删除线方式
sd_FormatText('strikethrough', '')
//设置左对齐方式
sd_FormatText('justifyleft', '')
//设置居中对齐方式
sd_FormatText('justifycenter', '')
//设置右对齐方式
sd_FormatText('justifyright', '')
//设置标号方式,即使用1、2、3编号
sd_FormatText('insertorderedlist', '')
//设置项目编号方式,即使用·
sd_FormatText('insertunorderedlist', '')
//设置减少缩进方式
sd_FormatText('outdent', '')
//设置增加缩进方式
sd_FormatText('indent', '')设置了字体格式当然就有删除字体格式。其实删除格式也可以使用刚才我们定义的函数sd_FormatText,如下
QUOTE
//设置删除格式方式
sd_FormatText('removeFormat', '')其实刚才的sd_FormatText近乎万能,下面我们用他来完成另外几个操作。那就是全选,剪切,复制,粘贴,撤销,恢复,添加链接,删除链接,添加图片,添加水平线。
QUOTE
//全选
sd_FormatText('selectAll', '')
//剪切
sd_FormatText('cut', '')
//复制
sd_FormatText('copy', '')
//粘贴
sd_FormatText('paste', '')
//撤销
sd_FormatText('undo', '')
//恢复
sd_FormatText('redo', '')
//添加链接,添加到野花
sd_FormatText('CreateLink', 'http://bbs.gliet.edu.cn/bbs')
//删除链接
sd_FormatText('Unlink', '')
//添加图片,添加到野花的一个表情
sd_FormatText('InsertImage', 'http://bbs.gliet.edu.cn/bbs/html/emoticons/ohmy.gif')
//添加水平线
sd_FormatText('InsertHorizontalRule', '')另外我还可以使用其它方法来进行表格操作,在这样的编辑器里面表格也是可以使用和编辑的哦,由于和我们今天讲的正题无关而且代码较多,我就不罗嗦了。有没有觉得这样的编辑器是个小型了网页制作软件阿,同时通过CSS的控制你还可以将它变得更加漂亮比如
QUOTE
<TD class=鼠标未进过时的样式
onmouseover="this.className='鼠标进过时的样式';"
onclick="操作函数;this.className='鼠标按下时的样式';"
onmouseout="this.className='鼠标未进过时的样式';"><IMG height=16
src="按钮图片"></TD>最后还罗嗦一句就去睡觉了,使用这种方法最大的坏处是要注意代码的过滤,因为你使用了这种方法不能像往常一样使用server.HtmlEncode来屏蔽掉HTML的使用了,那么如何防止有人钻空子使用譬如向<input>、<iframe>一类的标签来危害你站点的安全就是最重要的了,具体方法我不多说了,当然可以讨论。
DOM 其他一些特性的更多相关文章
- 返本求源——DOM元素的特性与属性
抛砖引玉 很多前端类库(比如dojo与JQuery)在涉及dom操作时都会见到两个模块:attr.prop.某天代码复查时,见到一段为某节点设置文本的代码: attr.set(node, 'inner ...
- js便签笔记(2)——DOM元素的特性(Attribute)和属性(Property)
1.介绍: 上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单 ...
- 上层建筑——DOM元素的特性与属性(dojo/dom-prop)
上一篇讲解dojo/dom-attr的文章中我们知道在某些情况下,attr模块中会交给prop模块来处理.比如: textContent.innerHTML.className.htmlFor.val ...
- 上层建筑——DOM元素的特性与属性(dojo/dom-attr)
上一篇返本求源中,我们从DOM基础的角度出发,总结了特性与属性的关系.本文中,我们来看看dojo框架是如何处理特性与属性的.dojo框架中特性的处理位于dojo/dom-attr模块属性的处理为与do ...
- DOM元素的Attribute(特性)和Property(属性) 【转载】
1.介绍: 上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单 ...
- 获取或操作DOM元素特性的几种方式
1. 通过元素的属性 可以直接通过元素属性获取或操作特性,但是只有公认的特性(非自定义的特性),例如id.title.style.align.className等,注意,因为在ECMAScript中, ...
- DOM对象属性(property)与HTML标签特性(attribute)
HTML中property与attribute是极易混淆的两个概念.大多数时候这两个单词都翻译为"属性",为了区分二者,一般将property翻译为"属性",a ...
- ExtJs 获取Dom对象
对象指页面上的某一部分,如:Input等.我觉得在EXT JS中会有三类基本对象,htmlelement , EXT.Element和CompositeElement .分别解释一下: htmlele ...
- java解析xml文档(dom)
DOM解析XML文档 读取本地的xml文件,通过DOM进行解析,DOM解析的特点就是把整个xml文件装载入内存中,形成一颗DOM树形结构,树结构是方便遍历和和操纵. DOM解析的特性就是读取xml文件 ...
随机推荐
- oracle数据库使用plsql(64位)时出现的问题
64位win7上装PL/SQL,经常会遇见“Could not load "……\bin\oci.dll"”这个错误,我查了一下资料,原因是PL/SQL只对32位OS进行支持,解决 ...
- mybatis常用语句
<trim>标签中,prefix 前缀,suffix后缀, suffixOverrides语句最后如果有指定符号,则去除此符号, prefixOverrides语句最前面如果有指定符号,则 ...
- 3月25日html(六) Javascrip
第1部分 JavaScript简介 1.JavaScript它是个什么东西? 它是个脚本语言,需要有宿主文件,他的宿主文件是html文件. 2.它与J ...
- lpc1788控制步进电机28BYJ-48
下面直接上代码: #include "lpc177x_8x.h" #include "lpc177x_8x_clkpwr.h" #include "l ...
- [每日一题jQuery] jQuery选择器总结:进一步过滤、同级操作、后代操作
jQuery选择器继承自CSS的风格,可以通过jQuery选择器找出特定的DOM元素,在此基础上对该元素做相应处理.jQuery不仅支持简单的标签选择器.类选择器.id选择器,还针对表单状态.子元素. ...
- 设置ListView每条数据之间的间隔
1:如果不需要分割线可以在xml布局文件中ListView下设置XML属性: android:divider="#00000000" android:dividerHeight=& ...
- RSYSLOG没那么简单
定义系统默认的日志收集还算EASY. 但如何在公司项目里要配置程序员们写的自定义日志,那可能就要用到LOCAL及FILTER过滤这些东东了... 慢慢走吧.. 收集URL备用,都是讲LOCAL,TEM ...
- qt鼠标事件总结(坐标,跟踪,点击判断)
1.QMouseEvent中的坐标QMouseEvent中保存了两个坐标,一个是全局坐标,当然另外一个是局部坐标.全局坐标(globalPos())即是桌面屏幕坐标(screen coordinate ...
- 使用脚本管理IIS
参考资料https://technet.microsoft.com/zh-cn/library/cc779108(WS.10).aspxhttps://technet.microsoft.com/zh ...
- df 和du 命令统计磁盘空间不准确
Linux & Unix 中 df 和 du 命令统计磁盘空间数值不一致 经常会使用 df 和 du 分别查看磁盘空闲空间和占用空间,偶尔会发现 df(空闲空间) 会小于磁盘大小减去 du(占 ...