likes
comments
collection
share

跟ChatGPT学JS：第四节课-DOM操作

作者站长头像
站长
· 阅读数 53

第四节课内容不够详细，你再按照大纲里面第四节课中的详细知识点，添加详细的内容，包括知识点详细讲解和代码例子，最后留两道课后练习。

好的，以下是按照大纲里面第四节课中的详细知识点，添加详细内容，包括知识点详细讲解和代码例子，最后留两道课后练习。

第四节课：DOM操作

知识点

  1. 什么是DOM
  2. DOM树结构
  3. DOM节点操作
  4. DOM事件

什么是DOM

DOM（Document Object Model）指的是文档对象模型，是对HTML文档的编程接口。它将整个HTML文档转换成一个树形结构，树中的每个节点代表文档中的一个元素或其他内容。通过DOM，开发者可以对HTML文档中的每个节点进行操作。

DOM树结构

DOM树是由节点构成的，节点有三种类型：

  1. 元素节点：HTML中的标签，如<div>、<p>等。
  2. 文本节点：标签之间的文本内容。
  3. 属性节点：HTML标签的属性。

节点之间的关系可以用树形结构表示，其中最顶层的节点是文档节点。下面是一个简单的HTML文档的DOM树结构示例：

<html>
  <head>
    <title>DOM Tree</title>
  </head>
  <body>
    <h1>Welcome to the DOM Tree!</h1>
    <p>Here is a paragraph</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </body>
</html>

DOM节点操作

通过JavaScript的DOM API，我们可以对DOM树中的节点进行操作，如添加、修改、删除等操作。下面是一些常用的DOM节点操作：

  1. 获取元素节点：通过document.getElementById()、document.getElementsByTagName()、document.getElementsByClassName()等方法获取元素节点。
  2. 修改元素属性：可以通过元素的setAttribute()方法来修改元素的属性值。
  3. 创建新节点：可以使用document.createElement()方法来创建新的元素节点。
  4. 添加新节点：可以使用appendChild()方法将新创建的节点添加到父节点中。
  5. 删除节点：可以使用removeChild()方法来删除一个节点。

下面是一些常用的DOM节点操作的代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>DOM操作示例</title>
</head>
<body>
  <div id="myDiv">
    <p>Hello, world!</p>
  </div>
  <script>
    // 获取元素节点
    var div = document.getElementById('myDiv');

    // 修改元素属性
    div.setAttribute('class', 'highlight');

    // 创建新节点
    var p = document.createElement('p');
    p.textContent = 'This is a new paragraph!';

    // 添加新节点
    div.appendChild(p);

    // 删除节点
    div.removeChild(p);
  </script>
</body>
</html>

DOM事件

DOM事件是由用户或浏览器发生的事件，DOM 事件是指在 HTML 文档中发生的特定事件，比如单击、双击、鼠标移动等等。JavaScript 可以通过监听这些事件来实现动态的交互效果。下面我们来详细介绍一下 DOM 事件的相关知识点。

  1. 事件监听

在 JavaScript 中，我们可以通过 addEventListener 方法来监听 DOM 事件。该方法接受三个参数：

  • 事件类型：表示要监听的事件类型，比如 click、mousedown 等等。
  • 回调函数：表示事件触发后要执行的回调函数。
  • 是否在捕获阶段监听：一个可选的布尔值参数，表示事件是否在捕获阶段监听。默认为 false，即在冒泡阶段监听。

示例代码如下：

const button = document.querySelector('#myButton');
button.addEventListener('click', function(event) {
  // 点击事件触发后执行的代码
});
  1. 事件对象

在事件处理函数中，会传入一个事件对象作为参数，该事件对象包含了触发该事件的一些相关信息。常用的事件对象属性包括：

  • target：事件的目标对象，即触发事件的元素。
  • type：事件的类型。
  • clientX、clientY：鼠标事件的坐标信息。
  • keyCode：键盘事件的键码信息。

示例代码如下：

const button = document.querySelector('#myButton');
button.addEventListener('click', function(event) {
  console.log(event.target); // 输出触发事件的元素
  console.log(event.clientX, event.clientY); // 输出鼠标坐标信息
});
  1. 事件冒泡和捕获

当一个 DOM 元素上发生了一个事件，比如点击事件，它会首先在触发元素上触发，然后一直往上传递，直到到达文档根节点。这个过程就是事件冒泡。与事件冒泡相对应的是事件捕获，即从根节点开始，一直往下传递，直到到达触发元素。

在实际开发中，我们可以利用事件冒泡机制来实现事件代理。事件代理是指将事件监听器添加到其它元素，然后通过事件冒泡机制捕获事件并处理它。这样可以减少页面中事件处理函数的数量，提高性能。

示例代码如下：

示例代码如下：

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
const list = document.querySelector('#myList');
list.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('点击了列表项：', event.target.textContent);
  }
});

时间冒泡和捕获没讲完，继续，从这里接下去讲完第四节课，讲完之后留两道练习题

好的，接下来我继续讲解第四节课的内容。

DOM事件（续）

事件传播

在 DOM 树中，每个节点都是有父节点的，直到根节点。当事件在 DOM 树中的某个元素上触发时，会按照特定的顺序传播到该元素的所有祖先节点和后代节点。这种传播机制被称为事件传播，有三个阶段：捕获阶段、目标阶段和冒泡阶段。

捕获阶段

事件从根节点开始向下传播到目标元素，会先触发捕获阶段的事件处理函数。在捕获阶段，事件从根节点一直传播到目标元素的父节点，直到到达目标元素所在的节点。

目标阶段

在目标元素上触发事件，并执行事件处理函数。如果该事件处理函数调用了 event.stopPropagation() 方法，则事件传播停止，不再执行冒泡阶段的事件处理函数。

冒泡阶段

在目标元素的父节点上触发事件，并执行事件处理函数。事件从目标元素一直向上传播到根节点。如果任何节点在该阶段调用了 event.stopPropagation() 方法，则事件传播停止。

事件传播可以使用 event.target 和 event.currentTarget 属性来控制。其中，event.target 属性是触发事件的目标元素，而 event.currentTarget 属性是当前正在处理事件的元素。

以下是一个事件传播的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>事件传播</title>
  </head>
  <body>
    <div id="outer">
      <div id="inner">点击我</div>
    </div>
    <script>
      function outerHandler(event) {
        console.log('outer');
      }
      function innerHandler(event) {
        console.log('inner');
      }
      var outer = document.getElementById('outer');
      var inner = document.getElementById('inner');
      outer.addEventListener('click', outerHandler, true);
      inner.addEventListener('click', innerHandler, true);
    </script>
  </body>
</html>

上面的代码中，我们在外层元素和内层元素上都绑定了 click 事件，同时都开启了事件捕获。当你点击内层元素时，控制台将输出：

outer
inner

因为在事件捕获阶段，事件会先从外层元素传递到内层元素。如果将 addEventListener 中的第三个参数改为 false，则输出结果将变为：

inner
outer

因为在事件冒泡阶段，事件会先从内层元素传递到外层元素。

常见事件类型

从常见事件类型继续讲下去

接下来讲一下常见的事件类型。

  1. click：鼠标单击事件，通常用于用户在页面上进行单击操作时的处理。
  2. dblclick：鼠标双击事件，通常用于用户在页面上进行双击操作时的处理。
  3. mouseover：鼠标移入事件，通常用于用户将鼠标移入某个元素时的处理。
  4. mouseout：鼠标移出事件，通常用于用户将鼠标移出某个元素时的处理。
  5. mousedown：鼠标按下事件，通常用于用户在页面上按下鼠标键时的处理。
  6. mouseup：鼠标松开事件，通常用于用户在页面上松开鼠标键时的处理。
  7. mousemove：鼠标移动事件，通常用于用户在页面上移动鼠标时的处理。
  8. keydown：按键按下事件，通常用于用户在页面上按下键盘上的某个按键时的处理。
  9. keyup：按键松开事件，通常用于用户在页面上松开键盘上的某个按键时的处理。
  10. submit：表单提交事件，通常用于用户在表单上进行提交时的处理。
  11. reset：表单重置事件，通常用于用户在表单上进行重置时的处理。
  12. load：页面加载事件，通常用于页面加载完成后的处理。
  13. unload：页面卸载事件，通常用于页面卸载前的处理。
  14. resize：窗口大小调整事件，通常用于窗口大小调整时的处理。
  15. scroll：滚动条滚动事件，通常用于滚动条滚动时的处理。

在实际开发中，我们可以使用 addEventListener() 方法来为元素添加事件处理函数。这个方法接收三个参数：事件类型、事件处理函数、是否在捕获或冒泡阶段处理事件。

下面是一个添加事件处理函数的示例：

// 获取一个按钮元素
const btn = document.querySelector('#myBtn');

// 添加事件处理函数
btn.addEventListener('click', function() {
  console.log('Button clicked!');
});

在这个示例中，我们使用 querySelector() 方法获取了一个按钮元素，然后使用 addEventListener() 方法为按钮添加了一个 click 事件处理函数。

课后练习：

  1. 编写一个函数，当用户单击页面时，在页面上显示一个随机颜色的圆形。
  2. 编写一个函数，当用户按下键盘上的某个字母键时，在页面上显示一个对应的图片。
转载自:https://juejin.cn/post/7202066150938099771
评论
请登录