JavaScript.DOM编程艺术笔记 第四章

0x00 前言

对javascript学习做的一个笔记

0x01 笔记

1.时间处理函数

• onmouseover 鼠标悬停触发
• onmouseout 离开元素触发
• onclick 点击触发

2.调用之后执行语句

window.onload

使用这个，其实完全可以执行很多操作了，不如说获取cookie直接获取鸭这些。

3.firstchild lastchild

• firstchild 就是指第一个元素
• lastchild 指最后一个元素

其实这个就是一个节点转换的过程。

4.nodevalue

获取到节点的值

0x02 总结

最后实战结果，感觉效果真的不错。

补充知识

JavaScript.DOM

JavaScript DOM（文档对象模型）是指一个用于访问和操作 HTML 和 XML 文档的 API。它将文档解析为一个由节点和对象组成的结构，可以通过 JavaScript 来访问和操作这些节点和对象。

JavaScript DOM 通常用于网页开发中，它允许开发人员使用 JavaScript 动态地修改网页内容、样式和结构。例如，你可以使用 JavaScript DOM 来添加、删除、更改 HTML 元素、属性和样式，以及处理用户交互事件等。

JavaScript DOM 有许多方法和属性，可以使用它来访问和操作 HTML 和 XML 文档的各个方面，包括：

• 获取和修改元素的内容和属性
• 创建、添加和删除元素
• 处理鼠标和键盘事件
• 改变元素的样式和布局

掌握 JavaScript DOM 对于网页开发非常重要，因为它为网站提供了动态和交互性，并且可以让开发人员更加快速地修改网站的内容和结构。

javascript

JavaScript 是一种基于对象和事件驱动的脚本语言，用于为 Web 应用程序添加交互性、动态性和动画效果。它可以嵌入到 HTML 的标记之间，或者通过外部 JavaScript 文件链接到 HTML 文档中。JavaScript 可以与 HTML 和 CSS 组合使用，以创建动态的用户界面和改变页面内容。

JavaScript 最初是为浏览器端编写脚本而设计的，但现在已经广泛应用于服务器端编程、桌面应用程序、移动应用程序以及 IoT 设备等领域。JavaScript 也是最流行的编程语言之一，在全球范围内拥有数百万的开发者社区。

JavaScript 使用简单，易于学习和理解，可实现从简单的 UI 动画到复杂的 Web 应用程序的开发。它支持许多编程概念，例如对象、函数和变量，同时还可以与多个第三方库和框架配合使用，以加快应用程序的开发速度。

javascript常用事件

JavaScript常见事件有：

1. 点击事件（click）
2. 鼠标移动事件（mousemove）
3. 鼠标进入事件（mouseover）
4. 鼠标离开事件（mouseout）
5. 键盘按下事件（keydown）
6. 键盘松开事件（keyup）
7. 表单提交事件（submit）
8. 页面载入事件（load）
9. 页面卸载事件（unload）
10. 鼠标滚轮事件（mousewheel）JavaScript常见事件有：

nodevalue 介绍

nodeValue 是一个 JavaScript 中的属性，用于获取或设置节点的文本值。对于元素节点，它返回元素节点的文本内容（即该元素的 innerText 或 textContent）。对于其他类型的节点，它返回节点的值。如果节点不包含任何文本内容，则返回 null。

例如，可以使用以下代码获取一个元素节点的文本内容并将其输出到控制台：

var element = document.getElementById("example");
console.log(element.nodeValue);

如果元素节点的 HTML 代码如下所示：

<p id="example">Hello, world!</p>

那么上述代码将输出 “Hello, world!” 到控制台。

firstchild 操作实例

假设我们有以下 HTML 代码：

<div id="parent">
  <p>第一个子元素</p>
  <p>第二个子元素</p>
  <p>第三个子元素</p>
</div>

我们可以使用 firstChild 属性来获取 parent 元素的第一个子元素，代码如下：

const parent = document.getElementById('parent');
const firstChild = parent.firstChild;
console.log(firstChild);

输出结果为：

# 文本节点
# <p>第一个子元素</p>

我们可以看到，因为在 HTML 中，每个元素之间都有一个文本节点，因此 firstChild 属性返回的是第一个子元素前面的文本节点。如果我们只想要元素节点，可以使用 firstElementChild 属性，代码如下：

const parent = document.getElementById('parent');
const firstChild = parent.firstElementChild;
console.log(firstChild);

输出结果为：

# <p>第一个子元素</p>
```假设我们有以下 HTML 代码：

```html
<div id="parent">
  <p>第一个子元素</p>
  <p>第二个子元素</p>
  <p>第三个子元素</p>
</div>