HTML DOM（文档对象模型）详细讲解

#Code_kai

已于 2022-01-25 15:47:59 修改

阅读量2.2k

点赞数 4

分类专栏： Javascript 文章标签： html javascript 前端

于 2022-01-18 10:43:27 首次发布

本文链接：https://blog.csdn.net/qq_53016083/article/details/122554241

版权

Javascript 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了HTML DOM的概念及其在JavaScript中的应用，包括通过ID、标签名和类名查找HTML元素，改变HTML内容和CSS，以及事件处理。重点讲述了如何使用addEventListener方法添加和移除事件监听器，以及事件冒泡和捕获的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

1.HTML DOM (文档对象模型)

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。
通过 DOM，你可以访问所有的 HTML 元素，连同它们所包含的文本和属性。
HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。
HTML DOM 模型被构造为对象的树：

DOM HTML tree

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

2.HTML DOM 查找 HTML 元素

有三种方法来做这件事：

通过 id 找到 HTML 元素
通过 标签名 找到 HTML 元素
通过 **类名 **找到 HTML 元素

Ⅰ.通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id属性，返回一个标签的对象

通过 X(document).getElementById 方法

<p id="intro">你好世界!</p>

<script>
x=document.getElementById("intro");
document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
</script>

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果未找到该元素，则 x 将包含 null。

Ⅱ.通过标签名查找 HTML 元素

本例查找 id=“main” 的元素，然后查找 id=“main” 元素中的所有 p 元素：

通过 X(document或某个元素对象).getElementsByTagName 方法

<p>你好世界!</p>
<div id="main">
<p> a1 </p>
<p> a2 </p>
</div>

<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p"); //返回一个p标签的数组
document.write('id="main"元素中的第一个段落为：' + y[1].innerHTML);
</script>

Ⅲ.通过类名找到 HTML 元素

通过 X(document或某个元素对象).getElementsByClassName 方法

<p class="intro">你好世界!</p>
<p> a1 </p>
    
<script>
x=document.getElementsByClassName("intro");
document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
</script>

3.HTML DOM 改变 HTML 内容

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

Ⅰ.改变 HTML 输出流

JS中，document.write() 方法，可用于直接向 HTML 输出流写内容。

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。

Ⅱ.改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性

<html>
<body>

<p id="p1">Hello World!</p>
<h1 id="header">Old Header</h1>

<script>
//方式1
document.getElementById("p1").innerHTML="New text!";

//方式2
var element=document.getElementById("header");
element.innerHTML="New Header";

</script>

</body>
</html>

Ⅲ.改变 HTML 属性

如需改变 HTML 元素的属性，对元素对象的属性名直接赋予元素值，如：

document.getElementById(“a1”).id = b1;

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

4.HTML DOM 改变 CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

对元素对象的style属性的不同样式属性进行赋值，如：

document.getElementById(id).style.property=new style

<html> 
<body> 

	<p id="p2">Hello World!</p> 
	
	<script> 
		document.getElementById("p2").style.color="blue"; 
		//直接执行
	</script> 
	
	<h1 id="id1">My Heading 1</h1> 
	<button type="button"  onclick="document.getElementById('id1').style.color='red'"> 
	Click Me!
	</button> 

</body> 
</html>

5.HTML DOM 事件

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。比如当用户在 HTML 元素上点击时，我们可以在事件发生时执行 JavaScript

操作HTML元素的事件属性，来对事件做出反应

HTML事件属性都有：

onclick

当完成鼠标点击该HTML元素时，即按下和松开
onload

事件会在用户进入页面时被触发
onunload

事件会在用户离开页面时被触发
onchange

当用户改变输入字段的内容时被触发，如：
```
<input type="text" id="fname" onchange="upperCase()">
```
onmouseover

事件可用于在用户的鼠标移至 HTML 元素上方时触发函数
onmouseout

事件可用于在用户的鼠标移出HTML 元素时触发函数
onmousedown

当按下鼠标时，会触发
onmouseup

当松开鼠标时，会触发

Ⅰ.对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

例子：

<!DOCTYPE html> 
<html>

<head> 
<script> 
	function changetext(id) { 
		id.innerHTML="Ooops!"; 
	} 
</script> 
</head> 

<body> 
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1> 
<h1 onmouseup="changetext(this)">Click on this text!</h1> 
</body> 

</html>

Ⅱ.分配事件

如何对HTML元素分配事件，有两种方法：

通过 事件属性 来分配事件
通过 HTML DOM 来分配事件

HTML 事件属性

使用 HTML元素属性中的事件属性

例如：

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1> 
<button onclick="displayDate()">点我</button>

使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：

document.getElementById("myBtn").onclick=function(){displayDate()};

名为 displayDate 的函数被分配给 id=myBtn" 的 HTML 元素。

按钮点击时Javascript函数将会被执行。

6.HTML DOM EventListener事件侦听器

Ⅰ.addEventListener 方法

addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。

Ⅱ.addEventListener 使用方法

addEventListener(event, function, useCapture)

document.getElementById("p2").addEventListener(
    "click", 
    function(){ alert("Hello World!"); },
    false
);

第一个参数是事件的类型 (如 “click” 或 “mousedown”)，不要使用 “on” 前缀。例如，使用 “click” ,而不是使用 “onclick”。
第二个参数是事件触发后调用的函数
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的，默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

Ⅲ.向原元素添加事件句柄

<body>

<p id="p1">该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="Btn1">点我</button>

<script>
//可直接调用外部函数
document.getElementById("p1").addEventListener("click",myFunction);
//可调用匿名函数
document.getElementById("Btn1").addEventListener("click", function(){alert("Hello World!");});

function myFunction() { 
    alert ("Hello Ok!"); 
}
</script>

</body>

Ⅳ.向同一个元素中添加多个事件句柄

addEventListener() 方法允许向同个元素添加多个事件，且不会覆盖已存在的事件

<p id="p1">该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>

<script>
document.getElementById("p1").addEventListener("click",myFunction1);
document.getElementById("p1").addEventListener("click",myFunction2);

function myFunction1() { 
    alert ("click_1!"); 
}
function myFunction2() { 
    alert ("click_2"); 
}
</script>

Ⅴ.你可以向同个元素添加不同类型的事件：

<p id="p1">该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>

<script>
document.getElementById("p1").addEventListener("mouseout",myFunction1);
document.getElementById("p1").addEventListener("mouseover",myFunction2);
document.getElementById("p1").addEventListener("click",function(){alert("click_3!");});
function myFunction1() { 
    alert ("mouseout_1!"); 
}
function myFunction2() { 
    alert ("mouseover_2"); 
}
function myFunction3() {
    alert("click_3!");
}
</script>

Ⅵ.向 Window 对象添加事件句柄

HTML DOM文本对象模型中包含了很多的对象，如 HTML 元素, HTML 文档, window 对象

addEventListener() 方法允许对 HTML DOM 对象添加事件监听，所以也包括window 对象

window.addEventListener("resize", function(){ 
    //当用户重置窗口大小时，执行操作
});

Ⅶ.addEventListener()方法的第三个参数

addEventListener()方法的第三个参数，是来确定 事件传递方式的

事件传递，也为元素事件触发的顺序，如，将 p 元素插入到 div 元素中，用户点击 p 元素, 哪个元素的 “click” 事件先被触发呢？

事件传递有两种方式：冒泡与捕获。

第三个参数默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素。在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件。

<!DOCTYPE html>
<html>
    
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
div {
    background-color: red;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>

<body>
    <div id="div1">
		<p id="p1">点击段落，我是冒泡。</p>
	</div>
	<script>
	document.getElementById("p1").addEventListener(
        "click", 
        function() {alert("你点击了 P 元素!");}, 
        false);	
	document.getElementById("div1").addEventListener(
        "click", 
        function() {alert(" 你点击了 DIV 元素 !");}, 
        false);
	</script>
</body>

</html>

Ⅷ.removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

<body>
	<p id="p1"> 点击段落 </p>
 	<button onclick="removeHandler()" id="myBtn">点我</button>
	<script>
		document.getElementById("p1").addEventListener("click",  myFunction);
		function() myFunction{
			alert("你点击了 P 元素!");
		}
		function removeHandler() {
	    	document.getElementById("p1").removeEventListener("click", myFunction);
		}
	</script>
</body>