整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript Document 对象

JavaScript Document 对象

ocument 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

Document 对象集合

all[] 提供对文档中所有 HTML 元素的访问。

anchors[] 返回对文档中所有 Anchor 对象的引用。 针对<a name=""></a>

applets 返回对文档中所有 Applet 对象的引用。采用java编程语言编写的程序

forms[] 返回对文档中所有 Form 对象引用。

images[] 返回对文档中所有 Image 对象引用。

links[] 返回对文档中所有 Area 和 Link 对象引用。

all[] 各浏览器对此兼容性很差, 建议不要使用

document.all[i]

document.all[name]

document.all.tags[tagname]

anchors 集合可返回对文档中所有 Anchor 对象的引用。

document.anchors[]
<html>
<body>
<a name="first">First anchor</a><br />
<a name="second">Second anchor</a><br />
<a name="third">Third anchor</a><br />
<br />
Number of anchors in this document:
<script type="text/javascript">
document.write(document.anchors.length)
</script>
</body>
</html>

forms 集合可返回对文档中所有 Form 对象的引用。

document.forms[]

<html>
<body>
<form name="Form1"></form>
<form name="Form2"></form>
<form name="Form3"></form>
<script type="text/javascript">
document.write("This document contains: ")
document.write(document.forms.length + " forms.")
</script>
</body>
</html>

images 集合可返回对文档中所有 Image 对象的引用。

document.images[]

<html>
<body>
<img border="0" src="hackanm.gif" width="48" height="48">
<br />
<img border="0" src="compman.gif" width="107" height="98">
<br /><br />
<script type="text/javascript">
document.write("This document contains: ")
document.write(document.images.length + " images.")
</script>
</body>
</html>

links 集合可返回对文档中所有 Area 和 Link 对象的引用。

document.links[]

<html>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap" />
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
<br />
Number of links in this document:
<script type="text/javascript">
document.write(document.links.length)
</script>
</body>
</html>

Document 对象属性

body 提供对 <body> 元素的直接访问。

对于定义了框架集的文档, 该属性引用最外层的 <frameset>。

cookie 设置或返回与当前文档有关的所有 cookie。

domain 返回当前文档的域名。

lastModified 返回文档被最后修改的日期和时间。

referrer 返回载入当前文档的文档的 URL。如果当前文档不是通过超级链接访问的, 则为 null。

title 返回当前文档的标题。

URL 返回当前文档的 URL (HTML title 元素中的文本)。

Document 对象方法

close() 关闭用 document.open() 方法打开的输出流,并显示选定的数据。

getElementById() 返回对拥有指定 id 的第一个对象的引用。

注意:有些浏览器直接使用ID就可以找到对象,建议使用getElementById()

getElementsByName() 返回带有指定名称的对象集合。

getElementsByTagName() 返回带有指定标签名的对象集合。


open() 打开一个流, 以收集来自任何 document.write() 或 document.writeln() 方法的输出。

document.open(mimetype,replace)

mimetype 可选。规定正在写的文档的类型。默认值是 "text/html"。

replace 可选。当此参数设置后, 可引起新文档从父文档继承历史条目。

注意: 与window.open(URL,name,features,replace)语法格式是不同的;

write() 向文档写 HTML 表达式 或 JavaScript 代码。(如果write()方法放到事件下使用,则会清空页面代码,然后在写)

writeln() 等同于 write() 方法, 不同的是在每个表达式之后写一个换行符。

<html>
<head>
<script type="text/javascript">
function createNewDoc()
{
var newDoc=document.open("text/html","replace");
var txt="<html><body>Learning about the DOM is FUN!</body></html>";
newDoc.write(txt);
newDoc.close();
}
</script>
</head>
<body>
<input type="button" value="Write to a new document" onclick="createNewDoc()">
</body>
</html>

writeln() 方法与 write() 方法作用相同,外加可在每个表达式后写一个换行符。

document.writeln(exp1,exp2,exp3,....)

在编写 <pre> 标记的内容时,该方法很有用。

Keygen 对象

Keygen 对象代表着HTML form表单的 keygen 字段。

该对象提供了一个安全的方式来验证用户。

当提交表单时,私钥存储在本地,公钥发送到服务器。

在 HTML 文档中的每个 <keygen> 标签都能创建一个 Keygen 对象。

你可以通过form 表单的elements[]数组来搜索 keygen 字段,或者使用 document.getElementById()。

Keygen 对象属性

=HTML5新增属性。

属性描述
autofocus设置或者返回页面加载时是否自动获得焦点。
challenge设置或者返回keygen字段的challenge属性值。
disabled设置或者返回是否用 keytag 字段。
form返回包含该 keygen 字段的表单。
keytype设置或者返回keygen字段的keytype属性值。
name设置或者返回keygen字段name属性的值。
type返回keygen字段是哪种表单元素类型。

标准属性和事件

keygen 对象同样支持标准 属性 和 事件。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

Input Text 对象

Input Text 对象代表 HTML 中 type="text" 的 <input> 元素。

访问 Input Text 对象

你可以通过 getElementById() 访问 type="text" 的 <input> 元素:

var x=document.getElementById("myText");尝试一下

提示: 同样,你可以通过查找表单 elements 集合来访问 Input Text 对象。

创建 Input Text 对象

你可以通过 document.createElement() 方法来创建 type="text" 的 <input> 元素:

var x=document.createElement("INPUT");

x.setAttribute("type", "text");

Input Text 对象属性

=HTML5 新增属性。

属性描述
autocomplete设置或返回文本域的 autocomplete 属性值
autofocus在页面加载后设置或返回文本域是否自动获取焦点
defaultValue设置或返回文本域的默认值
disabled设置或返回文本域是否禁用
form返回一个对包含文本域的表单对象的引用
list返回一个对包含文本域的选项列表对象的引用
maxLength设置或返回文本域中的最大字符数
name设置或返回文本域的名称
pattern设置或返回文本域的 pattern 属性值
placeholder设置或返回文本域的 placeholder 属性值
readOnly设置或返回文本域是否应是只读的
required设置或返回 whether the text field must be filled out before submitting a form
size设置或返回文本域的 size 属性值
type返回文本域的表单元素类型
value设置或返回文本域的 value 属性值

Input Text 对象方法

方法描述
blur()从文本域中移除焦点
focus()让文本域获取焦点
select()选取文本域的内容

标准属性和事件

Input Text 对象同样支持标准 属性 和 事件。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!