龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

javascript 文挡对象 文挡对象用法总结

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
本文章总结了关于javascript 文挡对象 文挡对象用法,有需要学习的朋友可参考一下。 Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象,使我们可以从脚本中对 HTML 页面中的
本文章总结了关于javascript 文挡对象 文挡对象用法,有需要学习的朋友可参考一下。

Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象,使我们可以从脚本中对 HTML 页面中的所有元素进行访问,它是 Window 对象的一部分,可通过 window.document 属性对其进行访问

Document 对象集合
forms返回对文档中所有 Form 对象的引用
    语法:document.forms[];

cookie设置或查询与当前文档相关的所有 cookie,该属性是一个可读可写的字符串,可使用该属性对当前文档的cookie 进行读取、创建、修改和删除操作
    语法:document.cookie;
    点击查看用法

domain返回下载当前文档的服务器域名
    语法:document.domain;
    实例:alert(document.domain); //弹出 192.168.1.101

title返回当前文档的标题( HTML title 元素中的文本)
    语法:document.title;

URL返回当前文档的 URL,一般情况下,该属性的值与包含文档的 Window 的 location.href 属性相同,不过,在 URL 重定向发生的时候,这个 URL 属性保存了文档的实际 URL,而 location.href 保存了请求的 URL
    语法:document.URL;


对象属性


document.title //设置文档标题等价于HTML的title标签
document.bgColor //设置页面背景色
document.fgColor //设置前景色(文本颜色)
document.linkColor //未点击过的链接颜色
document.alinkColor //激活链接(焦点在此链接上)的颜色
document.vlinkColor //已点击过的链接颜色
document.URL //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate //文件建立日期,只读属性
document.fileModifiedDate //文件修改日期,只读属性
document.charset //设置字符集 简体中文:gb2312
document.fileSize //文件大小,只读属性
document.cookie //设置和读出cookie


———————————————————————


Document 对象方法
close()关闭一个由 document.open 方法打开的输出流,并强制地显示出所有缓存的输出内容,如果您使用 write() 方法动态地输出一个文档,必须记住当你这么做的时候要调用 close() 方法,以确保所有文档内容都能显示,一旦调用了 close(),就不应该再次调用 write(),因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文档
    语法:document.close();
   
getElementById()返回对拥有指定 ID 的第一个对象的引用
    语法:document.getElementById(id);
   
getElementsByName()返回带有指定名称的对象的集合,该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性,另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素
    语法:document.getElementsByName(name);
   
getElementsByTagName()返回带有指定标签名的对象的集合,返回元素的顺序是它们在文档中的顺序,如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序
    语法:document.getElementsByTagName(tagname);
   
open()打开一个新文档,擦除当前 HTML 文档的内容,新文档用 write() 方法或 writeln() 方法编写,调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后,必须记住用 close 方法关闭文档,并迫使其内容显示出来
    语法:document.open(mimetype,replace); //mimetype 可选,规定正在写的文档的类型,默认值是 "text/html",replace 可选,当此参数设置后,可引起新文档从父文档继承历史条目(有点儿不明白,你明白吗?)
   
write()向文档写入 HTML 表达式或 JavaScript 代码,参数(exp1,exp2,exp3,...) ,它们将按顺序被追加到文档中,我们通常按照两种的方式使用 write() 方法:一是在使用该方在文档中输出 HTML,另一种是在调用该方法的的窗口之外的窗口、框架中产生新文档,在第二种情况中,请务必使用 close() 方法来关闭文档
    语法:document.write(exp1,exp2,exp3,....);
   
writeln()方法与 write() 方法作用相同,外加可在每个表达式后写一个换行符,在编写 <pre> 标记的内容时,该方法很有用
    语法:document.writeln(exp1,exp2,exp3,....);


常用对象方法


document.write() //动态向页面写入内容
document.createElement(Tag) //创建一个html标签对象
document.getElementById(ID) //获得指定ID值的对象
document.getElementsByName(Name) //获得指定Name值的对象
document.body.appendChild(oTag)
———————————————————————


body-主体子对象


document.body //指定文档主体的开始和结束等价于body>/body>
document.body.bgColor //设置或获取对象后面的背景颜色
document.body.link //未点击过的链接颜色
document.body.alink //激活链接(焦点在此链接上)的颜色
document.body.vlink //已点击过的链接颜色
document.body.text //文本色
document.body.innerText //设置body>…/body>之间的文本
document.body.innerHTML //设置body>…/body>之间的HTML代码
document.body.topMargin //页面上边距
document.body.leftMargin //页面左边距
document.body.rightMargin //页面右边距
document.body.bottomMargin //页面下边距
document.body.background //背景图片
document.body.appendChild(oTag) //动态生成一个HTML对象


常用对象事件


document.body.onclick=”func()” //鼠标指针单击对象是触发
document.body.onmouseover=”func()” //鼠标指针移到对象时触发
document.body.onmouseout=”func()” //鼠标指针移出对象时触发
———————————————————————
location-位置子对象


document.location.hash // #号后的部分
document.location.host // 域名+端口号//好像返回的是主机名localhost,没有返回端口号
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目录部分
document.location.port // 端口号
document.location.protocol // 网络协议(http:)
document.location.search // ?号后的部分
documeny.location.reload() //刷新网页
document.location.reload(URL) //打开新的网页
document.location.assign(URL) //打开新的网页
document.location.replace(URL) //打开新的网页

———————————————————————

selection-选区子对象
document.selection


例如:


<div>请选中这里的部分文字。</div>
<div><input type="button" value="请选中部分文字,然后点击这里执行 empty" onclick="javascript:Foo();" /></div>
<script type="text/javascript" language="javascript">
<!–
function Foo()
{
    document.selection.empty();
}
–>
</script>


selection的createRange方法

document.selection.createRange() 根据当前文字选择返回 TextRange 对象,或根据控件选择返回 ControlRange 对象。

配合 execCommand,在 HTML 编辑器中很有用,比如:文字加粗、斜体、复制、粘贴、创建超链接等。

这些好像都是只有在IE下才能实现。。


———————————————————————


images集合(页面中的图象)


a)通过集合引用
document.images //对应页面上的img标签
document.images.length //对应页面上img标签的个数
document.images[0] //第1个img标签
document.images[i] //第i-1个img标签


b)通过name属性直接引用
img name=”oImage”
document.images.oImage //document.images.name属性


c)引用图片的src属性
document.images.oImage.src //document.images.name属性.src


d)创建一个图象
var oImage
oImage = new Image()
document.images.oImage.src=”1.jpg”
同时在页面上建立一个img /标签与之对应就可以显示


———————————————————————-


forms集合(页面中的表单)


a)通过集合引用
document.forms //对应页面上的form标签
document.forms.length //对应页面上/formform标签的个数
document.forms[0] //第1个/formform标签
document.forms[i] //第i-1个/formform标签
document.forms[i].length //第i-1个/formform中的控件数
document.forms[i].elements[j] //第i-1个/formform中第j-1个控件


b)通过标签name属性直接引用
/formform name=”Myform”>input name=”myctrl”/>/form
document.Myform.myctrl //document.表单名.控件名


c)访问表单的属性
document.forms[i].name //对应form name>属性
document.forms[i].action //对应/formform action>属性
document.forms[i].encoding //对应/formform enctype>属性
document.forms[i].target //对应/formform target>属性


document.forms[i].appendChild(oTag) //动态插入一个控件
document.all.oDiv //引用图层oDiv
document.all.oDiv.style.display=”" //图层设置为可视
document.all.oDiv.style.display=”none” //图层设置为隐藏
document.getElementId(”oDiv”) //通过getElementId引用对象
document.getElementId(”oDiv”).style=”"
document.getElementId(”oDiv”).display=”none”
/*document.all表示document中所有对象的集合
只有ie支持此属性,因此也用来判断浏览器的种类*/


图层对象的4个属性
document.getElementById(”ID”).innerText //动态输出文本
document.getElementById(”ID”).innerHTML //动态输出HTML
document.getElementById(”ID”).outerText //同innerText
document.getElementById(”ID”).outerHTML //同innerHTML


精彩图集

赞助商链接