那天为了留住DOM，说的话我自己都瞧不起自己（DOM初学详细博客）-CSDN博客

本文链接：https://blog.csdn.net/weixin_73972399/article/details/130330279

本文介绍了DOM的基本概念，包括DOM作为文档对象模型的作用，以及WebAPI中的DOMAPI。详细讲解了如何获取页面元素，如通过ID、标签名或HTML5新方法。还涵盖了事件处理，如事件定义、注册、常见事件类型以及事件流的概念。此外，还阐述了元素和节点的操作，如改变内容、样式、属性，以及创建、删除和移动节点。

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

2.1.3 根据HTML5新增获取页面元素

一、DOM简介

1.1 何为DOM

DOM，全称为文档对象模型（Document Object Model），是W3C（World Wide Web Consortium）制定的一种标准，它定义了一种与平台和语言无关的方式，用于表示和操作网页文档。DOM将文档视为一个节点树，树的每个节点都是一个对象，称为DOM节点。通过DOM，我们可以以树形结构的方式操作文档中的元素和属性，实现对文档内容、结构和样式的动态控制。

1.2 何为Web API

Web API是指一组可以在Web浏览器中使用的API（Application Programming Interface，应用程序编程接口），用于访问Web浏览器和操作系统中的功能。Web API包括DOM API、Canvas API、WebGL API、XMLHttpRequest API、WebSocket API等。其中，DOM API是Web开发中最常用的API之一。

1.3 为什么要学习DOM

学习DOM可以帮助我们更好地掌握Web开发技术，能够实现动态的Web应用程序。DOM可以实现以下功能：

- 操作和控制文档内容、结构和样式
- 响应用户的操作和事件
- 动态创建和删除页面元素
- 实现动画和效果
- 与服务器进行通信并更新页面内容

二、走进DOM

2.1 获取元素

获取元素是DOM操作的基础，可以通过以下方法获取页面中的元素：

2.1.1 根据ID获取页面元素

可以通过document.getElementById()方法根据元素的ID属性获取页面元素，例如：

var element = document.getElementById("myId");

2.1.2 根据标签名获取页面元素

可以通过document.getElementsByTagName()方法根据元素的标签名获取页面元素，例如：

var elements = document.getElementsByTagName("div");

上面的代码将返回所有的div元素。

2.1.3 根据HTML5新增获取页面元素

在HTML5中，新增了一些获取页面元素的方法，如document.querySelector()、document.querySelectorAll()等方法。可以根据CSS选择器来获取页面元素，例如：

var element = document.querySelector("#myId");
var elements = document.querySelectorAll("div");

上面的代码分别使用了querySelector()和querySelectorAll()方法，返回一个指定CSS选择器的元素。

2.1.4 获取特殊元素

还可以通过document.body、document.head和document.documentElement获取文档的body、head和html元素，例如：

var body = document.body;
var head = document.head;
var html = document.documentElement;

2.2 事件

2.2.1 什么是事件

事件是指用户在网页上的操作，如点击、滚动、键盘输入等。在DOM中，可以通过注册事件来响应用户的操作。

2.2.2 执行事件的步骤

执行事件的步骤分为三步：

1. 选择要操作的元素
2. 注册事件
3. 编写事件处理程序

例如，为按钮元素添加点击事件的代码如下：

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
  alert("按钮被点击了！");
});

上面的代码中，首先选择了一个ID为myBtn的按钮元素，然后注册了一个点击事件，最后编写了一个事件处理程序，当按钮被点击时，会弹出一个提示框。

2.2.3 常见事件

常见的事件包括：

- click：鼠标单击事件
- mouseover：鼠标移入事件
- mouseout：鼠标移出事件
- keydown：键盘按下事件
- keyup：键盘松开事件
- submit：表单提交事件
- load：文档加载完成事件等

2.2.4 注册事件

可以通过addEventListener()方法注册事件，例如：

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
  // 事件处理程序
});

上面的代码中，使用addEventListener()方法为按钮元素注册了一个click事件，当按钮被点击时，会执行事件处理程序。

2.2.5 删除（解绑）事件

可以通过removeEventListener()方法删除已注册的事件，例如：

var btn = document.getElementById("myBtn");

// 注册事件
function myClick() {
  alert("按钮被点击了！");
}
btn.addEventListener("click", myClick);

// 删除事件
btn.removeEventListener("click", myClick);

上面的代码中，首先注册了一个点击事件myClick，然后给按钮元素添加了该事件。最后，通过removeEventListener()方法删除了该事件。

2.2.6 事件流

事件流是指事件在页面元素中传播的顺序。在DOM中，事件流分为捕获阶段、目标阶段和冒泡阶段。可以通过addEventListener()方法的第三个参数来指定事件流的阶段，例如：

var btn = document.getElementById("myBtn");

// 注册事件，指定事件流为捕获阶段
btn.addEventListener("click", function() {
  alert("按钮被点击了！");
}, true);

上面的代码中，addEventListener()方法的第三个参数为true，表示事件流为捕获阶段。

2.2.7 事件对象

事件对象是指在事件被触发时，自动创建的一个对象，包含了与事件相关的信息和方法。可以通过事件对象来获取事件的类型、目标元素、鼠标位置、键盘按键等信息，例如：

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(event) {
  alert("事件类型：" + event.type);
  alert("目标元素：" + event.target.tagName);
});

上面的代码中，event参数即为事件对象，可以通过它来获取事件的类型和目标元素。

2.3 操作元素

2.3.1 改变元素内容

可以通过innerHTML属性来改变元素的内容，例如：

var p = document.getElementById("myPara");
p.innerHTML = "新的内容";

上面的代码中，将ID为myPara的段落元素的内容修改为“新的内容”。

2.3.2 修改元素属性

可以通过setAttribute()方法和getAttribute()方法来修改和获取元素的属性，例如：

var img = document.getElementById("myImg");
img.setAttribute("src", "newImg.jpg");
var src = img.getAttribute("src");

上面的代码中，将ID为myImg的图片元素的src属性修改为“newImg.jpg”，并通过getAttribute()方法获取了该属性的值。

2.3.3 表单元素属性的操作

可以通过value属性来获取和修改表单元素的值，例如：

var input = document.getElementById("myInput");
var value = input.value;
input.value = "新的值";

上面的代码中，获取了ID为myInput的输入框的值，并将其修改为“新的值”。

2.3.4 样式属性操作

可以通过style属性来修改元素的样式属性，例如：

var p = document.getElementById("myPara");
p.style.color = "red";

上面的代码中，将ID为myPara的段落元素的文字颜色修改为红色。

2.3.5 自定义属性操作

可以通过setAttribute()方法和getAttribute()方法来添加和获取自定义属性，例如：

var p = document.getElementById("myPara");
p.setAttribute("data-myAttr", "myValue");
var value = p.getAttribute("data-myAttr");

上面的代码中，添加了一个名为data-myAttr的自定义属性，并将其值设为“myValue”，并通过getAttribute()方法获取了该属性的值。

2.4 节点操作

2.4.1 节点概述

节点是指DOM树中的每个元素、属性、文本节点、注释节点等。在DOM中，每个节点都是一个对象，都有一些方法和属性，可以通过它们来操作和控制节点。

2.4.2 父子节点

每个节点都有一个父节点和一个或多个子节点。可以通过parentNode属性和childNodes属性来获取节点的父节点和子节点，例如：

var p = document.getElementById("myPara");
var parent = p.parentNode;
var children = p.childNodes;

上面的代码中，获取了ID为myPara的段落元素的父节点和子节点。

2.4.3 兄弟节点

每个节点还有一个或多个兄弟节点，可以通过previousSibling属性和nextSibling属性来获取节点的前一个兄弟节点和后一个兄弟节点，例如：

var p = document.getElementById("myPara");
var prev = p.previousSibling;
var next = p.nextSibling;

上面的代码中，获取了ID为myPara的段落元素的前一个兄弟节点和后一个兄弟节点。

2.4.4 创建和添加节点

可以通过createElement()方法创建新的元素节点，通过createTextNode()方法创建新的文本节点，然后通过appendChild()方法将它们添加到文档中，例如：

var div = document.createElement("div");
var text = document.createTextNode("新的内容");
div.appendChild(text);
document.body.appendChild(div);

上面的代码中，创建了一个新的div元素和一个新的文本节点，将文本节点添加到div元素中，然后将div元素添加到文档的body元素中。

2.4.5 删除节点

可以通过removeChild()方法删除节点，例如：

var p = document.getElementById("myPara");
var parent = p.parentNode;
parent.removeChild(p);

上面的代码中，首先获取了ID为myPara的段落元素的父节点，然后通过removeChild()方法将其删除。

2.4.6 复制节点

可以通过cloneNode()方法复制节点，例如：

var p = document.getElementById("myPara");
var clone = p.cloneNode(true);
document.body.appendChild(clone);

上面的代码中，首先获取了ID为myPara的段落元素，然后通过cloneNode()方法复制了该元素，并将其添加到文档的body元素中。

2.4.7 动态创建元素

可以通过innerHTML属性和字符串拼接的方式动态创建元素，例如：

var html = '<div><p>新的内容</p></div>';
document.body.innerHTML += html;

上面的代码中，通过字符串拼接的方式创建了一个新的div元素，其中包含了一个新的段落元素，然后将其添加到文档的body元素中。

总结

DOM是Web开发中非常重要的一个技术，它可以帮助我们操作和控制文档内容、结构和样式，实现动态的Web应用程序。本文介绍了DOM的基本概念和常见用法，包括获取元素、事件、操作元素、节点操作等内容。