JAVASCRIPT 基础 DOM元素，MAP方法，获取输入值

从输入框获取数据的一般写法是：
```javascript
const w = parseFloat(document.getElementById("weight").value);
const h = parseFloat(document.getElementById("height").value);
```
而从弹窗获取数据一般写法是：
```javascript
const w = parseFloat(prompt("输入体重:"));
const h = parseFloat(prompt("输入身高:"));
```

下面是几种常见的浏览器弹窗示例：

1. 只展示信息的“警告弹窗”：  
```html
<!-- HTML 中不需要额外代码，JS 可以直接写：-->
<script>
alert("这是一个只展示信息的弹窗");
</script>
```
它不会让用户输入内容，只是单纯显示文本。

2. 带“确认/取消”的弹窗：  
```javascript
if (confirm("确认要删除吗？")) {
    console.log("用户确认");
} else {
    console.log("用户取消");
}
```
它只显示信息并提供“确定/取消”按钮，没有输入框。

3. 带输入框的弹窗 (prompt)：  
```javascript
const name = prompt("请输入你的名字：");
console.log(name);
```
它会自动出现一个能让用户输入文本的对话框，用户点击“确定”后将所输入的内容返回给 name 变量。没有办法在这个对话框里添加自定义标签，它是浏览器原生实现的输入弹窗。

---

## 1. innerHTML 的概念

innerHTML 不是分级的概念，而是一个属性，代表一个 DOM 元素的内部 HTML 内容。它不是"相对的"概念，而是指特定 DOM 元素的所有子内容（以 HTML 字符串形式）。当你访问 `element.innerHTML` 时，你获取的是该元素内部的所有 HTML 代码，不包括元素自身的标签。

## 2. 以给定的 HTML 片段为例

```html
<section>
  <img
    src="dinosaur.png"
    alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." />
  <p>
    Here we will add a link to the
    <a href="https://www.mozilla.org/">Mozilla homepage</a>
  </p>
</section>
```

对于 `<section>` 元素：

```html
- **innerHTML** 是：<imgsrc="dinosaur.png"alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." /><p>Here we will add a link to the<a href="https://www.mozilla.org/">Mozilla homepage</a></p>
```- **outerHTML** 是：
```html
<section><imgsrc="dinosaur.png"alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." /><p>Here we will add a link to the<a href="https://www.mozilla.org/">Mozilla homepage</a></p>
</section>
```

## 3. innerHTML 与 DOM 节点的关系

innerHTML

 是 DOM 节点的一个属性，提供节点内部 HTML 的字符串表示。而 DOM 节点是文档对象模型中的元素，代表 HTML 文档的结构。

### 代码示例：

```javascript
// 获取 section 元素
const section = document.querySelector('section');// 查看 DOM 节点本身
console.log("DOM 节点:", section);
// 输出: [object HTMLSectionElement] (浏览器中会显示更详细的对象信息)// 查看 innerHTML (HTML 字符串)
console.log("innerHTML:", section.innerHTML);
// 输出: 内部的 HTML 内容字符串// 查看 outerHTML (包含自身的 HTML 字符串)
console.log("outerHTML:", section.outerHTML);
// 输出: 包含自身在内的 HTML 内容字符串// 查看 DOM 节点的子节点 (实际的 DOM 节点对象数组，而非 HTML 字符串)
console.log("子节点:", section.childNodes);
// 输出: NodeList [img, text, p]// 修改 innerHTML (会替换所有子内容)
section.innerHTML = "<h1>新内容</h1>";
// 现在 section 只包含一个 h1 元素
```

DOM 节点是对象，而 innerHTML 是一个返回或设置 HTML 字符串的属性。当你修改 innerHTML 时，浏览器会解析这个字符串并创建新的 DOM 节点来替换原有内容。

---

把 <script> 放在 body 底部的策略对内联脚本和外部脚本都有效。当浏览器加载 HTML 时，直到解析到 <script> 标签时才会加载并执行这段脚本；因此，无论脚本代码内联还是通过 src 引入，都能确保在页面的元素加载完毕后再执行脚本。

---

给定一个包含学生成绩的字典数组，使用 map 修改数组，其中包含学生姓名和他们的成绩等级（>=90 为 "A", >=80 为 "B", >=70 为 "C", 其他为 "F"）。

const students = [{ name: 'Alice', score: 92 },{ name: 'Bob', score: 76 },{ name: 'Charlie', score: 85 },{ name: 'Dave', score: 63 }
];
const passingScore = {A: 90,B: 80,C: 70,D: 60
}
students = students.map(onestudent => {const score=onestudent.score;
;for( const attribute in passingScore){const threshold = passingScore.attribute;if(score>=threshold){return onestudent.grade>=threshold? onestudent.grade=`${attribute}` :`${attribute}`}}
});
console.log(students);

我认为return onestudent.grade>=threshold? onestudent.grade=${attribute} :${attribute} 能保证“不断随着最大能达到的等级来更新，最终只留下最大匹配”

这段代码存在几个严重问题，**无法**实现"不断随着最大能达到的等级来更新，最终留下最大匹配"：

1. **属性访问错误**：
   ```javascript
   const threshold = passingScore.attribute;
   ```
   应该用方括号访问：`passingScore[attribute]`，因为attribute是变量

2. **提前返回**：
   ```javascript
   if(score>=threshold){
       return onestudent.grade>=threshold? onestudent.grade=`${attribute}` :`${attribute}`
   }
   ```
   当找到第一个符合条件的阈值时就立即返回，无法比较所有等级

3. **遍历顺序问题**：`for...in`循环的遍历顺序不确定，可能先检查D再检查A

4. **返回值混乱**：
   - 正在返回字符串值而不是学生对象
   - 三元表达式逻辑不明确

// 正确的实现方式
const students = [{ name: 'Alice', score: 92 },{ name: 'Bob', score: 76 },{ name: 'Charlie', score: 85 },{ name: 'Dave', score: 63 }
];const gradedStudents = students.map(student => {const score = student.score;if (score >= 90) {return { name: student.name, grade: 'A' };} else if (score >= 80) {return { name: student.name, grade: 'B' };} else if (score >= 70) {return { name: student.name, grade: 'C' };} else {return { name: student.name, grade: 'F' };}
});console.log(gradedStudents);

---

# JavaScript map() 方法的参数解释

map()方法接受一个回调函数作为唯一必需的参数。实际语法是：

```javascript
array.map(callback)
```

其中 `callback` 是一个函数，会被应用于数组的每个元素。这个回调函数可以接收三个参数：
1. 当前元素
2. 当前索引（可选）
3. 原数组（可选）

## 两种常见的写法：

### 1. 内联定义函数：
```javascript
students = students.map(function(onestudent) {
    // 这里的代码会应用到每个 student
    return /* 某个值 */;
});
```

### 2. 使用预定义函数：
```javascript
function changeLevel(onestudent) {
    // 处理逻辑
    return /* 某个值 */;
}

students = students.map(changeLevel);
```

## 错误示例（不正确的语法）：
```javascript
// 这是错误的！map 不接受两个参数
students = students.map(onestudent, changeLevel);
```

所以 students.map(function(onestudent) {...})是完全正确的语法，其中 `function(onestudent) {...}` 就是传递给 map()的回调函数。在这里，onestudent 是回调函数的参数，代表当前正在处理的数组元素。

在 JavaScript 的 map()函数中，参数是在函数定义时声明的。onestudent不需要在外部预先定义，它是作为回调函数的参数自动创建的。

这个概念可能对初学者来说有点抽象，让我用一个简单的例子来解释：

```javascript
// 普通的函数调用
function greet(person) {
    console.log("Hello, " + person);
}
greet("John"); // person = "John"

// 类似地，map 自动为每个数组元素调用你的函数
students.map(onestudent => {
    // 这里 onestudent 自动等于当前正在处理的数组元素
    // 第一次循环：onestudent = { name: 'Alice', score: 92 }
    // 第二次循环：onestudent = { name: 'Bob', score: 76 }
    // 以此类推...
});
```

map() 方法会自动：
1. 遍历数组中的每个元素
2. 对每个元素调用你提供的函数
3. 将当前元素作为参数传递给函数
4. 收集函数的返回值组成一个新数组

所以 onestudent是在函数参数位置上定义的变量，它会自动接收当前正在处理的学生对象。这是 JavaScript 函数式编程的标准模式，你不需要预先声明这个变量。
---
1. DOM 节点层级判断标准

在 DOM 中，每个 HTML 元素都是一个节点，但节点不仅限于元素。节点类型包括：

- 元素节点（如 `<p>`、`<span>`）
- 文本节点（元素内的文本）
- 注释节点（HTML 注释）
- 属性节点等

2. DOM 节点和 CSS 选择器的对比
- DOM 包含文本节点，CSS 选择器不直接处理文本节点
- CSS 选择器有特殊语法（如 `>`、`+`、`~` 等组合器）

### 比较例子：```html
<div id="container"><p class="intro">Hello <span>world</span></p><p>Another paragraph</p>
</div>
```**DOM 访问方式：**
```javascript
// 获取元素节点
const container = document.getElementById("container");
const paragraphs = container.getElementsByTagName("p");
const firstPara = paragraphs[0];
const span = firstPara.getElementsByTagName("span")[0];// 访问子节点（包括文本节点）
console.log(firstPara.childNodes); // [文本节点"Hello ", span元素节点]
```**对应的 CSS 选择器：**
```css
/* 选择container下的所有p */
#container p { }/* 选择container下的直接p子元素 */
#container > p { }/* 选择intro类的p内部的span */
p.intro span { }
```CSS 选择器聚焦于元素的选择，而 DOM API 更关注节点的操作和遍历，包括文本节点、注释等非元素节点。# DOM 选择器与节点关系## 1. `document.querySelectorAll()` 的行为`document.querySelectorAll()` 会选择文档中所有匹配 CSS 选择器的元素，无论它们在哪个层级，返回一个 NodeList。### 1.1 对于示例文件中的选择器:```javascript
// 选择所有 <p> 元素
const allPs = document.querySelectorAll("p");
console.log(allPs); 
// 结果: NodeList(2) [p, p] 
// 包含 box1 中的 "小猪课堂" 和 box2 中的 "box2p1"、"box2p2"// 选择所有 <div> 元素
const allDivs = document.querySelectorAll("div");
console.log(allDivs);
// 结果: NodeList(2) [div#box1, div#box2]
// 包含两个 div，一个 id 为 box1，一个 id 为 box2
```### 1.2 只选择 box2 中的第二个 span (hhh2):```javascript
// 方法1：使用 CSS 选择器
const secondSpan = document.querySelector("#box2 span:nth-child(4)");
// 或
const secondSpan = document.querySelectorAll("#box2 span")[1];
secondSpan.textContent = "iii2";// 方法2：使用 DOM 遍历
const box2 = document.getElementById("box2");
const spans = box2.getElementsByTagName("span");
spans[1].textContent = "iii2";
```### 1.3 选择所有 span 元素并修改:```javascript
// 选择所有 span 元素
const allSpans = document.querySelectorAll("span");// 遍历并修改每一个
allSpans.forEach(span => {span.textContent = "iii2";
});// 或使用 for 循环
for (let i = 0; i < allSpans.length; i++) {allSpans[i].textContent = "iii2";
}
```

## 2. DOM 节点关系与选择方法

针对你的文件，以下是访问各种节点关系的代码示例:

### 子节点 (Child Nodes)

```javascript
// 获取 box1 的所有子节点（包括文本节点和注释）
const box1 = document.getElementById("box1");
const box1Children = box1.childNodes;
console.log(box1Children); 
// NodeList 包含所有子节点，包括文本节点和注释

// 只获取元素子节点（不包括文本节点和注释）
const box1ElementChildren = box1.children;
console.log(box1ElementChildren);
// HTMLCollection 只包含元素节点：p, span, em
```

### 后代节点 (Descendant Nodes)

```javascript
// 获取 body 下所有的 span 元素（后代，不限于直接子元素）
const allBodySpans = document.querySelectorAll("body span");
console.log(allBodySpans);
// NodeList 包含 body 下所有 span，无论层级深度

// 另一种获取特定后代的方式
const spanInBox2 = document.querySelectorAll("#box2 span");
console.log(spanInBox2);
```

### 父节点 (Parent Node)

```javascript
// 获取第一个 p 元素的父节点
const firstP = document.querySelector("p");
const parentOfP = firstP.parentNode;
console.log(parentOfP); // 是 box1 div

// 或者
console.log(firstP.parentElement);
```

### 兄弟节点 (Sibling Nodes)

```javascript
// 获取 box1 中 p 元素的下一个兄弟元素
const pInBox1 = document.querySelector("#box1 p");
const nextSibling = pInBox1.nextElementSibling;
console.log(nextSibling); // 是 span 元素

// 获取 box1 中 em 元素的上一个兄弟元素
const emInBox1 = document.querySelector("#box1 em");
const prevSibling = emInBox1.previousElementSibling;
console.log(prevSibling); // 是 span 元素

// 注意：nextSibling 和 previousSibling 会包含文本节点
// 而 nextElementSibling 和 previousElementSibling 只包含元素节点
```

这些方法允许你在 DOM 树中精确导航，根据节点之间的关系选择特定元素。与 CSS 选择器不同，这些 DOM 属性提供了更细粒度的控制和访问。