惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

D
Docker
IT之家
IT之家
Microsoft Security Blog
Microsoft Security Blog
博客园 - 司徒正美
云风的 BLOG
云风的 BLOG
P
Proofpoint News Feed
D
DataBreaches.Net
B
Blog RSS Feed
博客园_首页
The GitHub Blog
The GitHub Blog
I
InfoQ
L
LangChain Blog
G
Google Developers Blog
M
MIT News - Artificial intelligence
美团技术团队
腾讯CDC
V
Visual Studio Blog
aimingoo的专栏
aimingoo的专栏
博客园 - 聂微东
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Apple Machine Learning Research
Apple Machine Learning Research
A
About on SuperTechFans
博客园 - 三生石上(FineUI控件)
博客园 - 叶小钗

博客园 - tiny羊

自制一个可以为XNA所用的GIF 转 PNG 的小工具 展示PNG动画精灵 XNA 4.0中实现简单的快捷键模板 C#关键字 之 访问与上下文 C#关键字 之 转换 C#关键字 之 运算符 C#关键字 之 参数 - tiny羊 C#关键字 之 块 C#关键字 之 修饰符 Sql小题几道 泛型类及系统中常用的泛型类 泛型函数 Javascript简明教程6 定义时执行与单例模式 编程语言发展趋势图 Javascript简明教程系列 Javascript简明教程四 作用域 Javascript简明教程三 函数 Javascript简明教程二 变量 Javascript简明教程一 使用Javascript
Javascript简明教程五 DOM
tiny羊 · 2008-09-15 · via 博客园 - tiny羊

什么是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>";