[思源笔记经验分享] HTML 块中获得自身的 DOM 节点

背景

由于思源 HTML 块是使用 shadow DOM 嵌入笔记 DOM 树中的, 因此在 HTML 块中使用 <script> 标签插入的脚本没法简单获取块本身的 DOM。

解决方案

原理: 由于思源所有带编辑框的块都有一个 HTML 属性 data-content, 里面存放编辑框转义后的内容, 因此可以通过 CSS 的 CSS3 [attribute*=value] 选择器 查询到当前块, 直接上代码

<script>
    /* 使用括号划分一下作用域, 避免函数的重定义 */
    {
        /* 自定义 ID, 每个 HTML 块应该使用不同的 ID */
        const CUSTOM_ID = "E5C1EC9E30C14616A1974670281D2800";

        /**
         * HTML 块中的脚本获取当前块相关信息
         * @params {string} customID 内部定义的 ID
         * @returns {string} id 当前 HTML 块 ID
         * @returns {HTMLElement} block 当前 HTML 块
         * @returns {HTMLElement} shadowRoot 当前 HTML 块 shadowRoot
         */
        function This(customID) {
            let protyle = document.querySelector(`protyle-html[data-content*="${customID}"]`);
            if (protyle) {
                let block = protyle.parentElement.parentElement;
                return {
                    id: block.dataset.nodeId,
                    block: block,
                    shadowRoot: protyle.shadowRoot,
                };
            } else return null;
        }
        const THIS = This(CUSTOM_ID);
        console.log(THIS);
    }
</script>
​