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

推荐答案

// www.javascriptcn.com code example
function nodeToHTML(node) {
    if (node.nodeType === Node.TEXT_NODE) {
        return node.textContent;
    }

    if (node.nodeType !== Node.ELEMENT_NODE) {
        return '';
    }

    const tagName = node.tagName.toLowerCase();
    const attributes = Array.from(node.attributes)
        .map(attr => `${attr.name}="${attr.value}"`)
        .join(' ');

    const children = Array.from(node.childNodes)
        .map(child => nodeToHTML(child))
        .join('');

    return `<${tagName}${attributes ? ' ' + attributes : ''}>${children}</${tagName}>`;
}

本题详细解读

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> 等），如果需要处理自闭合标签，可以在函数中添加额外的逻辑。