第二十七天：DOM 操作 — 用 JS 让页面"活"起来
蜗牛往上爬 · 前端工业可视化学习笔记 第 27 篇
之前学的 JS 都跑在"控制台"里，和页面没有关系。今天学 DOM——浏览器把 HTML 解析成节点树，JS 通过操作这棵树来修改页面。获取元素、改内容、改样式、增删节点，最后用 JS 渲染一个设备列表。这是让大屏"动"起来的第一步。
目录
一、什么是 DOM
DOM（Document Object Model）：浏览器把 HTML 解析成一棵"节点树"。
document
└── html
├── head → meta, title
└── body
├── h1#title
├── div.device-card
├── ul.device-list
└── footer
JS 操作 DOM = 操作这棵树 = 修改页面。
二、获取元素
<body>
<h1 id="title">智慧工厂监控</h1>
<div class="device-card" data-id="CNC-001">数控机床</div>
<div class="device-card" data-id="AGV-002">搬运机器人</div>
</body>
// ===== 单个元素 =====
var title = document.getElementById("title"); // 按 id
var firstCard = document.querySelector(".device-card"); // CSS 选择器，第一个
// ===== 多个元素 =====
var cards = document.getElementsByClassName("device-card"); // 类数组 HTMLCollection
var allCards = document.querySelectorAll(".device-card"); // NodeList，推荐
console.log(allCards.length); // 2
allCards.forEach(function (card) { // NodeList 可以 forEach
console.log(card.textContent);
});
// 找不到：单个返回 null，多个返回空 NodeList
console.log(document.getElementById("not-exist")); // null
推荐：统一用
querySelector/querySelectorAll——CSS 选择器最灵活，不用记多种 API。
三、修改内容与属性
var title = document.getElementById("title");
// ===== 文本内容 =====
title.textContent = "智慧工厂监控平台 V2.0"; // 纯文本，安全（推荐）
// title.innerHTML = "<span>HTML</span>"; // 解析 HTML（慎用，防 XSS）
// ===== 属性 =====
var card = document.querySelector(".device-card");
card.setAttribute("data-status", "运行中");
console.log(card.getAttribute("data-status")); // "运行中"
card.removeAttribute("data-status");
// ===== 类名（最常用）=====
card.classList.add("is-active"); // 添加
card.classList.remove("is-active"); // 删除
card.classList.toggle("is-active"); // 切换（有删无加）
card.classList.contains("is-active"); // 检查
四、修改样式
var title = document.getElementById("title");
// 方式一：直接改 style（内联样式，优先级最高）
title.style.color = "#00d4ff";
title.style.fontSize = "24px"; // ⭐ CSS 的 font-size → JS 的 fontSize（驼峰）
// 方式二：切换 class（推荐，样式集中在 CSS）
// CSS: .is-warning { color: red; }
title.classList.add("is-warning");
取舍：动态小改动用 style，状态切换用 classList（好维护）。
五、创建与插入节点
// 创建元素
var newCard = document.createElement("div");
newCard.className = "device-card";
newCard.textContent = "新设备 CNC-005";
// 插入（4 种方式）
var list = document.querySelector(".device-list");
list.appendChild(newCard); // 尾部追加
// list.prepend(newCard); // 头部插入
// list.insertBefore(newCard, ref); // 插到某元素前
// 删除
// list.removeChild(newCard); // 父元素删除
newCard.remove(); // 自己删除（推荐）
// 复制
var copy = newCard.cloneNode(true); // true 深拷贝
list.appendChild(copy);
六、用 JS 渲染设备列表
这是工业大屏最核心的场景：数据在 JS 里，页面展示靠 DOM 渲染。
var devices = [
{ id: "CNC-001", name: "数控机床", temp: 65, status: "运行中" },
{ id: "AGV-002", name: "搬运机器人", temp: 42, status: "待机" },
{ id: "CNC-004", name: "加工中心", temp: 0, status: "故障" }
];
/**
* 渲染设备列表
* @param {Array} data 设备数组
*/
function renderDeviceList(data) {
var list = document.getElementById("device-list");
list.innerHTML = ""; // 先清空
data.forEach(function (device) {
var card = document.createElement("div");
card.className = "device-card";
card.setAttribute("data-id", device.id);
// 状态样式：故障红，其他绿
var statusClass = device.status === "故障" ? "danger" : "normal";
card.innerHTML =
"<div class='device-card__header'>" +
"<span class='device-card__name'>" + device.name + "</span>" +
"<span class='device-card__status--" + statusClass + "'>" +
device.status + "</span>" +
"</div>" +
"<div class='device-card__temp'>温度：" + device.temp + "°C</div>";
list.appendChild(card);
});
}
renderDeviceList(devices);
渲染三步：清空（innerHTML = ""）→ 遍历数据创建元素 → appendChild。
七、常见属性速查
var card = document.querySelector(".device-card");
// 节点关系
card.parentElement; // 父元素
card.children; // 子元素集合
card.firstElementChild; // 第一个子元素
card.nextElementSibling; // 下一个兄弟
// 尺寸位置
card.offsetWidth; // 宽（含 padding/border）
card.clientWidth; // 宽（含 padding，不含 border）
card.getBoundingClientRect().top; // 距视口顶部
// 表单值
var input = document.getElementById("search");
input.value; // 输入框的值
八、总结
🎯 DOM 让 JS 能操作页面。明天学"事件"——让页面能响应你的点击和输入，这是交互的起点。