24大数据技术10.23实验课作业

Js的dom增删改查练习
本次作业目标：仔细阅读，仿造其余代码部分，独立写出第44行的readFruits()函数；
readFruits() 是用于读取并输出当前网页中水果列表的内容，循环输出每个水果名称，并在控制台中依次显示的函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>DOM 水果篮子</title>
  <style>
    body {
      font-family: "微软雅黑";
      padding: 20px;
    }
    .highlight {
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h2>DOM 水果篮子</h2>

  <!-- 初始容器 -->
<div id="fruit-list">
  <p class="item">苹果</p>
  <p class="item">香蕉</p>
</div>

<script>
  // 获取容器元素
  var list = document.getElementById("fruit-list");

  // ---------------------------
  //  C：Create（新增元素）
  // ---------------------------
  function addFruit(name) {
    var p = document.createElement("p"); // 创建 <p> 元素
    p.textContent = name;                 // 设置文本
    p.className = "item";                 // 设置类名
    list.appendChild(p);                  // 添加到容器
    console.log("已添加：" + name);
  }

  // ---------------------------
  //  R：Read（读取元素）
  // ---------------------------
  function readFruits() {
    
  }

  // ---------------------------
  //  U：Update（修改元素）
  // ---------------------------
  function updateFruit(oldName, newName) {
    var items = list.getElementsByClassName("item");
    var found = false;
    for (var i = 0; i < items.length; i++) {
      if (items[i].textContent === oldName) {
        items[i].textContent = newName;      // 修改文本
        items[i].style.backgroundColor = "yellow"; // 添加高亮
        found = true;
        console.log("修改成功：" + oldName + " → " + newName);
      }
    }
    if (!found) {
      console.log("未找到 " + oldName);
    }
  }

  // ---------------------------
  //  D：Delete（删除元素）
  // ---------------------------
  function deleteFruit(name) {
    var items = list.getElementsByClassName("item");
    var deleted = false;
    // 注意 HTMLCollection 是动态的，用 while 循环更安全
    var i = 0;
    while (i < items.length) {
      if (items[i].textContent === name) {
        list.removeChild(items[i]);
        deleted = true;
        console.log("已删除：" + name);
        // 删除元素后，不增加 i，因为 items 会自动更新
      } else {
        i++;
      }
    }
    if (!deleted) {
      console.log("未找到 " + name);
    }
  }

  // ---------------------------
  // 执行样例
  // ---------------------------
  // readFruits();                // 查看初始列表
  // addFruit("橙子");            // 新增一个元素
  // updateFruit("香蕉", "草莓"); // 修改文本
  // deleteFruit("苹果");         // 删除元素
  // readFruits();                // 再次查看结果
</script>
</body>
</html>