技术演进中的开发沉思-230 Ajax：Prototype.js 重构原生 DOM

原生 DOM 就像一套 "基础工具包"------ 能完成元素获取、节点遍历等核心操作，但每一步都需手写冗长代码，还要手动过滤无用节点、处理浏览器差异，如同用手工锯切割木板，效率低且易出错。而 Prototype.js 对 DOM 元素的扩展，本质是给这套 "基础工具包" 升级为 "智能工具箱"：通过灵活的扩展方式，让原生 DOM 元素拥有开箱即用的便捷方法；通过精准的导航方法，让 DOM 遍历从 "逐行摸索" 变成 "精准定位"。它没有颠覆原生 DOM 规则，却用更优雅的封装，重塑了前端开发者操作 DOM 的方式。

一、 DOM 元素扩展方式

Prototype.js 的核心思路是 "增强而非替换"------ 它不会修改原生 DOM 的底层逻辑，而是为 DOM 元素附加一层 "方法扩展层"。无论是获取已有元素，还是创建新元素，都能通过四种核心方式，让普通 DOM 元素自动或手动获得 Prototype 封装的便捷能力（如样式修改、事件绑定、节点遍历）。

1.1、单元素获取与扩展

原生 document.getElementById() 仅能返回一个原始 DOM 节点，要修改样式、绑定事件，需额外编写多行代码；而 Prototype 的 $() 是兼具 "获取" 与 "增强" 的双重工具：

• 核心特性 ：传入元素 ID 字符串（如 'contentBox'）或已有的 DOM 元素引用，返回扩展后的 DOM 元素 ------ 该元素保留原生所有属性，同时新增 setStyle、addClassName 等 Prototype 专属方法；
• 容错设计 ：若传入的 ID 不存在，返回 null 而非直接报错，避免代码执行中断；
• 多元素支持 ：可传入多个 ID，一次性返回包含多个扩展元素的数组，省去多次调用 getElementById 的繁琐。

// 原生操作：获取+修改样式（繁琐且冗余）
const box = document.getElementById('contentBox');
box.style.backgroundColor = '#f0f0f0';
box.style.padding = '15px';

// Prototype $()：获取即扩展，链式调用更简洁
const box = $('contentBox');
box.setStyle({ backgroundColor: '#f0f0f0', padding: '15px' });

// 多ID批量获取
const [btn, input, list] = $('submitBtn', 'userInput', 'itemList');

$() 的价值在于 "一步到位"：从获取元素到拥有进阶操作能力，无需额外步骤，大幅降低了单元素操作的心智负担。

1.2：批量元素选择与扩展

原生 DOM 中批量获取元素，需用 getElementsByTagName/getElementsByClassName，且返回的是 "HTMLCollection"（类数组对象），无法直接调用 forEach 等数组方法；而 Prototype 的 `

\(()` 彻底解决了这一痛点： * **核心特性**：支持 CSS 选择器（涵盖 CSS3 特性，如 `[type="text"]`、`.item:nth-child(2)`），返回**扩展后的元素数组**------ 每个元素均被自动增强，且数组可直接使用 `forEach`、`map` 等方法； * **场景适配**：无论是类选择器、标签选择器，还是组合选择器，都能精准匹配，覆盖所有批量元素操作场景。 ```javascript // 原生批量操作：需手动转换为数组，且无扩展方法 const items = document.getElementsByClassName('item'); Array.from(items).forEach(item => { item.style.color = '\#666'; }); // Prototype\)

()：批量获取+扩展，一步完成

\(('.item').forEach(item => { item.setStyle({ color: '\#666' }); // 每个item均为扩展元素 }); // CSS3选择器：定位所有偶数行列表项\)

`$$()` 是早期前端 "选择器范式" 的先驱，它让批量 DOM 操作从 "繁琐的遍历 + 转换" 变成 "一行代码搞定"，也为后续 jQuery 选择器的设计提供了核心参考。

### 1.1.3 `Element.extend()`：手动扩展的 "灵活开关"

在部分场景中，开发者可能通过原生方法（如 `document.querySelector`）获取元素，或手动创建新元素（如 `document.createElement`），此时需要主动为这些元素添加 Prototype 扩展方法 ------`Element.extend()` 就是这个 "灵活开关"：

* **核心特性**：接收一个原生 DOM 对象，返回扩展后的元素，仅针对传入元素生效，不修改全局 DOM 原型，避免污染；
* **使用场景**：适配 "原生获取 + Prototype 增强" 的混合开发模式，兼顾灵活性与兼容性。

```javascript
// 原生创建元素，手动扩展能力
const newBtn = document.createElement('button');
Element.extend(newBtn); // 手动触发扩展

// 直接调用扩展方法
newBtn.setText('提交');
newBtn.addClassName('primary-btn');
document.body.appendChild(newBtn);

1.3 Element 构造函数

除了扩展已有元素，Prototype 还支持直接通过 Element 构造函数创建新元素，且创建的元素自动完成扩展：

• 核心特性 ：new Element(tagName, attributes)，第一个参数为标签名（如 'input'），第二个参数为元素属性（如 id、class、style），一步完成 "创建 + 属性配置 + 方法扩展"；
• 优势 ：无需手动调用 Element.extend()，也无需逐行设置属性，大幅简化新元素创建流程。

// 原生创建元素：多步操作，繁琐且易漏
const newInput = document.createElement('input');
newInput.id = 'userName';
newInput.type = 'text';
newInput.placeholder = '请输入姓名';

// Prototype Element构造函数：一站式创建
const newInput = new Element('input', {
  id: 'userName',
  type: 'text',
  placeholder: '请输入姓名'
});
newInput.setStyle({ width: '200px' }); // 直接调用扩展方法
document.body.appendChild(newInput);

二、 DOM 导航方法

原生 DOM 遍历依赖 parentNode、childNodes、nextSibling 等属性，不仅要手动过滤文本节点、注释节点，还要逐层遍历，代码冗长且易出错。Prototype 封装了一套完整的 DOM 导航方法，如同给 DOM 树装上 "导航系统"，只需指定 "目的地"（选择器 / 索引），就能精准定位节点，还支持链式调用，让复杂遍历变得简洁。

2.1、核心遍历方法

这四个方法是 DOM 导航的核心，覆盖 "向上找父节点、向下找子节点、向后找下一个兄弟、向前找上一个兄弟" 四大基础场景，均支持 CSS 选择器和索引筛选，灵活性拉满：

• up(selector, index)：向上查找匹配选择器的祖先节点，index 指定返回第几个匹配节点（默认第一个）；
• down(selector, index)：向下查找匹配选择器的子节点；
• next(selector, index)：向后查找匹配选择器的下一个兄弟节点；
• previous(selector, index)：向前查找匹配选择器的上一个兄弟节点；
• 链式调用：四个方法可组合使用，实现复杂路径的节点定位。

<div id="container" class="box">
  <ul class="list">
    <li class="item">item1</li>
    <li class="item active">item2</li>
    <li class="item">item3</li>
  </ul>
</div>

// 原生遍历：找到active项的父级.box（需逐层判断，繁琐）
const activeItem = document.querySelector('.active');
let container = null;
let currentNode = activeItem.parentNode;
while (currentNode) {
  if (currentNode.classList.contains('box')) {
    container = currentNode;
    break;
  }
  currentNode = currentNode.parentNode;
}

// Prototype导航：链式调用，一步定位
const container = $$('.active')[0].up('.box');

// down方法：找到container下第一个li元素
const firstItem = $('container').down('li', 0);

// next方法：找到active项的下一个兄弟item
const nextItem = $$('.active')[0].next('.item');

2.2、 批量遍历方法

若需批量获取某一类节点（如所有祖先、所有子节点），Prototype 提供了批量遍历方法，避免手动循环过滤：

• ancestors(selector)：收集元素所有祖先节点（从父节点到 <html>），支持选择器过滤，返回扩展元素数组；
• descendants(selector)：收集元素所有后代节点（所有层级），支持选择器过滤；
• childElements(selector)：收集元素的直接子元素（仅一级），自动过滤文本 / 注释节点，返回扩展元素数组（原生 childNodes 会包含非元素节点，需手动处理）；
• immediateDescendants()：childElements() 的别名，功能完全一致；
• firstDescendant()：返回元素的第一个子元素（自动过滤空节点）。

// 原生获取直接子元素：需手动过滤文本节点
const list = document.querySelector('.list');
const childItems = [];
for (let i = 0; i < list.childNodes.length; i++) {
  if (list.childNodes[i].nodeType === 1) { // 仅保留元素节点
    childItems.push(list.childNodes[i]);
  }
}

// Prototype childElements()：直接获取过滤后的子元素
const childItems = $$('.list')[0].childElements();

// ancestors()：获取active项的所有.box类祖先节点
const activeAncestors = $$('.active')[0].ancestors('.box');

2.3、 特殊导航方法

除基础遍历外，Prototype 还提供了适配特殊场景的导航方法：

• adjacent(selector)：查找匹配选择器的所有兄弟节点（不分前后），弥补 next/previous 单方向查找的不足；
• descendantOf(element)：判断当前元素是否为指定元素的后代节点，返回布尔值，简化 "节点归属判断"。

// adjacent()：找到active项的所有兄弟item节点
const siblings = $$('.active')[0].adjacent('.item');

// descendantOf()：判断active项是否是container的后代
const isDescendant = $$('.active')[0].descendantOf($('container')); // 返回true

最后小结

Prototype.js 对 DOM 元素的扩展，并非简单的 "语法糖"，而是对原生 DOM 操作逻辑的 "重构"：

• 从 "繁琐操作" 到 "极简调用"：把原生需多步完成的操作（如获取 + 修改样式、创建 + 配置元素）浓缩为一行代码，降低开发成本；
• 从 "盲遍历" 到 "精准导航"：用选择器 + 导航方法替代逐层遍历，让 DOM 节点定位更精准、代码更易读；
• 从 "零散方法" 到 "体系化封装"：形成 "扩展 + 导航" 的完整 DOM 操作体系，为后续 jQuery 等框架的 DOM 设计奠定了核心范式。

即便在 "数据驱动 DOM" 的现代前端框架时代，Prototype.js 留下的 "优雅封装、精准操作" 理念依然适用 ------ 好的前端工具，从来不是颠覆原生逻辑，而是在原生基础上，让开发者用更少的代码、更低的心智负担，完成更复杂的操作。这也是 Prototype.js 能成为早期前端开发标杆的核心原因。