Dom(概念、特点、Dom树、Dom操作)
一、概念
DOM(Document Object Model,文档对象模型)是一种用于表示和操作HTML、XML等文档结构的编程接口。在Web开发中,DOM充当了连接网页内容和脚本的桥梁,通过DOM可以访问和操作网页中的元素、属性和样式,实现动态的页面交互效果。
注意:通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
二、Dom特点
- 树状结构:DOM以树状结构表示文档,每个节点代表文档中的一个元素、属性或文本。
- 节点:DOM中的每个元素、属性、文本都是一个节点,可以通过节点来访问和操作文档的内容。
- 属性:节点可以有各种属性,如元素的id、class、style等,可以通过属性来获取和修改元素的属性值。
- 方法:DOM提供了丰富的方法,用于操作文档结构、样式和内容,如查找元素、添加元素、修改样式等。
三、HTML DOM 树
1、当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树。
2、重要节点类型:
- 元素节点(Element Nodes):代表HTML文档中的元素,如
,
等。
- 文本节点(Text Nodes):代表元素中的文本内容,如段落中的文字。
- 属性节点(Attribute Nodes):代表元素的属性,如
id
,class
,src
等。 - 注释节点(Comment Nodes):代表HTML文档中的注释内容。
- 文档节点(Document Nodes):代表整个文档,是DOM树的根节点。
3、Dom树
4、通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
四、DOM操作——查找元素
通常,通过 JavaScript,您需要操作 HTML 元素。
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
1、 通过 id 找到 HTML 元素
2、通过标签名找到 HTML 元素
3、通过类名找到 HTML 元素
通过id
1、在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。
注意:document表示该文档,就是dom树
2、代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span id="span01">用良心做教育</span>
<br />
<span>做真实的自己</span>
<script type="text/javascript">
//通过id获取元素
var span01 = document.getElementById("span01");
//绑定单击事件
span01.onclick = function(){
//设置内容
span01.innerHTML = "做真实的自己";
}
</script>
</body>
</html>
3、代码效果(点击“用良心做教育”会变成“做真实的自己”)
通过标签名查找
1、代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>用良心做教育</span>
<br />
<span>做真实的自己</span>
<script type="text/javascript">
//通过标签获取元素数组
var span01 = document.getElementsByTagName("span")[0];
//绑定单击事件
span01.onclick = function(){
//设置内容
span01.innerHTML = "xxxx";
}
</script>
</body>
</html>
2、代码效果:(点击“用良心做教育”会变成“xxxx”)
通过类名找到 HTML 元素
1、代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span class="myclass">用良心做教育</span>
<br />
<span class="myclass">做真实的自己</span>
<script type="text/javascript">
//通过class属性获取元素数组
var span01 = document.getElementsByClassName("myclass")[0];
//绑定单击事件
span01.onclick = function(){
//设置内容
span01.innerHTML = "xxxx";
}
</script>
</body>
</html>
2、代码效果:(点击“用良心做教育”会变成“xxxx”)