js学习笔记——脚本化文档(Document对象)

脚本化文档:

客户端js把静态html转变为交互式的web应用程序,脚本化web页面的内容正是js存在的理由。

每个web浏览器窗口(帧)显示一个html文档,表示这个窗口的window对象有一个document属性,他引用了一个Document对象,

下面便学习Document对象的属性和方法:

1、动态文档内容:Document.write()

Document.write()允许把内容写入到文档中,有两种使用方式:

第一,在脚本中使用,把html输入到当前正在被解析的文档中,如:把当前日期添加到一个静态html文档

<script>
 var today =  new Date();
document.write("<p>Document accessed on:"+today.toString());
</script>

注意:如果<script>有一个defer属性,它就不能包含任何对document.write()的调用;

第二,使用write()(结合Document对象的open()和close())来在其他窗口中创建一个全新的文档,如创建一个弹出窗口:

function hello(){
        var w = window.open();
        var d = w.document;
        d.open();
        d.write("<p>hello world</p>");
        d.close();
}

2、Document属性

bgcolor——设置文档背景颜色,对应于标记<body>的bgcolor属性;

cookie——允许js程序读写http cookie;

domain

3、文档对象集合:

anchors[]——存放文档中命名的位置集,使用一个具有name属性的<a>标记来创建;

applets[]

forms[]——存放文档中<form>元素集,每个Form对象都有自己的一个名为elements[]集合属性,在表单提交之前,Form对象触发一个onsubmit事件句柄;

images[]——存放<img>元素集;

links[]——

(1)命名Document对象

使用数字来索引文档对象集合容易产生一个问题:基于位置的所以不稳定;更加健壮的做法是为重要的文档元素分配名字,并用名字来引用这些元素。

在DOM中,可以使用表单、表单元素、图像、applet和链接的name属性做到这一点:出现name属性时,它的值将被用作相应对象的名字,如:

<form name="myform"><input type="button" value="push me"></form>

 如果<form>是文档中的第一个元素,那么js代码就可以用下面三种表达式中的任何一种实现:

document.forms[0];
document.forms.myform;
document.forms["myform"];

 

 

posted @ 2013-03-26 14:39  夜香  阅读(402)  评论(0编辑  收藏  举报