技术演进中的开发沉思-195 JavaScript： Prototype的DOM 与 CSS-css-CSS教程网

技术演进中的开发沉思-195 JavaScript： Prototype的DOM 与 CSS

在前端开发中，动态操作 DOM和控制样式布局是实现交互功能的核心。Prototype 框架在原生 DOM API 的基础上，封装了一系列简洁高效的方法，让开发者能轻松实现节点遍历、内容修改、样式控制等复杂操作。本节课将深入学习 Prototype 的 DOM 导航、内容操作和样式布局技巧，最终通过实战开发一个可交互的动态组件。

一、DOM 导航

DOM 树就像一个嵌套的家族图谱，要操作某个节点，首先需要精准定位它。Prototype 提供了一套直观的 "导航方法"，让我们能像 "找亲戚" 一样遍历 DOM 树。

1. 向上导航

① `ancestors([selector])`：获取所有祖先节点

返回当前节点的所有祖先（从父节点到<html>），可选参数selector用于筛选符合 CSS 选择器的祖先。

示例 HTML：

<div class="container">
  <div class="box">
    <p class="text">目标文本</p>
  </div>
</div>

var text = $$('.text')[0]; // 获取p.text元素

// 获取所有祖先节点
var allAncestors = text.ancestors(); 
// 结果：[div.box, div.container, body, html]

// 筛选class为container的祖先
var containerAncestor = text.ancestors('.container'); 
// 结果：[div.container]

② `up([selector|index])`

返回当前节点向上最近的一个祖先，支持通过选择器筛选或索引指定（如up(2)返回上两级祖先）。

var text = $$('.text')[0];

// 最近的div祖先
var nearestDiv = text.up('div'); 
// 结果：div.box

// 上两级祖先（跳过父节点div.box，取其父亲）
var grandParent = text.up(2); 
// 结果：div.container

2. 向下导航

① `descendants([selector])`

返回当前节点的所有后代（子节点、孙节点等），可选选择器筛选。

示例 HTML：

<ul id="list">
  <li class="item">Item 1</li>
  <li class="item">Item 2
    <ul class="subList">
      <li>Subitem 1</li>
    </ul>
  </li>
</ul>

var list = $('list');

// 获取所有后代节点
var allDescendants = list.descendants(); 
// 结果：[li.item, text, li.item, text, ul.subList, li, text]

// 筛选所有li后代
var allLis = list.descendants('li'); 
// 结果：[li.item, li.item, li]

② `down([selector|index])`

返回当前节点向下最近的一个后代（默认第一个子节点），支持选择器或索引筛选。

var list = $('list');

// 第一个li后代
var firstLi = list.down('li'); 
// 结果：li.item（第一个li）

// 索引为1的后代（第二个子节点）
var secondChild = list.down(1); 
// 结果：li.item（第二个li）

3. 同级导航

除了上下导航，Prototype 还提供next([selector])（下一个兄弟）和previous([selector])（上一个兄弟）方法：

var firstItem = $$('.item')[0]; // 第一个li.item

// 下一个兄弟节点
var nextSibling = firstItem.next(); 
// 结果：li.item（第二个li）

// 上一个兄弟节点（第一个li没有上一个，返回null）
var prevSibling = firstItem.previous(); 
// 结果：null

导航方法的实战价值

这些方法解决了原生 DOM 遍历的繁琐（如parentNode、childNodes需手动循环筛选），让定位节点更高效。例如：在电商页面中，点击商品图片后，通过up('.product')快速找到整个商品容器，再通过down('.price')获取价格信息。

二、内容操作

网页交互的核心是 "内容变化"—— 比如新增评论、删除列表项、替换显示内容等。Prototype 提供了一套直观的内容操作方法，简化这些场景的实现。

1. `update(content)`

替代原生innerHTML，支持直接设置文本或 HTML，自动处理特殊字符（一定程度防 XSS）。

var box = $('box');

// 更新为文本
box.update('新的文本内容'); 

// 更新为HTML
box.update('<p>带标签的内容</p>'); 

// 清空内容
box.update('');

2. `insert(position, content)`

在节点的指定位置插入新内容，支持的位置参数：

'before'：节点之前；
'after'：节点之后；
'top'：节点内部的开头；
'bottom'：节点内部的结尾（默认）。

示例：在列表中插入新项

<ul id="todoList">
  <li>学习DOM导航</li>
</ul>

var todoList = $('todoList');

// 在列表末尾添加（默认bottom）
todoList.insert('<li>学习内容操作</li>'); 

// 在列表开头添加（top）
todoList.insert({ top: '<li>学习Prototype基础</li>' }); 

// 在列表前插入说明（before）
todoList.insert({ before: '<p>待办事项：</p>' });

插入后结果：

<p>待办事项：</p>
<ul id="todoList">
  <li>学习Prototype基础</li>
  <li>学习DOM导航</li>
  <li>学习内容操作</li>
</ul>

3. `remove()`

彻底从 DOM 中移除当前节点。

// 删除列表中第二个项
var secondItem = $$('#todoList li')[1];
secondItem.remove();

4. `replace(content)`

用新内容替换当前节点。

var oldItem = $$('#todoList li')[0];
// 用新li替换旧li
oldItem.replace('<li>更新后的学习内容</li>');

内容操作的链式调用

Prototype 的方法支持链式调用，可组合实现复杂操作：

// 找到列表，清空内容，再添加两个新项
$('todoList')
  .update('') // 清空
  .insert('<li>链式调用1</li>') // 添加第一项
  .insert('<li>链式调用2</li>'); // 添加第二项

三、样式与布局

除了内容，页面的样式和布局动态调整（如高亮选中项、弹窗定位、尺寸自适应）也是交互的重要部分。Prototype 提供了一系列方法简化样式控制和布局操作。

1. 类名管理

通过类名（class）管理样式是前端开发的最佳实践，Prototype 提供便捷的类名操作方法：

方法名	功能	示例
`addClassName(class)`	添加类名（重复添加无效）	`$('box').addClassName('active')`
`removeClassName(class)`	移除类名	`$('box').removeClassName('active')`
`toggleClassName(class)`	切换类名（有则移除，无则添加）	`$('box').toggleClassName('active')`
`hasClassName(class)`	判断是否包含类名	`if ($('box').hasClassName('active'))`

示例：点击按钮切换元素高亮状态

<style>
  .highlight { background: yellow; border: 2px solid orange; }
</style>
<div id="box">点击按钮切换高亮</div>
<button id="toggleBtn">切换高亮</button>

$('toggleBtn').observe('click', function() {
  $('box').toggleClassName('highlight'); // 点击一次添加，再点击移除
});

2. 内联样式控制：`setStyle()`与`getStyle()`

直接操作元素的style属性，适合动态设置单个样式（如尺寸、位置）。

① `setStyle(styles)`：设置内联样式

接收一个样式对象（键为 CSS 属性名，支持驼峰式或短横线式）。

$('box').setStyle({
  color: 'blue', // 文字颜色
  fontSize: '16px', // 驼峰式（对应CSS的font-size）
  'background-color': '#f0f0f0' // 短横线式（需加引号）
});

② `getStyle(prop)`：获取计算后样式

返回元素最终应用的样式值（综合了类名、内联样式等）。

var fontSize = $('box').getStyle('font-size'); // 如"16px"
var bgColor = $('box').getStyle('background-color'); // 如"rgb(240, 240, 240)"

3. 定位操作：`makePositioned()`与`absolutize()`

在实现弹窗、拖拽等功能时，需要精确控制元素定位。Prototype 提供了两个便捷方法：

makePositioned()：将元素设置为position: relative（若本身不是定位元素），作为绝对定位子元素的容器；
absolutize()：将元素设置为position: absolute，并自动计算top和left值（基于最近的定位祖先）。

示例：在容器内添加绝对定位的弹窗

<div id="container" style="width: 300px; height: 200px; border: 1px solid #***c;">
  容器
</div>

// 1. 将容器设为相对定位（作为弹窗的定位基准）
$('container').makePositioned();

// 2. 创建弹窗并设置为绝对定位
var popup = new Element('div', { 
  className: 'popup',
  html: '这是弹窗'
});
document.body.insert(popup);

// 3. 将弹窗定位到容器的(20, 20)位置
popup.absolutize() // 设置为绝对定位
     .setStyle({
       top: '20px',
       left: '20px',
       width: '100px',
       height: '50px',
       background: 'white',
       border: '1px solid #333'
     });

4. 尺寸获取：`getDimensions()`

获取元素的宽高信息（包含内容、内边距、边框），返回包含width和height的对象，适合响应式布局。

var container = $('container');
var dims = container.getDimensions(); 
// 结果：{ width: 300, height: 200 }（对应CSS设置的宽高）

// 动态调整元素尺寸为容器的一半
$('box').setStyle({
  width: (dims.width / 2) + 'px',
  height: (dims.height / 2) + 'px'
});

四、开发动态待办事项组件

需求说明

实现一个可交互的待办事项（Todo）组件，包含以下功能：

输入框输入内容，点击 "添加" 按钮新增待办项；
点击待办项，切换 "完成" 状态（添加删除线和灰色样式）；
每个待办项右侧有 "删除" 按钮，点击可移除该项；
底部显示 "已完成 X/Y 项" 的统计信息。

实现步骤

1. HTML 结构与基础样式

<div id="todoApp" style="width: 300px; margin: 20px auto;">
  <h3>待办事项</h3>
  <div class="inputArea">
    <input type="text" id="todoInput" placeholder="输入待办内容">
    <button id="addBtn">添加</button>
  </div>
  <ul id="todoList"></ul>
  <div class="stats" style="margin-top: 10px; font-size: 14px;">
    已完成 <span id="***pletedCount">0</span>/<span id="totalCount">0</span> 项
  </div>
</div>

<style>
  .todo-item { padding: 5px; margin: 3px 0; border: 1px solid #ddd; }
  .todo-item.***pleted { color: #999; text-decoration: line-through; }
  .delete-btn { margin-left: 10px; color: red; cursor: pointer; font-size: 12px; }
</style>

2. JavaScript 实现逻辑

document.observe('dom:loaded', function() {
  // 获取元素
  var input = $('todoInput');
  var addBtn = $('addBtn');
  var todoList = $('todoList');
  var ***pletedCountEl = $('***pletedCount');
  var totalCountEl = $('totalCount');

  // 统计更新函数
  function updateStats() {
    var total = todoList.descendants('.todo-item').length; // 总项数
    var ***pleted = todoList.descendants('.todo-item.***pleted').length; // 已完成项数
    ***pletedCountEl.update(***pleted);
    totalCountEl.update(total);
  }

  // 1. 添加待办项
  function addTodo(text) {
    if (!text.trim()) return; // 空内容不添加

    // 创建待办项元素
    var todoItem = new Element('li', { className: 'todo-item' })
      .update(`
        ${text}
        <span class="delete-btn">删除</span>
      `);

    // 添加到列表
    todoList.insert({ bottom: todoItem });

    // 2. 绑定点击事件（切换完成状态）
    todoItem.observe('click', function(e) {
      // 排除删除按钮的点击（避免触发切换）
      if (!e.target.hasClassName('delete-btn')) {
        todoItem.toggleClassName('***pleted');
        updateStats(); // 更新统计
      }
    });

    // 3. 绑定删除按钮事件
    todoItem.down('.delete-btn').observe('click', function() {
      todoItem.remove(); // 删除项
      updateStats(); // 更新统计
    });

    // 清空输入框
    input.value = '';
    // 更新统计
    updateStats();
  }

  // 绑定添加按钮点击事件
  addBtn.observe('click', function() {
    addTodo(input.value);
  });

  // 支持回车键添加
  input.observe('keypress', function(e) {
    if (e.keyCode === 13) { // 回车键
      addTodo(input.value);
    }
  });
});

代码解析

DOM 导航：用descendants('.todo-item')获取所有待办项，down('.delete-btn')定位删除按钮；
内容操作：用new Element()创建新节点，insert()添加到列表，remove()删除节点，update()更新统计数字；
样式控制：用toggleClassName('***pleted')切换完成状态的样式；
事件绑定：结合observe()为动态创建的元素绑定点击事件，实现交互功能。

这个组件完整体现了 "DOM 导航→内容操作→样式控制" 的联动逻辑，是前端交互开发的典型模式。

五、最后小结

Prototype 的 DOM 与 CSS 操作方法，本质是对原生 DOM API 的 "人性化封装"，其核心优势在于：

简化代码：用$('id')替代getElementById，用down()替代多层childNodes筛选，大幅减少代码量；
链式调用：方法返回元素本身，支持连续操作（如element.addClassName().setStyle().update()）；
兼容性处理：内部处理了不同浏览器的 DOM 差异（如 IE 的事件模型、样式获取方式），开发者无需关注底层兼容；
逻辑清晰：将 DOM 操作分解为 "导航→操作→样式" 三个维度，符合人类思维习惯。

这些特性让 Prototype 在 2000 年代成为前端开发的重要工具，也为后续 jQuery 的 "Write Less, Do More" 理念奠定了基础。

转载请说明出处内容投诉
CSS教程网 » 技术演进中的开发沉思-195 JavaScript： Prototype的DOM 与 CSS

神码牛

分享到：

一、DOM 导航

1. 向上导航

① ancestors([selector])：获取所有祖先节点

② up([selector|index])

2. 向下导航

① descendants([selector])

② down([selector|index])