面试题：Svelte自定义Action中如何获取DOM元素

在Svelte自定义Action中，获取应用该Action的DOM元素很简单，在定义Action函数时，第一个参数即为该DOM元素。这个DOM元素的用途广泛，可以对其进行各种操作，比如修改样式、绑定事件、获取或设置属性等。

以下是实现一个简单的点击变色Action的代码示例：

<script>
    function clickToRed(node) {
        const handleClick = () => {
            node.style.color = 'red';
        };

        node.addEventListener('click', handleClick);

        return {
            destroy() {
                node.removeEventListener('click', handleClick);
            }
        };
    }
</script>

<button use:clickToRed>点击我变红</button>

在上述代码中：

定义了一个名为clickToRed的自定义Action函数，它接收node参数，这个node就是应用该Action的DOM元素。
在函数内部，定义了一个handleClick函数，当按钮被点击时，会将node（也就是按钮）的字体颜色设置为红色。
使用addEventListener为按钮绑定了点击事件。
返回一个对象，对象中有一个destroy函数，在组件销毁时，会移除之前绑定的点击事件，防止内存泄漏。
在button元素上使用use:clickToRed来应用这个自定义Action。

面试题：Svelte自定义Action中如何获取DOM元素

知识考点

面试题答案