cookie

允许javascript程序读写HTTP cookie 的特殊的属性

domain

允许当Web页面之间交互时,相同域名下相互信任的Web服务器之间协作放宽同源策略安全限制

(JavaScript跨域总结与解决办法)

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 其他一些特性的更多相关文章

  1. 返本求源——DOM元素的特性与属性

    抛砖引玉 很多前端类库(比如dojo与JQuery)在涉及dom操作时都会见到两个模块:attr.prop.某天代码复查时,见到一段为某节点设置文本的代码: attr.set(node, 'inner ...

  2. js便签笔记(2)——DOM元素的特性(Attribute)和属性(Property)

    1.介绍: 上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单 ...

  3. 上层建筑——DOM元素的特性与属性(dojo/dom-prop)

    上一篇讲解dojo/dom-attr的文章中我们知道在某些情况下,attr模块中会交给prop模块来处理.比如: textContent.innerHTML.className.htmlFor.val ...

  4. 上层建筑——DOM元素的特性与属性(dojo/dom-attr)

    上一篇返本求源中,我们从DOM基础的角度出发,总结了特性与属性的关系.本文中,我们来看看dojo框架是如何处理特性与属性的.dojo框架中特性的处理位于dojo/dom-attr模块属性的处理为与do ...

  5. DOM元素的Attribute(特性)和Property(属性) 【转载】

    1.介绍: 上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单 ...

  6. 获取或操作DOM元素特性的几种方式

    1. 通过元素的属性 可以直接通过元素属性获取或操作特性,但是只有公认的特性(非自定义的特性),例如id.title.style.align.className等,注意,因为在ECMAScript中, ...

  7. DOM对象属性(property)与HTML标签特性(attribute)

    HTML中property与attribute是极易混淆的两个概念.大多数时候这两个单词都翻译为"属性",为了区分二者,一般将property翻译为"属性",a ...

  8. ExtJs 获取Dom对象

    对象指页面上的某一部分,如:Input等.我觉得在EXT JS中会有三类基本对象,htmlelement , EXT.Element和CompositeElement .分别解释一下: htmlele ...

  9. java解析xml文档(dom)

    DOM解析XML文档 读取本地的xml文件,通过DOM进行解析,DOM解析的特点就是把整个xml文件装载入内存中,形成一颗DOM树形结构,树结构是方便遍历和和操纵. DOM解析的特性就是读取xml文件 ...

随机推荐

  1. Vim光标移动

    最近全面转换开发到Mac OS下,用MacVim作为IDE.记录一些Vim基本操作给自己备忘. 此次所说的都是在common-mode(c-mode,在Vim又名normal-mode,就是刚进入vi ...

  2. [Flask Security]当不能通过认证的时候制定跳转

    Flask Security这个插件能对用户权限进行很好的控制. 通过三个model实现: User,存放用户数据 Role,存放角色数据 User_Role.存放用户角色信息 user_datast ...

  3. SSH三者作用

    Struts在项目中的作用 Struts 在项目主要起控制作用,只要用于web层(即视图层和控制层)Struts本身是使用典型的MVC结构实现的,项目中使用了struts之后就等于项目也是一个MVC结 ...

  4. 转发细节——forward

    1)forward()方法之前的输出,如果是输出到缓冲区,再转发到其它Servlet,那么原缓冲区的数据忽略不计:2)forward()方法之前的输出,如果真正输出到浏览器,再转发到其它Servlet ...

  5. Wireshark "The NPF driver isn’t running…"(可见的驱动本质上是一个系统服务,使用net start 启动)

    前几天重装系统,装上了windows7 RC系统.昨天开始尝试装上了wireshark 这款很强大的网络监视软件,满心欢喜的打开,可是每次打开都会弹出“The NPF driver isn't run ...

  6. fstream读写UNICODE文件

    今天遇到要处理UNICODE文件的情况,网上找了一圈都是读取出字节,再转的,这个不方便啊!想起了有codecvt这么个东西,顺藤摸瓜,找到了方法. locale utf16(locale(" ...

  7. android面试题之六

    三十一.AIDL的全称是什么?如何工作?能处理哪些类型的数据? 英文全称:Android Interface Define Language(Android接口定义语言). 当A进程要去调用B进程中的 ...

  8. c语言指针点滴1

    #include <stdio.h> #include <stdlib.h> void main() { int *p = NULL;//指针开始最好都初始化为空 if(p = ...

  9. C/C++基础概念

    1.类占用的内存大小: 1)在不同位数的操作系统下,各种数据类型所占用的内存大小:32位和64位操作系统 http://blog.csdn.net/b_zhang/article/details/68 ...

  10. Android + eclipse +ADT安装完全教程

    最近几天没事做,网上看来看去突然就想弄个android来学学...  首先,是要下载android SDK,在http://developer.android.com/sdk/index.html这个 ...