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. [Mugeda HTML5技术教程之7]添加动画

    前一节我们讲述了怎么在新建的作品中添加元素,元素加好以后我们还想让他们动起来,来实现比较炫的效果.这节我们将要讲述怎么给元素添加动画.Mugeda动画是通过时间轴和帧来实现的.通过在时间轴上创建图层和 ...

  2. jquery下 选择器整理

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

  3. Blocks(POJ 3734 矩阵快速幂)

    Blocks Input The first line of the input contains an integer T(1≤T≤100), the number of test cases. E ...

  4. sql语句读取所有父子标签

    select A.HOSPITAL_ID from T_HOSPITAL A connect by prior A.HOSPITAL_ID=A.PARENT_ID start with A.HOSPI ...

  5. iOS设备后台播放音乐方法

    iOS设备后台播放音乐方法 1 在设置Capabliites中打开Background Modes,选择Audio And AirPlay 2 在控制viewDidLoad中添加下面代码 AVAudi ...

  6. 【Xamarin 在Mac OS 上的部署安装环境】

    ******************没用Mac 的机子,也只能靠虚拟机了**********1 安装VMware 10 从网上下载即可2 下载MAC OS 10.9.5的安装镜像,网上有很多,最好使用 ...

  7. AS3读取加密XML

    首先要确定xml使用了哪些加密方式,这样在As3中就反过来解密. 我加密xml的方式是先将xml文件打包为一个压缩文件,然后将压缩文件进行RC4加密,最后用base64将加密过的压缩包转为base64 ...

  8. JVM基础和调优(四)

    垃圾回收算法中的一些问题 再上一遍中,说道JVM并不是采用一种垃圾回收的方法,因为不同的内存块采取的方法是不样的,那么:为什么要分块?为什么不采用同一种方法回收垃圾,这样不是更加的统一吗? 分块的垃圾 ...

  9. WEB 移动网站 手机点击 打电话 发短信

    原文地址: http://www.blesswe.com/portal.php?mod=view&aid=428 我们在手机浏览网页是希望用户看到手机号码点击就可以直接打电话或发短信,下面我们 ...

  10. zoj3802:easy 2048 again(状压dp)

    zoj月赛的题目,非常不错的一个状压dp.. 题目大意是一个一维的2048游戏 只要有相邻的相同就会合并,合并之后会有奖励分数,总共n个,每个都可以取或者不取 问最终得到的最大值 数据范围n<= ...