如何在JavaScript对象中存储DOM元素层级结构？

问题背景 #

在前端开发中，操作大量DOM元素时，逐个给元素绑定独立变量会导致命名愈发混乱，比如：

const header = document.querySelector('header')
const headerWrapper = header.querySelector('.header-wrapper')
const headerH1 = headerWrapper.querySelector('h1')
const headerH2 = headerWrapper.querySelector('h2')
// etc...

我曾尝试用普通对象模拟层级结构，虽然能实现homePage.header.h1这类简洁引用，但存在两个明显缺陷：

• 父节点必须单独设置键才能引用，无法复用已获取的节点
• 对象初始化阶段无法自引用，不能用h1: this.headerContainer.querySelector('h1')，只能重复编写完整选择器：

const homePage = {
    headerContainer: document.querySelector('header'),
    headerWrapper: document.querySelector('header>.header-wrapper'),
    header: {
        h1: document.querySelector('header>.header-wrapper>h1'),
        h2: document.querySelector('header>.header-wrapper>h2'),
    }
}
// 使用方式
homePage.header.h1.innerText = "New Header Text"

解决方案：用类实现层级化DOM引用 #

通过类的构造函数，先获取父节点再基于父节点查询子元素，完美解决自引用和重复选择器的问题，同时保持简洁的层级调用语法：

class Page {
    constructor(body = document.querySelector('body')) {
        this.header = body.querySelector('header')
        this.header.h1 = this.header.querySelector('h1')
    }
}

// 实例化使用
const homePage = new Page()
homePage.header.style.backgroundColor='yellow'
homePage.header.h1.textContent = "Hello World"

这种方式的优势：

• 基于已获取的父节点查询子元素，避免重复编写长选择器，性能更优
• 层级结构自然清晰，调用语法直观易懂
• 构造函数中可灵活扩展更多DOM节点，维护成本更低

内容的提问来源于stack exchange，提问作者HotSauceCoconuts