Javascript简明教程五 DOM

什么是DOM

所谓DOM就是文档(Document)对象(Object)模型(Models)

在Web编程中,这里的文档一般指Html文档.

 

要了解DOM首先要了解Html

Html/Xhtml做为Xml的一支本身是一种树型结构

如

<html>
<head><title>标题</title></head>
<body>内容</body>
</html>

这个最简单的Html本身就是一个树形结构

html是根节点,它有head,body两个子枝,而head又有title这一子枝

获取节点内容

在DOM中我们获取Title采用如下方法

alert(document.title);

而采用以下方法获取Body的内容,因为Title里只可能是文字而不可能再有节点,所以直接document.title就能得到TItle

但Body不同,它可能还包含其它结点,所以要使用以下方法得到它的内容

alert(document.body.innerHTML);

 

如果我们的HTML是这样的

<html>
<head><title>标题</title></head>
<body>
<div id="con">这里有一段文字</div>
</body>
</html>

那我们怎么获取con的内容呢

我们可以使用getElementById来得到它

alert(document.getElementById("con").innerHTML);

除了getElementById之外,Document还提供了几种方法.例如:

<input name="i1" value="ccc" />
<script type="text/javascript">
    alert(document.getElementsByName("i1")[0].value);
</script>

 

这时所以用[0]是因为name 是可以重复的,但ID不会,所以尽可能还是用ID获取

此外,

alert(document.getElementsByTagName("div")[0].innerHTML);

 

也适用于第一个例子

设置节点内容

<html>
<head><title>标题</title></head>
<body>
<div id="con">这里有一段文字</div>
</body>
<script type="text/javascript">
    document.getElementById("con").innerHTML = "我X变了";
</script>
</html>
这段例子在加载后就用js将con的内容改变了当然innerHtml也可以等于HTML比如
document.getElementById("con").innerHTML = "<a href='http://www.baidu.com'>xxxxx</a>";
posted @ 2008-09-15 15:41  tiny羊  阅读(948)  评论(2)    收藏  举报