青少年编程与数学 01-007 在网页上编写程序 16课题、文档对象模型3_2

最新推荐文章于 2024-07-30 09:03:14 发布

明月看潮生

最新推荐文章于 2024-07-30 09:03:14 发布

阅读量683

点赞数 24

分类专栏： # 编程与数学第01阶段文章标签：青少年编程前端 javascript 编程与数学 DOM

本文链接：https://blog.csdn.net/qq_40071585/article/details/140787252

版权

编程与数学第01阶段专栏收录该内容

176 篇文章 0 订阅

订阅专栏

青少年编程与数学 01-007 在网页上编写程序 16课题、文档对象模型3_2

四、DOM的操作
五、DOM编程应用
六、Ajax技术简介

文档对象模型（DOM）是Web开发中的核心概念，它提供了一种接口，允许开发者使用JavaScript等脚本语言动态访问和操作HTML和XML文档。DOM将文档呈现为树状结构，每个节点代表文档中的一个元素、属性或文本。通过DOM，开发者可以修改元素的属性、样式和内容，创建和删除节点，以及响应用户事件。DOM的标准化和跨平台特性，简化了网页结构的理解和操作，提高了开发效率，并促进了Web技术的发展。

四、DOM的操作

使用JavaScript操作DOM通常涉及以下几个步骤：

选择元素：
- 使用document.getElementById()选择具有特定ID的元素。
- 使用document.getElementsByTagName()根据标签名选择一组元素。
- 使用document.getElementsByClassName()根据类名选择一组元素。
- 使用document.querySelector()根据CSS选择器选择第一个匹配的元素。
- 使用document.querySelectorAll()根据CSS选择器选择所有匹配的元素。
```
var element = document.getElementById('myId');
var elements = document.getElementsByTagName('p');
var divs = document.getElementsByClassName('myClass');
var firstElement = document.querySelector('.mySelector');
var allElements = document.querySelectorAll('.mySelector');
```
创建元素：
- 使用document.createElement()创建新的元素节点。
```
var newElement = document.createElement('div');
```

添加和删除元素：

使用appendChild()将新创建的元素添加到DOM中。
使用removeChild()从DOM中删除元素。

var parentElement = document.getElementById('parent');
parentElement.appendChild(newElement);
parentElement.removeChild(element);

修改元素内容：
- 使用innerText或textContent属性获取或设置元素的文本内容。
- 使用innerHTML属性设置元素的HTML内容（需注意XSS风险）。
```
element.textContent = 'Hello, World!';
element.innerHTML = '<span>HTML content</span>';
```

操作属性：

使用setAttribute()设置元素的属性。
使用getAttribute()获取元素的属性值。

element.setAttribute('data-custom', 'value');
var attributeValue = element.getAttribute('data-custom');

样式操作：
- 通过元素的style属性直接修改内联样式。
```
element.style.color = 'red';
element.style.display = 'none';
```

监听事件：

使用addEventListener()方法为元素添加事件监听器。

element.addEventListener('click', function() {
    alert('Element clicked!');
});

遍历DOM树：
- 使用parentNode、childNodes、firstChild、lastChild、nextSibling和previousSibling等属性遍历DOM树。
```
var firstChild = element.firstChild;
var parent = element.parentNode;
```

类操作：

使用classList属性添加、删除、切换或检查元素的类。

element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('active');

使用现代API：

利用DocumentFragment来优化DOM操作，避免多次重绘和重排。

var fragment = document.createDocumentFragment();
while (element.firstChild) {
    fragment.appendChild(element.firstChild);
}

使用JavaScript操作DOM是构建交互式网页的基础。开发者需要了解如何安全、高效地进行这些操作，以提升用户体验和页面性能。

五、DOM编程应用

JavaScript编程中的文档对象模型（DOM）是实现动态网页和交互式Web应用的关键技术之一。DOM将HTML或XML文档表示为一系列节点组成的树形结构，每个节点代表文档的一部分，如元素、文本、注释等。通过DOM API，开发者可以使用JavaScript对这些节点进行访问、修改、删除以及创建新的节点，从而实现丰富的用户界面操作和数据处理。

以下是DOM在JavaScript编程中的一些主要应用：

动态内容更新：
- 改变文本内容：使用textContent或innerHTML属性来更改页面上任意元素的文本内容。
```
document.getElementById('myElement').textContent = '新的文本';
```
- 插入新元素：使用createElement()创建新元素，然后用appendChild()将其添加到DOM树中。
```
const newParagraph = document.createElement('p');
newParagraph.textContent = '这是一个新段落';
document.body.appendChild(newParagraph);
```
事件处理：
- 绑定事件监听器：使用addEventListener()为特定的DOM元素添加事件处理函数，以响应用户的交互行为，如点击、滚动、键入等。
```
button.addEventListener('click', function() {
  // 执行点击按钮后的动作...
});
```
样式操作：
- 修改CSS样式：通过style属性直接操作元素的内联样式。
```
element.style.color = 'red';
```
- 类名切换：利用classList属性添加、移除或切换CSS类名以改变元素样式。
```
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('show');
```
遍历与查找：
- 遍历DOM树：使用childNodes, firstChild, lastChild, nextSibling, previousSibling等属性遍历DOM节点及其子节点。
- 选择器查询：通过querySelector()和querySelectorAll()方法根据CSS选择器获取匹配的元素集合。
```
const allDivs = document.querySelectorAll('div');
const firstHeading = document.querySelector('h1');
```

表单交互：

获取表单值：读取表单控件的值并进行验证或提交。

const usernameInput = document.getElementById('username');
const username = usernameInput.value;

监听表单事件：例如submit事件，处理表单提交逻辑。

form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止默认提交行为
  // 处理表单数据...
});

AJAX请求与数据绑定：
- 使用DOM与AJAX结合，可以在不刷新页面的情况下从服务器获取数据，并将返回的数据插入到页面中相应的位置。
动画与过渡效果：
- 通过定时器、CSS transitions 或 animations 与DOM操作相结合，实现动态布局变化和视觉特效。

总之，JavaScript DOM API极大地增强了网页的交互性和动态性，使得开发者能够构建复杂的Web应用程序，而不仅仅是静态的内容展示。通过DOM接口，我们可以构建可响应用户交互、实时更新内容、并且具有丰富视觉表现力的现代Web应用。

Ajax（Asynchronous JavaScript and XML）异步JavaScript与XML，这一概念由Web开发者Jesse James Garrett在2005年首次提出。尽管名称包含XML，但实际应用中并不局限于使用XML作为数据传输格式，JSON现在更常被用作替代方案。Ajax代表了一种新的网页开发模式，它允许网页局部刷新，即无需重新加载整个页面就能动态获取并更新内容。

六、Ajax技术简介

这个内容不做本阶段学习要求。

（一）来源

Ajax（Asynchronous JavaScript and XML）异步JavaScript与XML，这一概念由Web开发者Jesse James Garrett在2005年首次提出。尽管名称包含XML，但实际应用中并不局限于使用XML作为数据传输格式，JSON现在更常被用作替代方案。Ajax代表了一种新的网页开发模式，它允许网页局部刷新，即无需重新加载整个页面就能动态获取并更新内容。
Ajax本身并不是一个官方的标准，而是一种基于现有Web标准和技术实现的编程模式。它主要依赖于以下浏览器提供的Web API：

XMLHttpRequest（XHR）：这是一个最初由微软Internet Explorer引入并在其他浏览器中普及的API，允许JavaScript发送异步HTTP请求。随着时间的推移，XMLHttpRequest被标准化为W3C规范的一部分。
Fetch API：随着现代Web的发展，Fetch API作为XMLHttpRequest的一个更现代化、基于Promise的替代方案出现，并在2015年左右被纳入W3C标准草案，提供了更灵活和易用的方式来执行网络请求。

此外，与Ajax相关的技术和最佳实践也影响了HTML5和相关标准的发展，例如：

HTML5引入了新的语义化元素以及对离线存储的支持，这些都增强了构建复杂Web应用的能力。
CSS3的进步使得页面布局和动画更加流畅，有助于提升Ajax驱动应用的用户体验。

尽管Ajax作为一个具体的技术术语没有成为正式的标准，但它的理念已经深深融入到现代Web开发的核心技术栈中，并通过标准化的Web API得以实现和发展。

（二）核心技术方法

Ajax的核心技术主要包括以下几个部分：

JavaScript：用于处理用户交互、创建请求对象、解析响应以及操作DOM来更新页面内容。
XMLHttpRequest (XHR) 或者其现代版本 fetch API 以及基于Promise的 axios 和 jQuery.ajax 等库，它们是浏览器提供的API，允许JavaScript发送异步HTTP请求到服务器，并接收服务器返回的数据。
HTML/CSS/DOM：HTML和CSS负责页面结构和样式展示，而DOM（文档对象模型）则是通过JavaScript动态修改页面内容的关键机制。
数据交换格式：虽然名为“XML”的技术，但实际上可以采用任何合适的数据格式，包括但不限于XML、JSON、甚至纯文本。JSON由于其简洁性和JavaScript语言的天然亲和性，在现代Ajax应用中更为流行。

（三）应用场景

Ajax广泛应用于提升用户体验的场景，例如：

表单提交时的实时验证，无需提交表单即可反馈结果。
分页加载数据，如社交媒体时间线的滚动加载更多内容。
地图应用中的实时地理信息查询和渲染。
即时搜索建议功能，用户在输入框内输入时实时提供匹配建议。
购物车商品数量的即时更新，无需刷新页面即可增加或减少商品数量等。

（四）具体实现方法

在一个典型的Ajax请求流程中，JavaScript会执行以下步骤：

创建一个XMLHttpRequest对象实例或使用 fetch() 函数发起HTTP请求。
设置请求类型（GET, POST等）、URL以及其他可能的HTTP头信息。
使用 onreadystatechange 事件处理器或者Promise链式调用来监听请求状态变化，当请求完成且服务器返回成功状态码时，会触发相应的回调函数。
在回调函数内部，从 responseText 或 responseJSON 属性中获取服务器返回的数据。
使用JavaScript操作DOM元素，将新数据插入到网页指定位置，从而实现页面内容的局部更新。

这种异步通信方式显著改善了Web应用程序的性能和交互性，使得网页能够更加接近桌面应用的体验。随着现代前端框架的发展，如React、Vue.js等，Ajax请求通常被封装在这些框架的生命周期方法或者组件内部，以更高效、模块化的方式进行管理。

明月看潮生

关注

24
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
青少年编程与数学 01-007 在网页上编写程序 16课题、文档对象模型3_2

文档对象模型（DOM）是Web开发中的核心概念，它提供了一种接口，允许开发者使用JavaScript等脚本语言动态访问和操作HTML和XML文档。DOM将文档呈现为树状结构，每个节点代表文档中的一个元素、属性或文本。通过DOM，开发者可以修改元素的属性、样式和内容，创建和删除节点，以及响应用户事件。DOM的标准化和跨平台特性，简化了网页结构的理解和操作，提高了开发效率，并促进了Web技术的发展。
复制链接

扫一扫

专栏目录