编写一个函数，将一个给定的 DOM 节点渲染成 HTML 字符串

推荐答案

-- -------------------- ---- -------
-------- ---------------- -
    -- -------------- --- --------------- -
        ------ -----------------
    -

    -- -------------- --- ------------------ -
        ------ ---
    -

    ----- ------- - ---------------------------
    ----- ---------- - ---------------------------
        --------- -- -------------------------------
        ------- ---

    ----- -------- - ---------------------------
        ---------- -- ------------------
        ----------

    ------ ------------------------ - - - - ---------- - ------------------------------
-

本题详细解读

1. 函数功能

nodeToHTML 函数的作用是将一个给定的 DOM 节点渲染成 HTML 字符串。它可以处理元素节点和文本节点，并递归处理子节点。

2. 代码解析

• 文本节点处理：如果传入的节点是文本节点（node.nodeType === Node.TEXT_NODE），则直接返回节点的文本内容（node.textContent）。

• 非元素节点处理：如果传入的节点不是元素节点（node.nodeType !== Node.ELEMENT_NODE），则返回空字符串。

• 元素节点处理：

  • 获取元素的标签名（node.tagName.toLowerCase()），并将其转换为小写。
  • 获取元素的所有属性（node.attributes），并将其转换为 name="value" 的字符串形式，然后拼接成一个字符串。
  • 递归处理元素的子节点（node.childNodes），并将子节点的 HTML 字符串拼接起来。
  • 最后将标签名、属性和子节点的 HTML 字符串拼接成一个完整的 HTML 元素字符串。

3. 使用示例

const div = document.createElement('div');
div.setAttribute('class', 'container');
div.innerHTML = '<p>Hello, World!</p>';
console.log(nodeToHTML(div));
// 输出: <div class="container"><p>Hello, World!</p></div>

4. 注意事项

• 该函数假设传入的节点是一个有效的 DOM 节点。如果传入的节点类型不支持（如注释节点、文档节点等），函数将返回空字符串。
• 该函数不处理自闭合标签（如 <img>、<br> 等），如果需要处理自闭合标签，可以在函数中添加额外的逻辑。