JavaScript 文档对象模型（Document Object Model，简称 DOM）是一个编程接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM 将整个文档（如 HTML 文档）表示为一个由节点（Node）和对象（如元素对象、属性对象、文本对象等）组成的树状结构。

以下是关于 DOM 的一些基本概念和用法：

1. 节点（Node）：
   • DOM 中的一切都被视为节点。例如，元素、属性、文本都是节点。
   • 节点之间存在父子、兄弟等关系。
2. 元素节点（Element Node）：
   • HTML 元素（如 <p>、<div>、<a> 等）在 DOM 中表示为元素节点。
   • 可以通过 document.getElementById()、document.querySelector() 等方法获取元素节点。
3. 属性节点（Attribute Node）：
   • 元素的属性（如 <a href="..."> 中的 href）在 DOM 中表示为属性节点。
   • 可以通过 element.getAttribute() 和 element.setAttribute() 方法获取和设置属性。
4. 文本节点（Text Node）：
   • 元素内部的文本（如 <p>Hello, world!</p> 中的 "Hello, world!"）在 DOM 中表示为文本节点。
   • 可以通过 element.textContent 或 element.innerText 获取和设置文本内容。
5. 操作 DOM：
   • 可以通过 JavaScript 创建、修改、删除 DOM 节点。
   • 例如，使用 document.createElement() 创建新元素，使用 parentNode.appendChild() 将新元素添加到文档中，使用 parentNode.removeChild() 删除元素等。
6. 事件处理：
   • DOM 提供了事件模型，允许为文档中的元素注册事件处理程序（如点击事件、鼠标移动事件等）。
   • 当触发相应事件时，事件处理程序会被执行。
7. 遍历 DOM：
   • 可以使用各种属性和方法遍历 DOM 树，如 parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling 等。
8. 修改样式：
   • 可以通过 JavaScript 修改元素的样式。这可以通过直接修改元素的 style 属性或使用 window.getComputedStyle() 方法来实现。

了解 DOM 是前端开发的基础，它使开发人员能够使用 JavaScript 动态地操作网页内容、结构和样式。

在JavaScript中，有多种方法可以查找HTML元素。以下是一些常用的方法：

1. 通过ID查找:
   如果你知道元素的ID，可以使用document.getElementById()方法。例如：

   var element = document.getElementById('myElementId');

   2.通过类名查找:
   如果你想查找具有特定类名的所有元素，可以使用document.getElementsByClassName()方法。注意这个方法返回的是一个类数组对象（HTMLCollection），而不是单个元素。例如：

   var elements = document.getElementsByClassName('myClassName');  
   // 使用elements[0]访问第一个元素

   通过标签名查找:
   如果你只想通过HTML标签名查找元素，可以使用document.getElementsByTagName()方法。同样，这个方法也返回的是一个类数组对象。例如：

   var elements = document.getElementsByTagName('p');  
   // 使用elements[0]访问第一个<p>元素

   通过选择器查找（querySelector 或 querySelectorAll）:
   document.querySelector()方法返回文档中匹配指定CSS选择器的第一个Element元素。而document.querySelectorAll()方法返回文档中匹配指定CSS选择器的所有Element元素的NodeList（静态的）。例如：

   // 查找第一个匹配的元素  
   var element = document.querySelector('.myClassName');  
   
   // 查找所有匹配的元素  
   var elements = document.querySelectorAll('.myClassName');  
   // 使用elements[0]访问第一个匹配的元素

   通过父元素查找子元素:
   如果你有一个元素的引用，并想查找它的子元素，可以使用parentNode.children（所有子元素）或parentNode.firstElementChild、parentNode.lastElementChild、parentNode.previousElementSibling、parentNode.nextElementSibling等属性。例如：

   var parent = document.getElementById('parentId');  
   var firstChild = parent.firstElementChild;  
   var lastChild = parent.lastElementChild;

   通过表单元素查找:
   对于表单元素，如<input>、<textarea>、<select>等，可以使用document.forms['formName'].elements['elementName']或document.forms.formName.elementName进行查找。例如：

   var inputElement = document.forms['myForm'].elements['myInputElement'];  
   // 或者  
   var inputElement = document.forms.myForm.myInputElement;

   使用jQuery（如果项目中包含jQuery库）:
   如果你在使用jQuery库，那么可以使用更加简洁和强大的选择器语法来查找元素。例如：

   var element = $('#myElementId'); // 通过ID查找  
   var elements = $('.myClassName'); // 通过类名查找

   选择哪种方法取决于你的具体需求和你对HTML文档结构的了解程度。如果你知道确切的ID或类名，那么getElementById或querySelector可能是最直接的方法。如果你需要查找多个元素或基于更复杂的条件查找元素，那么getElementsByClassName、getElementsByTagName或querySelectorAll可能更合适。

DOM HTML

当涉及到DOM（Document Object Model）和HTML时，我们实际上是在讨论如何使用JavaScript来操作HTML文档的结构、内容和样式。DOM是HTML和XML文档的编程接口，它定义了一种方式来表示和修改文档的结构和内容。

以下是一些使用DOM来操作HTML的常见示例：

1. 获取HTML元素

• 使用 document.getElementById(id)
• 使用 document.querySelector(selector) 或 document.querySelectorAll(selector)
• 使用 document.getElementsByClassName(className)
• 使用 document.getElementsByTagName(tagName)

2. 修改HTML元素内容

• 修改元素的 innerHTML 属性
• 修改元素的 textContent 属性（不包含HTML标签）

var element = document.getElementById('myElement');  
element.innerHTML = '<h1>新的标题</h1>';  
element.textContent = '新的文本内容';

 

3. 修改HTML元素属性

• 使用 element.setAttribute(name, value)
• 使用 element.getAttribute(name)
• 使用 element.removeAttribute(name)

javascript复制代码

	var link = document.getElementById('myLink');
	link.setAttribute('href', 'https://example.com');
	console.log(link.getAttribute('href')); // 输出: https://example.com
	link.removeAttribute('href');

4. 创建新的HTML元素

• 使用 document.createElement(tagName)
• 使用 parentNode.appendChild(childNode) 或 parentNode.insertBefore(newNode, referenceNode)

javascript复制代码

	var newElement = document.createElement('div');
	newElement.textContent = '我是新创建的元素';
	document.body.appendChild(newElement);

5. 删除HTML元素

• 使用 parentNode.removeChild(childNode)

javascript复制代码

	var element = document.getElementById('myElement');
	element.parentNode.removeChild(element);

6. 监听HTML元素事件

• 使用 element.addEventListener(eventType, callbackFunction)

javascript复制代码

	var button = document.getElementById('myButton');
	button.addEventListener('click', function() {
	alert('按钮被点击了！');
	});

7. 修改CSS样式

• 直接修改元素的 style 属性
• 使用 window.getComputedStyle(element, null).getPropertyValue(propertyName) 来读取计算后的样式值

javascript复制代码

	var element = document.getElementById('myElement');
	element.style.color = 'red';
	element.style.backgroundColor = 'lightgray';
	// 读取计算后的样式值
	var computedStyle = window.getComputedStyle(element, null).getPropertyValue('color');
	console.log(computedStyle); // 输出计算后的颜色值，可能是rgb(255, 0, 0)或其他格式

这些只是DOM操作HTML的一些基本示例。DOM API非常强大，允许你以编程方式几乎完全控制HTML文档。

DOM CSS

当涉及到DOM（Document Object Model）和CSS（Cascading Style Sheets）时，我们主要关注的是如何使用JavaScript通过DOM API来操作HTML元素的样式。CSS定义了如何在网页上呈现HTML元素，而DOM则提供了与这些元素交互的接口。

以下是一些使用DOM来操作CSS样式的常见方法：

1. 直接设置元素的内联样式

通过直接设置HTML元素的style属性，可以更改其内联样式。例如：

javascript复制代码

	var element = document.getElementById('myElement');
	element.style.color = 'red'; // 设置文本颜色为红色
	element.style.fontSize = '20px'; // 设置字体大小为20像素

2. 使用CSS类来更改样式

通过更改元素的className属性，可以动态地添加、删除或更改元素的CSS类，从而应用或移除相应的样式。例如：

javascript复制代码

	var element = document.getElementById('myElement');
	element.className = 'new-class'; // 将元素的类设置为new-class
	// 或者，如果你希望添加类而不是替换它
	element.classList.add('new-class');
	// 移除类
	element.classList.remove('old-class');
	// 切换类（如果存在则移除，否则添加）
	element.classList.toggle('toggle-class');

3. 获取元素的计算样式

使用window.getComputedStyle()方法，可以获取元素的最终计算样式（即应用了所有CSS规则后的样式）。例如：

javascript复制代码

	var element = document.getElementById('myElement');
	var computedStyle = window.getComputedStyle(element, null);
	var color = computedStyle.getPropertyValue('color'); // 获取元素的文本颜色
	console.log(color); // 输出类似rgb(255, 0, 0)的值

4. 访问和修改CSS规则

虽然直接通过DOM API访问和修改CSS规则（如样式表中的规则）并不总是推荐的做法（因为它可能破坏封装和可维护性），但在某些情况下可能是必要的。这通常涉及到访问document.styleSheets集合，并遍历其中的规则。但是，请注意，这种方法在不同的浏览器之间可能存在差异，并且可能受到同源策略的限制。

5. 使用CSSOM API

CSS Object Model (CSSOM) 是DOM的一个扩展，它提供了对CSS样式信息的编程访问。虽然CSSOM API不如DOM API那样常用，但它提供了一些高级功能，如查询和修改CSS变量（也称为自定义属性）。

6. 监听样式更改

虽然DOM API本身不提供直接的样式更改事件监听器，但你可以通过其他方法（如MutationObserver API）来监听可能导致样式更改的DOM更改，或者定期轮询元素的样式属性来检测更改。

7. 使用现代前端框架和库

许多现代前端框架和库（如React、Vue、Angular等）提供了更高级、更声明式的样式处理方法，这些方法通常比直接使用DOM API更简洁、更易于维护。这些框架和库通常使用内联样式、CSS类、CSS模块、CSS-in-JS库或其他技术来管理样式。

DOM 事件

DOM（Document Object Model）事件是JavaScript与HTML交互的重要方式之一。当用户在HTML文档上执行某些操作时（如点击按钮、按下键盘上的键或移动鼠标等），会触发这些事件。通过JavaScript，我们可以监听这些事件，并在事件发生时执行相应的代码。

以下是一些常见的DOM事件类型及其用法：

1. 点击事件（Click Event）

当用户点击某个元素时触发。

javascript复制代码

	var button = document.getElementById('myButton');
	button.addEventListener('click', function() {
	alert('按钮被点击了！');
	});

2. 鼠标事件（Mouse Events）

• mousedown：当鼠标按钮被按下时触发。
• mouseup：当鼠标按钮被释放时触发。
• mousemove：当鼠标指针在元素内部移动时触发。
• mouseover：当鼠标指针进入元素时触发。
• mouseout：当鼠标指针离开元素时触发。

javascript复制代码

	var element = document.getElementById('myElement');
	element.addEventListener('mouseover', function() {
	// 鼠标指针进入元素时执行的代码
	});

3. 键盘事件（Keyboard Events）

• keydown：当键盘上的某个键被按下时触发。
• keyup：当键盘上的某个键被释放时触发。
• keypress：当键盘上的某个键被按下并产生一个可打印的字符值时触发（注意：在某些浏览器中已被弃用）。

javascript复制代码

	document.addEventListener('keydown', function(event) {
	if (event.key === 'Enter') {
	// 当按下Enter键时执行的代码
	}
	});

4. 表单事件（Form Events）

• submit：当表单提交时触发。
• change：当表单元素的值改变时触发（如<input>、<select>或<textarea>）。
• focus：当元素获得焦点时触发。
• blur：当元素失去焦点时触发。

javascript复制代码

	var form = document.getElementById('myForm');
	form.addEventListener('submit', function(event) {
	// 阻止表单的默认提交行为
	event.preventDefault();
	// 提交表单的自定义处理逻辑
	});

5. 加载和滚动事件（Load and Scroll Events）

• load：当页面或图像加载完成时触发。
• scroll：当文档或元素滚动时触发。

javascript复制代码

	window.addEventListener('load', function() {
	// 页面加载完成后执行的代码
	});
	window.addEventListener('scroll', function() {
	// 滚动时执行的代码
	});

6. 拖放事件（Drag and Drop Events）

• dragstart：当元素开始被拖动时触发。
• drag：当元素在拖动过程中时触发。
• dragend：当拖动操作结束时触发。
• dragenter：当被拖动的元素进入某个元素时触发。
• dragover：当被拖动的元素在目标元素上移动时触发。
• dragleave：当被拖动的元素离开目标元素时触发。
• drop：当被拖动的元素在目标元素上放下时触发。

7. 触摸事件（Touch Events）

这些事件主要用于移动设备上的触摸交互。

• touchstart：当触摸点被放在触摸平面上时触发。
• touchmove：当触摸点在触摸平面上移动时触发。
• touchend：当触摸点从触摸平面上移除时触发。
• touchcancel：当触摸操作被中断（如触摸点太多、浏览器窗口被其他内容遮挡等）时触发。

8. 自定义事件（Custom Events）

除了上述内置事件外，你还可以创建自定义事件并在适当的时候触发它们。这在创建可复用的组件或模块时非常有用。

javascript复制代码

	var event = new CustomEvent('myCustomEvent', { detail: { message: 'Hello, world!' } });
	document.dispatchEvent(event);
	document.addEventListener('myCustomEvent', function(event) {
	console.log(event.detail.message); // 输出 "Hello, world!"
	});

在监听事件时，通常使用addEventListener方法，并传入事件类型和事件处理函数作为参数。事件处理函数会在指定的事件类型被触发时执行。此外，你还可以使用removeEventListener方法来移除之前添加的事件监听器。

DOM节点

DOM（Document Object Model）节点是构成HTML和XML文档的基础结构单元。在DOM中，文档被表示为树形结构，每个节点都是这棵树的一个部分。这些节点可以是元素节点、文本节点、属性节点、文档节点（对于整个文档）等。

以下是DOM节点的一些主要类型：

1. 元素节点（Element Nodes）

元素节点对应于HTML或XML文档中的标签。例如，<p>、<div>、<a>等都是元素节点。元素节点可以包含属性节点和子节点（包括元素节点和文本节点）。

2. 文本节点（Text Nodes）

文本节点包含文档中的文本内容。文本节点总是被包含在元素节点中。在HTML文档中，文本节点通常是由标签之间的文本构成的。

3. 属性节点（Attribute Nodes）

属性节点包含元素的属性信息。例如，在<img src="example.jpg" alt="Example Image">中，src和alt就是属性节点。属性节点总是被包含在元素节点中。

4. 文档节点（Document Node）

文档节点是DOM树的根节点，代表整个文档。在HTML文档中，文档节点对应于document对象。

5. 文档类型节点（Document Type Node）

文档类型节点（也称为DOCTYPE节点）在HTML文档中并不常见，但在XML文档中很有用。它包含了关于文档类型的声明信息。

6. 注释节点（Comment Nodes）

注释节点包含HTML或XML文档中的注释信息。在HTML中，注释以<!--开始，以-->结束。

7. 文档片段节点（Document Fragment Node）

文档片段节点是一种特殊的节点类型，它表示了一个不包含父节点的节点集合。文档片段节点常用于性能优化，因为它们不会在文档树中创建额外的节点，从而减少了对DOM的修改次数。

节点属性和方法

每个DOM节点都有一些属性和方法，用于获取或修改节点的信息。例如：

• nodeName：返回节点的名称（对于元素节点，它是元素的标签名）。
• nodeType：返回节点的类型（例如，元素节点的类型是1，文本节点的类型是3）。
• nodeValue：对于文本节点和属性节点，返回节点的值；对于其他类型的节点，返回null。
• parentNode：返回节点的父节点。
• childNodes：返回一个包含节点的子节点的NodeList。
• firstChild 和 lastChild：分别返回节点的第一个和最后一个子节点。
• appendChild(node)：将指定的节点添加到该节点的子节点列表的末尾。
• removeChild(node)：从该节点的子节点列表中移除指定的节点。
• insertBefore(newNode, referenceNode)：在指定的参考节点之前插入新的节点。
• replaceChild(newNode, oldNode)：用新的节点替换指定的旧节点。

通过使用这些属性和方法，你可以遍历DOM树、查找特定节点、修改节点内容等。