Javascript 基础教程之认识DOM

什么是DOM ?

文档对象模型DOM  英文缩写:Document Object Model,定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)

这个说法很官方,大家肯定还是不明白。

举个例子:我们有一段HTML,那么如何访问第二层第一个节点呢,如何把最后一个节点移动到第一个节点上面去呢?

DOM就是定义了如果做类似操作,那么应该怎么做的标准。比如用getElementById来访问节点,用insertBefore来插入节点。

当浏览器载入HTML时,会生成相应的DOM树。

简而言之,DOM可以理解为一个访问或操作HTML各种标签的实现标准。

对于一个HTML来说,文档节点Document(看不到的)是它的根节点,对应的对象便是document对象(严格讲是子类HTMLDocument对象,下面单独介绍Document类型时会指出)。

换句话说存在一个文档节点Document,然后它有子节点,比如通过document.getElementsByTagName(“html”),得到类型为元素节点的Element html。

每一段HTML标记都可以用相应的节点表示,例如:

HTML元素通过元素节点表示,注释通过注释节点表示,文档类型通过文档类型节点表示等。

一共定义了12种节点类型,而这些类型又都继承自Node类型。

所以我们首先讲Node类型,因为这个类型的方法是所有节点都会继承的。
 

如下代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>DOM</title>
</head>
<body>
	<h2><a href="www.php.cn">Javascript DOM</a></h2>
	<p>对html元素进行操作,可添加,改变或移除css样式等</p>
	<ul>
		<li>Javascript</li>
		<li>DOM</li>
		<li>css</li>
	</ul>
</body>
</html>

将HTML代码分解为DOM节点层次图:

DOM.png

HTML文档可以说由节点构成的集合,DOM节点有:

1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.php.cn"。

例如上面代码中的a标签


a 标签-------元素节点

href="www.php.cn"--------属性节点

javascript  DOM ---------- 文本节点

继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM</title> </head> <body> <h2><a href="www.php.cn">Javascript DOM</h2> <p>对html元素进行操作,可添加,改变或移除css样式等</p> <ul> <li>Javascript</li> <li>DOM</li> <li>css</li> </ul> </body> </html>
提交重置代码
高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

据说名字长的人会有很多女朋友

节点在实际开发中经常用到

7年前    添加回复 0

小水滴

这些节点什么的是不是属于JS的高深知识了

7年前    添加回复 0

学习ing

举个例子:我们有一段HTML,那么如何访问第二层第一个节点呢,如何把最后一个节点移动到第一个节点上面去呢?---讲解的很通俗

7年前    添加回复 0

大神,求带!

javascript DOM ---------- 文本节点

7年前    添加回复 0

橱窗的光

文字好多,还得慢慢看

7年前    添加回复 0

js可以对html里面的任何属性都修改么?

[最新 迷茫 的回答] 是的,只要能获取到,就可以修改对应的属性。

时间:7年前

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~