jss html5-node.nodeType 属性用于表示节点的类型

在 JavaScript 中,node.nodeType 属性用于表示节点的类型。当 node.nodeType === Node.ELEMENT_NODE 时,表示该节点是一个元素节点(Element Node)。元素节点是 DOM 树中最常见的节点类型之一,用于表示 HTML 或 XML 文档中的元素。

以下是 node.nodeType 可能的值及其对应的节点类型:

表格

复制

nodeType 节点类型 描述
1 Node.ELEMENT_NODE 表示一个元素节点,例如 <div><img> 等。
2 Node.ATTRIBUTE_NODE 表示一个属性节点,例如 id="myId"
3 Node.TEXT_NODE 表示一个文本节点,例如元素中的文本内容。
4 Node.CDATA_SECTION_NODE 表示一个 CDATA 节点,用于包含不应由 XML 解析器解析的文本。
5 Node.ENTITY_REFERENCE_NODE 表示一个实体引用节点,例如 &copy;
6 Node.ENTITY_NODE 表示一个实体节点,很少在 DOM 中使用。
7 Node.PROCESSING_INSTRUCTION_NODE 表示一个处理指令节点,例如 <?xml-stylesheet type="text/xsl" href="style.xsl"?>
8 Node.COMMENT_NODE 表示一个注释节点,例如 <!-- This is a comment -->
9 Node.DOCUMENT_NODE 表示一个文档节点,例如整个 HTML 文档。
10 Node.DOCUMENT_TYPE_NODE 表示一个文档类型节点,例如 <!DOCTYPE html>
11 Node.DOCUMENT_FRAGMENT_NODE 表示一个文档片段节点,用于临时存储节点集合。

在你的代码中,node.nodeType === Node.ELEMENT_NODE 检查的是元素节点(Node.ELEMENT_NODE),其值为 1。这表示该节点是一个 HTML 元素,例如 <div><img><p> 等。

如果你需要遍历 editor 的所有子节点,并根据节点类型进行不同的处理,可以参考以下代码示例:

JavaScript

复制

复制代码
const editor = document.getElementById('editor');
let AllTxt = '';
const childNodes = editor.childNodes;

childNodes.forEach(node => {
    if (node.nodeType === Node.ELEMENT_NODE) {
        // 处理元素节点
        console.log(`Element: ${node.tagName}`);
        // 你可以根据元素类型进行进一步处理
        if (node.tagName === 'IMG') {
            // 处理图片元素
            const src = node.getAttribute('src') || '';
            AllTxt += `<img src='${src}' style='max-width:100%; max-height:500px;'>`;
        } else if (node.tagName === 'U') {
            // 处理下划线元素
            const textContent = node.textContent || '';
            AllTxt += `&lt;u&gt;${textContent}&lt;/u&gt;`;
        } else {
            // 处理其他元素
            AllTxt += node.outerHTML;
        }
    } else if (node.nodeType === Node.TEXT_NODE) {
        // 处理文本节点
        AllTxt += node.textContent;
    } else if (node.nodeType === Node.COMMENT_NODE) {
        // 处理注释节点
        AllTxt += `<!--${node.textContent}-->`;
    } else {
        // 其他类型的节点
        AllTxt += node.nodeValue || '';
    }
});

console.log(AllTxt);

代码说明:

  1. 遍历子节点

    • 使用 childNodes 获取 editor 的所有子节点。

    • 遍历每个子节点,根据 node.nodeType 判断节点类型。

  2. 处理不同类型的节点

    • 元素节点(Node.ELEMENT_NODE :根据元素类型(如 <img><u>)进行处理。

    • 文本节点(Node.TEXT_NODE:直接获取文本内容。

    • 注释节点(Node.COMMENT_NODE:处理注释内容。

    • 其他类型的节点:根据需要处理其他类型的节点。

  3. 最终结果

    • 将处理后的文本内容存储在 AllTxt 中,你可以将其输出或保存为文件。

这样,你可以根据节点类型进行不同的处理,最终生成符合需求的文本内容。

相关推荐
小兵张健2 小时前
价值1000的 AI 工作流:Codex 通用前端协作模式
前端·aigc·ai编程
sunny_2 小时前
面试踩大坑!同一段 Node.js 代码,CJS 和 ESM 的执行顺序居然是反的?!99% 的人都答错了
前端·面试·node.js
拉不动的猪3 小时前
移动端调试工具VConsole初始化时的加载阻塞问题
前端·javascript·微信小程序
ayqy贾杰4 小时前
Agent First Engineering
前端·vue.js·面试
IT_陈寒4 小时前
SpringBoot实战:5个让你的API性能翻倍的隐藏技巧
前端·人工智能·后端
iceiceiceice5 小时前
iOS PDF阅读器段评实现:如何从 PDFSelection 精准还原一个自然段
前端·人工智能·ios
大金乄5 小时前
封装一个vue2的elementUI 表格组件(包含表格编辑以及多级表头)
前端·javascript
葡萄城技术团队6 小时前
【性能优化篇】面对万行数据也不卡顿?揭秘协同服务器的“片段机制 (Fragments)”
前端
程序员阿峰6 小时前
2026前端必备:TensorFlow.js,浏览器里的AI引擎,不写Python也能玩转智能
前端
Jans6 小时前
Shipfe — Rust 写的前端静态部署工具:一条命令上线 + 零停机 + 可回滚 + 自动清理
前端