document 对象

Document 对象
Document 对象代表整个HTML 文档,可用来访问页面中的所有元素。
Document 对象是 Window 对象的一个部分,可通过 window.document 属性来访问。

Document 对象的集合:

(1)all[]:all 集合返回对文档中所有 HTML 元素的引用。

语法:

document.all[i]
document.all[name]
document.all.tags[tagname]

说明:
第一:all[] 是一个多功能的类似数组的对象,它提供了对文档中所有 HTML 元素的访问。
第二:all[] 已经被 Document 接口的标准的 getElementByid() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。

 

(2)anchors[]: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>

(3)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>

输出结果:This document contains: 3 forms.
(4)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  / >
< script type = " text/javascript " >
document.write(
" This document contains:  " )
document.write(document.images.length 
+   "  images. " )
< / script>
< / body>
< / html>

输出结果:This document contains: 2 images.
(5)links[]:返回对文档中所有 Area 和 Link 对象的引用。
语法:

document.links[]
 
更具体的实例:

images集合(页面中的图象)

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

b)通过nane属性直接引用
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

 

Document 对象的属性:

1)body:提供对 <body> 元素的直接访问。对于定义了框架集的文档,该属性引用最外层的 <frameset>。
(2)cookie :可设置或查询与当前文档相关的所有 cookie。
语法:

document.cookie

说明:该属性是一个可读可写的字符串,可使用该属性对当前文档的 cookie 进行读取、创建、修改和删除操作。
(3)domain:可返回下载当前文档的服务器域名。
语法:

document.domain

说明:该属性是一个只读的字符串,包含了载入当前文档的 web 服务器的主机名。
(4)lastModified:返回文档最后被修改的日期和时间。
语法:

document.lastModified

说明:该值来自于 Last-Modified HTTP 头部,它是由 Web 服务器发送的可选项。
(5)referrer:返回载入当前文档的文档的 URL。
语法:

document.referrer

说明:如果当前文档不是通过超级链接访问的,则为 null。这个属性允许客户端 JavaScript 访问 HTTP 引用头部。
(6)title:返回当前文档的标题。
语法:

document.title

(7)URL:返回当前文档的 URL。
语法:

document.URL

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

 

更具体的实例:

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

 

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

document.close()

说明:该方法将关闭 open() 方法打开的文档流,并强制地显示出所有缓存的输出内容。如果您使用 write() 方法动态地输出一个文档,必须记住当你这么做的时候要调用 close() 方法,以确保所有文档内容都能显示。一旦调用了 close(),就不应该再次调用 write(),因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文档。
(2)getElementById():返回对拥有指定 id 的第一个对象的引用。
说明:HTML DOM 定义了多种查找元素的方法,除了 getElementById() 之外,还有 getElementsByName() 和 getElementsByTagName()。不过,如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。
举例1:

<html>
<head>
<script type="text/javascript">
function  getValue()
  {
  
var x=document.getElementById("myHeader"
);
  alert(x.innerHTML);
  }
</script>

</head>
<body>
<h1 id="myHeader" onclick="getValue()">这是一个标题</h1>
<p>点击标题弹出消息框</p>
</body>
</html>

举例2:定义了一个工具函数,这样您就可以通过一个较短的名字来使用 getElementById() 方法了。

function id(x) 
{
        
if (typeof x == "string"return
 document.getElementById(x);
         
return
 x;
  }

上面这个函数接受元素 ID 作为它们的参数。对于每个这样的参数,您只要在使用前编写 x = id(x) 就可以了。
(3)getElementsByName():返回带有指定名称的对象集合。
语法:

document.getElementsByName(name)

说明:该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。另外因为一个文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

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

document.getElementsByTagName(tagname)

说明:getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。
注释:传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
比如:

var x=document.getElementsByTagName("input");

<input name="myInput" type="text" size="20" />

可以用 getElementsByTagName() 方法获取任何类型的 HTML 元素的列表:
比如:获取文档中所有的表

var tables = document.getElementsByTagName("table" );
alert (
"This document contains " + tables.length + " tables"
);

也可以使用 getElementsByTagName() 方法获取文档中的一个特定的元素。
比如:获得文档中的第四个段落。

var myParagragh = document.getElementsByTagName("p")[3 ];


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

document.open(mimetype,replace)

参数:mimetype:规定正在写的文档的类型。默认值是 "text/html"。replace:当此参数设置后,可引起新文档从父文档继承历史条目。
说明一:该方法将擦除当前 HTML 文档的内容,开始一个新的文档,新文档用 write() 方法或 writeln() 方法编写。
说明二:调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后,必须记住用 close 方法关闭文档,并迫使其内容显示出来。

(6)write():向文档写 HTML 表达式 或 JavaScript 代码。
语法:

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

我们通常按照两种的方式使用 write() 方法:
一是在使用该方在文档中输出 HTML,另一种是在调用该方法的的窗口之外的窗口、框架中产生新文档。在第二种情况中,请务必使用 close() 方法来关闭文档。

(7)writeln():与 write() 方法作用相同,外加可在每个表达式后写一个换行符。
注释:在编写 <pre> 标记的内容时,该方法很有用

 

更具体的实例:

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.οnclick=”func()” //鼠标指针单击对象是触发
document.body.οnmοuseοver=”func()” //鼠标指针移到对象时触发
document.body.οnmοuseοut=”func()” //鼠标指针移出对象时触发
———————————————————————
location-位置子对象

document.location.hash // #号后的部分
document.location.host // 域名+端口号
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



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值