js学习笔记——脚本化文档（Document对象）

最新推荐文章于 2024-06-05 22:49:53 发布

转载最新推荐文章于 2024-06-05 22:49:53 发布 · 79 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhangchunxi/archive/2013/03/26/2979525.html

本文介绍了JavaScript如何通过Document对象操作HTML文档，包括动态修改文档内容的方法Document.write()，以及通过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"];

转载于:https://www.cnblogs.com/zhangchunxi/archive/2013/03/26/2979525.html