Javascript 在浏览器环境中 (五) HTML DOM

博客分类： Javascript

浏览器HTMLJavaScriptGoogleXML

已经知道了 DOM 适用于 XML和HTML文档。前几部分已经介绍XML文档的节点的添加，修改，删除。

这部分我们关注的是HTML的DOM。像document.body就是个HTML的DOM对象。这个就返回了body元素。我们也可以用以前的方法获取body元素。

Js代码

document.getElementsByTagName('body')[0]

访问HTML DOM的方法

不像是DOM，以下的方法只能访问HTML DOM。下面就列出一些常用的HTML DOM集合

document.images-这是页面所有图片元素的集合。和document.getElementByTagName("img")一样。

document.applets

document.links

document.anchors

document.forms

document.links包含了所有<a href="..."></a>的标签。document.anchors包含了所有<a name="..."></a>

document.forms是比较常用的。它包含了form的集合。我们可以通过它来访问页面的form

Js代码

document.forms[0];//和document.getElementsByTagName('forms')[0]相同

这个form集合包含了input和buttons.我们可以通过elements属性来访问它们。下面的语句就是访问这个form的第一个input.

Js代码

document.forms[0].elements[0]

返回的input如下

Html代码

<input name="search" id="search" type="text" size="50" maxlength="255" value="Enter email..." />

我们可以改变它的value值

Js代码

document.forms[0].elements[0].value = '[e-mail]'

这个Input有个name属性。也可以用name进行访问

Js代码

document.forms[0].elements['search'];

document.forms[0].elements.search;    //相同

document.write()

document.write可以用来插入html代码。

Js代码

<p>It is now <script>document.write("<em>" + new Date() + "</em>");</script></p>

结果如下

Html代码

<p>It is now <em>Sat Feb 23 2008 17:48:04 GMT-0800 (Pacific Standard Time)</em></p>

Cookies, Title, Referrer, Domain

下面介绍四个额外的属性，不像前一部分介绍的HTML DOM方法，这四个属性在CORE DOM中没有属性能够取代。

document.cookie

是一个包含字符串的属性。cookie在服务器和客户端之间互相交换。当一个服务器把一个页面发给浏览器的时候，会包含一个Set-Cookie的HTTP头。当一个客户端发给服务端发送一个请求的时候，又把cookie信息返回给cookie的头。用document.cookie，可以修改浏览器发向服务端的cookie。看看javaeye的cookie

"__utma=207427464.1579840076272537600.1220428194.1234405694.1234408533.173; __utmz=207427464.1234320126.168.86.utmcsr=google|utmccn=。。。"

document.title 可以修改网页显示的标题。

Js代码

document.title = 'My title'

要注意是的document.title和 document.getElementsByTagName('title')[0]并不一样，所以document.title只能修改浏览器显示的title，而不能改变title标签。

document.referrer

这个属性告诉了访问此网页之前的网页的URL。

Js代码

document.referrer;//http://xiayuanfeng.iteye.com/admin/blogs/drafts

document.domain

可以放问此页面的domain.

Js代码

document.domain;//iteye.com