NikiMunger

Posted on Nov 24

transition、组合选择器、.parentNode、.classList

#css #frontend #ui

transition

transition 用来在两个 CSS 状态之间平滑过渡

可过渡的属性

数值（width、height、opacity、margin 等）
颜色（background-color）
变换（transform）
以及其它明确可插值的属性。

timing-function（速度曲线）

linear：匀速
ease：默认（慢 — 快 — 慢）
ease-in：慢到快（起始慢）
ease-out：快到慢（结束慢）
ease-in-out：两头慢，中间快

组合选择器

.happy-fishing-indicator.red { ... }

它等于选择：

class 里同时包含
happy-fishing-indicator
且
red
的元素。

必须满足：

<div class="happy-fishing-indicator red"></div>

才能被选中。

组合选择器的好处

因为 indicator 本身有一个基础类：

indicator.className = 'happy-fishing-indicator';

再切换颜色时，程序只是动态增加第二个类：

indicator.classList.add('red');
indicator.classList.add('yellow');
indicator.classList.add('green');

.parentNode

.parentNode 是 DOM 节点对象的一个属性，表示当前节点的父节点。

语法

node.parentNode

返回一个 Node 对象，通常是：

一个元素节点（Element）
或者 document
或者 null（没有父节点时）

简单示例

<div id="box">
  <p id="text">Hello</p>
</div>

const text = document.getElementById('text');
console.log(text.parentNode);

输出：

<div id="box">...</div>

常见用途

删除自己（非常常见）

const btn = document.querySelector('.delete');

btn.onclick = () => {
  btn.parentNode.remove();  
};

父节点删除 → 整个子节点一起删除。

找到上层结构（如卡片、列表项）

const btn = document.querySelector('.close-btn');

btn.addEventListener('click', () => {
  const card = btn.parentNode; // 卡片容器
  card.classList.add('hidden');
});

.classList

.classList 是 DOM 元素的一个属性，返回一个类似数组的 DOMTokenList 对象，用来操作元素的 CSS class。

方法详解

add()
增加一个或多个 class：

el.classList.add('active');
el.classList.add('a', 'b', 'c'); // 一次添加多个

如果已经存在，不会重复添加。

remove()
删除一个或多个 class：

el.classList.remove('active');
el.classList.remove('a', 'b', 'c');

不存在也不会报错。

toggle()
如果存在 → 删除
如果不存在 → 添加

el.classList.toggle('active');

可传第二个参数：

el.classList.toggle('open', true);  // 强制添加
el.classList.toggle('open', false); // 强制删除

这在需要“强制状态”非常有用。

contains()
检测 class 是否存在：
```
if (el.classList.contains('selected')) {
  //...
}
```
返回 true / false。
replace()
替换 class：
```
el.classList.replace('old', 'new');
```
相比 remove + add 更简洁。

DEV Community