研发Web Components库，深入探究DOM 节点之间的关系

myzbx 2025-09-12 00:23 43 浏览

hi，朋友，您来啦。带上小板凳，我们一起瞅一瞅今天的话题。

摘要：本文主要包含节点属性、节点方法、获取元素文本节点、查找最近的父级元素、查找所有祖先元素、查找所有兄弟元素、关联元素等。

前言

在研发 Web Components 库时，理解和管理 DOM（Document Object Model）节点之间的父子关系是非常重要的。这有助于你创建可复用、封装良好的 UI 组件。

问题：以下代码哪些输出true，哪些输出false，还是其它情况？

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <shadow-host>
        #shadow-root
            <div>123</div>
        <label>567</label>
    </shadow-host>
</body>
</html>

JavaScript

// 假设所有元素都有子元素
const shadowHost = document.querySelector('shadow-host');
console.log([
		// 基本
    document.body.parentElement === document, // ？
    document.body.parentElement === document.documentElement, // ？
    document.body.firstChild.parentElement  === document.body, // ？

		// Web Components：shadow-root open
    shadowHost.firstChild.parentElement === shadowHost, // ？
    shadowHost.shadowRoot.parentElement === shadowHost, // ？
    shadowHost.shadowRoot.host === shadowHost, // ？
    shadowHost.shadowRoot === shadowHost.firstChild, // ？

		// Web Components：shadow-root closed
    shadowHost.firstChild.parentElement === shadowHost, // ？
    shadowHost.shadowRoot.parentElement === shadowHost, // ？
    shadowHost.shadowRoot.host === shadowHost, // ？
    shadowHost.shadowRoot === shadowHost.firstChild, // ？
]);

DOM节点属性

以上节点属性不是全部，其主要包括：children、childNodes、firstChild、firstElementChild、lastChild、lastElementChild、previousSibling、previousElementSibling、nextSibling、nextElementSibling、parentNode、parentElement、nodeType、textContent、innerHTML、innerText等等。

DOM节点方法

其主要包括：before、after、append、appendChild、insertBefore、remove、removeChild、replaceChild等等。

获取元素文本节点

在原子可视化设计工具项目中，通常需要在属性面板内修改元素的文本内容。我们利用NodeType属性可以很轻松的做到这点。

JavaScript

function getFirstTextChild(element) {
    let child = element.firstChild;
    while (child) {
        if (child.nodeType === Node.TEXT_NODE) {
            return child;
        }
        child = child.nextSibling;
    }
    return null; // 如果没有找到文本节点则返回null
}

最后获取或修改 textContent 属性即可。

查找最近的父级元素

从传递进来的元素开始，向上遍历DOM树，直到找到匹配的选择器的元素或到达文档的根元素为止。

手动实现

JavaScript

/**
 * 查找离给定元素最近的、匹配指定选择器的父元素。
 * 
 * @param {Element} element - 起始查找的 DOM 元素。
 * @param {string} selector - 用于匹配父元素的选择器字符串。
 * @returns {Element|null} 如果找到匹配的父元素，则返回该元素；否则返回 null。
 */
function findClosestParent(element, selector) {
    // 获取当前元素的直接父元素
    let parent = element.parentElement;

    // 当前父元素不为空时持续循环
    while (parent !== null) {
        // 使用 Element.matches 方法检查当前父元素是否匹配给定的选择器
        if (parent.matches(selector)) {
            // 如果匹配成功，则返回该父元素
            return parent;
        }

        // 如果当前父元素没有匹配成功，则继续向上查找
        parent = parent.parentElement;
    }

    // 如果遍历到根节点都没有找到匹配的父元素，则返回 null
    return null;
}

原生 closest 方法

原生的 Element.prototype.closest 函数是从 Element 的原型链上添加的方法，它可以用来查找最近的匹配指定 CSS 选择器的祖先元素。此方法在现代浏览器中广泛支持，但在较老的浏览器如 Internet Explorer 11 及更早版本中并不支持。

JavaScript

/**
 * 查找与给定选择器匹配的最近的祖先元素。
 * @param {Element} element - 开始搜索的 DOM 元素。
 * @param {string} selector - 用于匹配元素的选择器字符串。
 * @returns {Element|null} 匹配选择器的最近的祖先元素，如果没有找到则返回 null。
 */
function findClosestParent(element, selector) {
    // 检查传入的元素是否有效
    if (!element || element.nodeType !== Node.ELEMENT_NODE) {
        return null;
    }

    // 如果当前环境支持 closest 方法，则直接使用它
    if (element.closest) {
        return element.closest(selector);
    } else {
        // 否则，使用手动实现的方法
        return manualClosest(element, selector);
    }
}

/**
 * 手动实现 closest 方法的功能。
 * @param {Element} element - 开始搜索的 DOM 元素。
 * @param {string} selector - 用于匹配元素的选择器字符串。
 * @returns {Element|null} 匹配选择器的最近的祖先元素，如果没有找到则返回 null。
 */
function manualClosest(element, selector) {
    let parent = element; // 从当前元素开始

    // 当前元素为有效的 Element 节点并且不是文档根节点（即还有父节点）
    while (parent && parent.nodeType === Node.ELEMENT_NODE) {
        // 检查当前元素是否匹配选择器
        if (parent.matches(selector)) {
            return parent;
        }
        // 继续向上查找父元素
        parent = parent.parentElement;
    }

    // 如果没有找到匹配的祖先元素，则返回 null
    return null;
}

查找所有祖先元素

/**
 * 获取给定元素的所有祖先元素。
 * 
 * @param {Element} element - 要查找其祖先元素的 DOM 元素。
 * @returns {Element[]} 一个包含所有祖先元素的数组，从最近的祖先开始。
 */
function getAllAncestors(element) {
    // 初始化一个空数组来存储祖先元素
    const ancestors = [];

    // 从给定的元素开始，获取它的直接父元素
    let parent = element.parentElement;

    // 当父元素存在时循环
    while (parent) {
        // 把当前父元素添加到祖先数组中
        ancestors.push(parent);

        // 更新父元素为当前父元素的父元素，以便在下一次迭代中继续向上查找
        parent = parent.parentElement;
    }

    // 返回收集到的祖先元素数组
    return ancestors;
}

查找所有兄弟元素

/**
 * 获取指定元素的所有兄弟元素。
 * 
 * @param {Element} element - 要获取兄弟元素的目标元素。
 * @param {boolean} [includeTextNodes=false] - 是否包括文本节点在内的所有类型的节点，默认为 false。
 * @returns {Array} 包含所有兄弟元素的数组。
 */
function getAllSiblings(element, includeTextNodes = false) {
    const siblings = []; // 创建一个空数组来存放兄弟元素
    
    // 开始从目标元素的前一个兄弟元素开始遍历
    let sibling = element.previousSibling; // 获取目标元素的前一个兄弟元素
    while (sibling) { // 只要还有前一个兄弟元素
        // 如果 includeTextNodes 为 true 或者当前节点是元素节点，则将其添加到数组中
        if (includeTextNodes || sibling.nodeType === Node.ELEMENT_NODE) {
            siblings.push(sibling);
        }
        sibling = sibling.previousSibling; // 移动到下一个前兄弟元素
    }

    // 接下来遍历目标元素的后一个兄弟元素
    sibling = element.nextSibling; // 获取目标元素的后一个兄弟元素
    while (sibling) { // 只要还有后一个兄弟元素
        // 如果 includeTextNodes 为 true 或者当前节点是元素节点，则将其添加到数组中
        if (includeTextNodes || sibling.nodeType === Node.ELEMENT_NODE) {
            siblings.push(sibling);
        }
        sibling = sibling.nextSibling; // 移动到下一个后兄弟元素
    }

    return siblings; // 返回所有找到的兄弟元素组成的数组
}

关联元素

在原子可视化设计工具中，可拆分和自由组合的标签面板，是一个非常有趣的设计，可以为用户提供极大的灵活性。当用户对标签页进行排序、分拆、组合时，标签内容随之作相应的处理，此时我们可以借助WeakMap的特性，可以高效管理标签页和标签内容的关联关系。

JavaScript

// 初始化 WeakMap
const tabContentMap = new WeakMap();

// 获取标签页内容
function getTabContent(tabElement) {
    return tabContentMap.get(tabElement);
}

// 更新标签页内容
function updateTabContent(tabElement, newContentElement) {
    tabContentMap.set(tabElement, newContentElement);
}

// 删除标签页
function removeTab(tabElement) {
    tabContentMap.delete(tabElement);
}

希望本文能够对您有所帮助，感谢您的阅读！

DOM 方法

上一篇：GitHub大佬提出监听 DOM 的方式 Observer，瞬间引起业内热潮
下一篇：网络热门“伪DOM”生物_网络热门生僻字

研发Web Components库，深入探究DOM 节点之间的关系

前言

DOM节点属性

DOM节点方法

获取元素文本节点

查找最近的父级元素

查找所有祖先元素

查找所有兄弟元素

关联元素

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

这么牛逼的cursor功能，赶紧用起来

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿