目录
1. 什么事DOM编程
1.1 DOM的定义
简介DOM（Document Object Model）：
DOM（Document Object Model，文档对象模型）是一个跨平台且语言无关的接口，它把HTML或XML文档结构化为一个树形结构，使程序可以通过脚本语言对文档内容和结构进行动态访问和修改。DOM提供了一种标准的方式来表示和操作文档中的内容，使开发者能够轻松地使用脚本语言（如JavaScript）来控制和操作网页。
DOM在网页中的作用：
DOM 是现代网页开发的核心技术之一，它允许网页的内容被动态更新和交互。通过DOM，开发者可以：
- 访问和修改文档中的各个元素和属性。
- 动态地创建、删除和修改节点。
- 响应用户的事件（如点击、输入等），从而实现交互式功能。
DOM的树形结构及其节点类型：
DOM将文档表示为一个由节点构成的树形结构，每个节点代表文档的一部分。常见的节点类型包括：
- 元素节点（Element Node）：代表HTML或XML文档中的一个元素，例如
<div>、<p>等。 - 文本节点（Text Node）：包含元素或属性中的文本。
- 属性节点（Attribute Node）：代表元素的属性，例如class、id等。
- 文档节点（Document Node）：树形结构的根节点，代表整个文档。
- 注释节点（Comment Node）：表示文档中的注释部分。
1.2 DOM编程的重要性
为什么需要DOM编程：
DOM编程的主要目的是为了让网页变得动态和交互。这种编程方式使得开发者能够在不重新加载网页的情况下更新内容、样式和结构，从而提高用户体验。具体来说，DOM编程具有以下重要性：
- 动态更新内容：通过DOM编程，开发者可以根据用户的操作或数据变化动态更新网页内容，提供即时反馈。
- 交互式用户界面：DOM提供了处理用户交互（如点击、输入、拖放等）的接口，使得网页可以响应用户操作并提供交互式体验。
- 增强用户体验：通过动态内容更新和交互功能，DOM编程可以显著提升用户在网站上的体验。
动态网页和交互式用户界面的实现：
DOM编程是实现动态网页和交互式用户界面的关键技术。以下是几个常见的应用场景：
- 表单验证：在用户提交表单前，通过DOM脚本实时校验用户输入并提供即时反馈。
- 异步数据加载：通过AJAX与后台服务器通信，动态加载和更新页面内容，而无需刷新整个页面。
- 动画效果：通过操作DOM元素的样式和位置，创建丰富的动画效果，提升视觉体验。
- 单页应用（SPA）：使用框架（如React、Vue.js等）和DOM编程，构建无需刷新页面的单页应用，实现流畅的用户体验。
1.3 常用的DOM编程语言
JavaScript作为主要的DOM编程语言：
JavaScript 是最广泛用于DOM编程的语言，因为它是所有现代浏览器的内置脚本语言，并且与HTML和CSS紧密集成。通过JavaScript，开发者可以：
- 动态访问和修改HTML元素和属性。
- 响应用户事件，如点击、输入、鼠标移动等。
- 与服务器进行异步通信，加载和提交数据。
- 操作CSS样式，改变元素的外观和布局。
其他可能的编程语言：
虽然JavaScript是主要的DOM编程语言，但在特定场景下，其他编程语言也可以用于解析和操作HTML文档。例如：
- Python的BeautifulSoup：用于解析和处理HTML/XML文档，常用于网络抓取和数据提取。
- jQuery：虽然本质上还是JavaScript库，但它简化了DOM操作，使得代码更简洁和易于维护。
- PHP：通过服务器端的DOM扩展，可以解析和操作HTML文档。
- Node.js：在服务端使用JavaScript操作DOM，常用于服务器端渲染（SSR）和生成静态页面。
2. 获取页面元素的集中方式
2.1 在整个文档范围内查找元素节点
2.1.1 getElementById
用法及示例代码：
var element = document.getElementById('myId');
优缺点分析：
- 优点：
- 高效：通过ID查找元素是非常快速的，因为ID在文档中是唯一的。
- 简单：使用方法简单且直观。
- 缺点：
- 限制：只能查找唯一的ID，不能用于查找多个元素或复杂的选择条件。
2.1.2 getElementsByClassName
用法及示例代码：
var elements = document.getElementsByClassName('myClass');
返回结果的类型和使用方法：
- 返回一个实时更新的HTMLCollection对象，可以通过索引访问，类似数组。
示例：
for (var i = 0; i < elements.length; i++) {
elements[i].style.color = 'red';
}
2.1.3 getElementsByTagName
用法及示例代码：
var elements = document.getElementsByTagName('p');
适用场景：
- 查找所有特定标签名的元素，比如所有的
<p>标签。
示例：
for (var i = 0; i < elements.length; i++) {
elements[i].style.fontSize = '20px';
}
2.1.4 querySelector
用法及示例代码：
var element = document.querySelector('.myClass');
与其他方法的对比：
- 优点：可以使用CSS选择器语法，灵活性高。
- 缺点：只返回匹配的第一个元素。
示例：
var element = document.querySelector('#myId .myClass');
2.1.5 querySelectorAll
用法及示例代码：
var elements = document.querySelectorAll('.myClass');
返回结果的类型和使用方法：
- 返回一个静态的NodeList对象，可以通过索引访问，也可以使用forEach遍历。
示例：
elements.forEach(function(element) {
element.style.backgroundColor = 'yellow';
});
2.2 在具体元素节点范围内查找子节点
2.2.1 getElementsByClassName
用法及示例代码：
var parentElement = document.getElementById('parentId');
var children = parentElement.getElementsByClassName('childClass');
查找特定父元素下的子元素：
- 在特定父元素范围内查找具有指定类名的子元素。
示例：
for (var i = 0; i < children.length; i++) {
children[i].style.border = '1px solid black';
}
2.2.2 getElementsByTagName
用法及示例代码：
var parentElement = document.getElementById('parentId');
var children = parentElement.getElementsByTagName('span');
查找特定父元素下的子元素：
- 在特定父元素范围内查找具有指定标签名的子元素。
示例：
for (var i = 0; i < children.length; i++) {
children[i].style.color = 'blue';
}
2.2.3 querySelector
用法及示例代码：
var parentElement = document.getElementById('parentId');
var child = parentElement.querySelector('.childClass');
特定父元素范围内的CSS选择器查询：
- 在特定父元素范围内使用CSS选择器语法查找匹配的第一个子元素。
示例：
child.style.margin = '10px';
2.2.4 querySelectorAll
用法及示例代码：
var parentElement = document.getElementById('parentId');
var children = parentElement.querySelectorAll('.childClass');
特定父元素范围内的CSS选择器查询：
- 在特定父元素范围内使用CSS选择器语法查找所有匹配的子元素，并返回静态NodeList对象。
示例：
children.forEach(function(child) {
child.style.padding = '5px';
});
2.3 查找指定子节点元素节点的父节点
使用parentNode属性：
var childElement = document.getElementById('childId');
var parentElement = childElement.parentNode;
示例代码及注意事项：
parentNode返回的是直接父节点，不一定是元素节点（可能是文档碎片等）。
示例：
parentElement.style.backgroundColor = 'lightgrey';
2.4 查找指定元素节点的兄弟节点
2.4.1 查找前一个兄弟节点
使用previousSibling和previousElementSibling：
var currentElement = document.getElementById('currentId');
var prevSibling = currentElement.previousSibling;
var prevElementSibling = currentElement.previousElementSibling;
示例代码及差异解释：
previousSibling：返回前一个兄弟节点，可能是文本节点或注释节点。previousElementSibling：返回前一个兄弟元素节点。
示例：
if (prevElementSibling) {
prevElementSibling.style.color = 'green';
}
2.4.2 查找后一个兄弟节点
使用nextSibling和 nextElementSibling：
var currentElement = document.getElementById('currentId');
var nextSibling = currentElement.nextSibling;
var nextElementSibling = currentElement.nextElementSibling;
示例代码及差异解释：
nextSibling：返回后一个兄弟节点，可能是文本节点或注释节点。nextElementSibling：返回后一个兄弟元素节点。
示例：
if (nextElementSibling) {
nextElementSibling.style.color = 'orange';
}
3. 操作元素属性值
3.1 属性操作
3.1.1 获取属性值
使用 getAttribute
示例代码及常见应用：
var link = document.getElementById('myLink');
var hrefValue = link.getAttribute('href');
常见应用：
- 获取元素的自定义属性值，如
data-*属性。 - 在需要动态获取元素属性值时使用。
3.1.2 设置属性值
使用 setAttribute
示例代码及注意事项：
var link = document.getElementById('myLink');
link.setAttribute('href', 'https://www.example.com');
注意事项：
- 当设置属性值时，如果属性不存在则会被创建；如果存在则会被更新。
- 可以用于动态修改元素属性，如链接地址、自定义属性等。
3.1.3 删除属性
使用 removeAttribute
示例代码及注意事项：
var link = document.getElementById('myLink');
link.removeAttribute('target');
注意事项：
- 删除指定属性，使其不再属于该元素。
- 慎用，因为有些属性是必需的，删除后可能影响元素的正常行为。
3.2 内部文本操作
3.2.1 获取文本内容
使用 textContent
示例代码及适用场景：
var paragraph = document.getElementById('myPara');
var content = paragraph.textContent;
适用场景：
- 获取元素内部的纯文本内容，不包括HTML标记。
- 适合用于获取和处理元素中的文本信息。
3.2.2 设置文本内容
使用 textContent
示例代码及注意事项：
var paragraph = document.getElementById('myPara');
paragraph.textContent = 'New text content';
注意事项：
- 设置元素内部的纯文本内容，会覆盖原有的内容。
- 注意不会解析为HTML，而是作为纯文本插入。
3.2.3 获取HTML内容
使用 innerHTML
示例代码及安全性考虑：
var container = document.getElementById('myContainer');
var htmlContent = container.innerHTML;
安全性考虑：
- 获取元素内部的HTML内容，包括HTML标记。
- 应谨慎使用，特别是当内容来自用户输入或其他不可信的来源时，存在安全风险。
3.2.4 设置HTML内容
使用 innerHTML
示例代码及安全性考虑：
var container = document.getElementById('myContainer');
container.innerHTML = '<p>New HTML content</p>';
安全性考虑：
- 设置元素内部的HTML内容，可以包含HTML标记。
- 需要注意防止跨站脚本攻击（XSS），确保插入的内容是可信的，或进行必要的过滤和转义处理。
4. 增删元素
| API | 功能 |
|---|---|
| document.createElement(“标签名”) | 创建元素节点并返回，但不会自动添加到文档中 |
| document.createTextNode(“文本值”) | 创建文本节点并返回，但不会自动添加到文档中 |
| element.appendChild(ele) | 将ele添加到element所有子节点后面 |
| parentEle.insertBefore(newEle,targetEle) | 将newEle插入到targetEle前面 |
| parentEle.replaceChild(newEle, oldEle) | 用新节点替换原有的旧子节点 |
| element.remove() | 删除某个标签 |
扫一扫
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
