JavaScript中的文档对象模型（DOM）

最新推荐文章于 2026-01-08 20:54:44 发布

原创最新推荐文章于 2026-01-08 20:54:44 发布 · 275 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

本文详细介绍了Document Object Model (DOM)的概念、版本分类，包括CoreDOM、XMLDOM、HTMLDOM等，并阐述了DOM的主要功能，如元素操作、属性获取、事件绑定和CSS样式处理。通过实例演示了如何使用document对象进行节点操作。

一.DOM-Document Object Model，它是W3C国际组织的一套Web标准。它以树形结构表示文档（Html，XML等），定义了遍历，检查和修改各节点的属性和方法。

二.W3C组织将DOM分为以下几种不同的版本：

1.Core DOM：定义任意结构文档的标准对象集合

2.XML DOM：定义了针对XML文件的标准对象集合

3.HTML DOM：定义了针对HTML文件的标准对象集合

4.DOM CSS：定义了在程序中操作CSS样式的接口

5.DOM Events：给DOM对象添加事件处理

三.DOM可以干什么

1.获取一个元素

2.移除一个元素

3.创建一个元素

4.向页面里面添加一个元素

5.给元素绑定一些事件

6.获取元素的属性

7.给元素添加一些css样式

DOM的核心对象就是document对象

document对象是浏览器内置对象的一个对象，里面存储着专门用来操作元素的各种方法

四.获取节点信息

每个节点都拥有包含着关于节点某些信息的属性

	<script type="text/javascript">
			var str=new Array()
			str[0]="张三"
			str[1]="李四"
			str[2]="王麻子"
			str[3]="王子龙"
			str[4]="刘三"
			str.pop()//移除最后一个元素
			str.push("呼喊")//在最后添加一个元素
			str.unshift("惊叫")//在开始添加一个元素
			str.shift()//移除开始一个元素
			for(var l=0;l<str.length;l++){
				console.log(str[l])
			}
			var sit = new Array()
			sit[0]=["平顶山","安阳","南阳","郑州"]
			sit[1]=["鹤壁","三门峡","骊山","周口"]
			for(var i=0;i<sit.length;i++){
				for(var j=0;j<sit[i].length;j++){
					console.log(sit[i][j])
				}
			}
		</script>