`
mabusyao
  • 浏览: 253382 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

HTML - DOM

阅读更多
最近在做一个web前端的项目,其中有一个需求便是,如何将HTML与DOM互相转换。


DOM  --->  HTML

DOM向HTML的转换相对比较简单, 因为DOM节点是树状的,我们只需要利用递归遍历整个DOM树,就可以生成比较完整的HTML。

在firebug中有一个相当完善的解决方案,其中对某些类型的节点做了escape, 如果你的生成的结果要求并不是那么严格的话,可以去掉一些代码。

firebug.lib.js
this.getElementHTML = function(element)
{
    var self=this;
    function toHTML(elt)
    {
        if (elt.nodeType == Node.ELEMENT_NODE)
        {
            if (unwrapObject(elt).firebugIgnore)
                return;

            html.push('<', elt.nodeName.toLowerCase());

            for (var i = 0; i < elt.attributes.length; ++i)
            {
                var attr = elt.attributes[i];

                // Hide attributes set by Firebug
                if (attr.localName.indexOf("firebug-") == 0)
                    continue;

                // MathML
                if (attr.localName.indexOf("-moz-math") == 0)
                {
                    // just hide for now
                    continue;
                }

                html.push(' ', attr.nodeName, '="', escapeForElementAttribute(attr.nodeValue),'"');
            }

            if (elt.firstChild)
            {
                html.push('>');

                var pureText=true;
                for (var child = element.firstChild; child; child = child.nextSibling)
                    pureText=pureText && (child.nodeType == Node.TEXT_NODE);

                if (pureText)
                    html.push(escapeForHtmlEditor(elt.textContent));
                else {
                    for (var child = elt.firstChild; child; child = child.nextSibling)
                        toHTML(child);
                }

                html.push('</', elt.nodeName.toLowerCase(), '>');
            }
            else if (isElementSVG(elt) || isElementMathML(elt))
            {
                html.push('/>');
            }
            else if (self.isSelfClosing(elt))
            {
                html.push((isElementXHTML(elt))?'/>':'>');
            }
            else
            {
                html.push('></', elt.nodeName.toLowerCase(), '>');
            }
        }
        else if (elt.nodeType == Node.TEXT_NODE)
            html.push(escapeForTextNode(elt.textContent));
        else if (elt.nodeType == Node.CDATA_SECTION_NODE)
            html.push('<![CDATA[', elt.nodeValue, ']]>');
        else if (elt.nodeType == Node.COMMENT_NODE)
            html.push('<!--', elt.nodeValue, '-->');
    }

    var html = [];
    toHTML(element);
    return html.join("");
};


但是其实这个方法还是遗漏了HTML中的一部分信息: doctype。

为了完全的支持HTML的生成,我又加了一个简单的方法来处理doctype,当然也可以在这个方法体里面进行改动,但基本思路是一样的。

doctype string generate
  createDocTypeString : function (doc) {
    if(!doc.doctype) return "";
    
    var doctype = "<!DOCTYPE";
    
    if(doc.doctype.name) {
      doctype += " " + doc.doctype.name;
    }
    
    if(doc.doctype.publicId) {
      doctype += " PUBLIC \"" + doc.doctype.publicId + "\"";
    }
    
    if(doc.doctype.systemId) {
      doctype += " \"" + doc.doctype.systemId + "\"";
    }
    
    return doctype += ">"
  }

如果是想在原方法里面处理,则可以采用 elt.nodeType == Node.DOCUMENT_TYPE_NODE 这样的方式。

HTML  --->  DOM

HTML转换成DOM相对比较复杂, 基本上有两种思路:

1. 将HTML中的数据转化成DOM节点树,再通过模糊匹配找到DOM中相应的节点。
2. 在DOM节点中添加额外的attribute,然后通过该attribute属性来实现反向检测。

实现起来两者都比较复杂,但是基本思想还是很简单的。
分享到:
评论

相关推荐

    Laravel开发-php-simple-html-dom-parser

    这个例子展示了如何创建一个HTMLDOM对象,找到第一个`&lt;h1&gt;`元素,并打印其文本内容。此外,`php-simple-html-dom-parser`还支持CSS选择器,使得定位和操作HTML元素更加便捷。 在Laravel项目中,这个解析器常用于...

    html-dom-parser:HTML到DOM解析器

    html-dom-parser 在服务器(Node.js)和客户端(浏览器)上均可使用HTML到DOM解析器: HTMLDOMParser(string[, options])解析器将HTML字符串转换为描述DOM树JavaScript对象。例子const parse = require ( '...

    前端开源库-html-dom-parser

    HTML DOM Parser是一款重要的前端开源库,它主要用于将...总的来说,html-dom-parser是一个强大的工具,为前端开发者提供了方便的HTML到DOM的转换功能,极大地简化了HTML文档的操作和处理,是前端开发中的重要利器。

    php-simple-html-dom-parser, PHP简单的HTML DOM解析器适应 Composer 和 PSR 0.zip

    php-simple-html-dom-parser, PHP简单的HTML DOM解析器适应 Composer 和 PSR 0 php-simple-html-dom-parser版本 1.5.2针对 Composer 和 PSR-0的自适应:用PHP5 编写的HTML解析器允许你以非常简单的方式操作 HTML !...

    Laravel开发-laravel-html-dom-parser

    在本文中,我们将深入探讨如何在 Laravel 框架中使用 `laravel-html-dom-parser` 包,这是一个基于 PHP Simple HTML DOM Parser 的 Laravel 封装,用于解析和操作 HTML 文档。通过理解这个包,开发者可以更高效地...

    038HTML-DOM对象.doc

    038HTML-DOM对象.doc

    react-router-dom-demo

    本项目"react-router-dom-demo"专注于演示如何在React应用中利用`react-router-dom`进行页面间的数据传递。 首先,我们要理解`react-router-dom`中的`Link`组件。`Link`是`react-router-dom`提供的一个组件,用于在...

    前端开源库-can-use-dom

    在前端开发领域,DOM(Document Object Model)是一个重要的概念,它是HTML和XML文档的结构化表示,允许程序和脚本动态更新、添加、删除和改变元素。`can-use-dom`是一个小巧而实用的前端开源库,它专门用于检测运行...

    react.js、react-dom.js、babel.js文件包下载

    React.js、react-dom.js和babel.js是开发基于React的应用程序时不可或缺的JavaScript库和工具。在深入探讨这些文件之前,让我们先理解React的基本概念。React是由Facebook开发的一个用于构建用户界面的JavaScript库...

    react,react-dom及babel打包文件.zip

    2. JSX:React引入了一种语法扩展,JSX,它允许在JavaScript中写类似于HTML的结构,使代码更易读。 3. 状态和属性:组件的状态(state)是组件内部可变的数据,而属性(props)是从父组件传递给子组件的静态数据。 4...

    html-dom:使用普通JavaScript管理HTML DOM的常见任务。 给我1:white_medium_star:如果有用

    htmldom.dev故事Web开发进行得非常快。 我仍然记得开始使用 , , , 等等的时刻。 如今,即使我们的应用程序由诸如Angular,Vue,React,Svelte等的现代工具提供支持,我们也必须处理DOM。 这些框架直接封装和隐藏...

    axiom-dom-1.2.12.jar.zip

    在axiom-dom-1.2.12.jar中,“DOM”指的是Document Object Model,这是W3C定义的一种标准接口,用于表示XML和HTML文档。DOM将整个文档视为一个树形结构,其中每个节点代表文档的一个部分,如元素、属性、文本等。...

    react下的react.min.js和react-dom.js

    在实际项目中,通常将`react.min.js`和`react-dom.js`通过CDN链接或者本地引入到HTML文件中,然后就可以开始编写React应用了。JSX是一种类似XML的JavaScript语法扩展,允许我们在JavaScript中写HTML,使得代码更易读...

    前端开源库-htmldom

    《前端开源库——htmldom:Node.js中的HTML处理利器》 在当今互联网技术日新月异的时代,前端开发人员面临着各种挑战,其中一项便是如何有效地处理和操作HTML文档。在此背景下,`htmldom`应运而生,它是一个专门为...

    react-dom.js

    如果是要直接在HTML上编辑,需要下载react.js与react-dom.js。如果要使用JSX语法,则需要使用转换JSX语法的插件 react-dom.js:提供操作DOM相关的功能

    react下载,包括react.development.js;babel.min.js;react-dom.development.js

    它引入了一种叫做JSX的语法扩展,使得HTML和JavaScript能够更好地融合在一起,为开发组件化、可重用的前端应用提供了强大的支持。在这个压缩包中,包含的三个关键文件——`react.development.js`, `babel.min.js`, ...

    react-dom.min@16.14.0.zip

    React DOM是React与浏览器之间的桥梁,它负责在React组件的状态改变时,同步这些变化到实际的HTML元素上。这个过程称为"reconciliation",即React DOM比较新旧虚拟DOM树,找出最小的变更集,然后仅对实际DOM进行必要...

    axiom-dom-1.2.6.jar.zip

    标题 "axiom-dom-1.2.6.jar.zip" 提供了一个关键的线索,它指的是一个特定版本的AXIOM库的DOM实现,版本号为1.2.6,并且被封装在一个ZIP压缩文件中。AXIOM,全称为Apache AXIOM(AXIOM XML Object Model),是一个...

    axiom-dom-1.2.1.jar.zip

    标题中的"axiom-dom-1.2.1.jar.zip"是一个包含特定版本(1.2.1)的AXIOM DOM库的Java归档(JAR)文件的压缩包。AXIOM,全称为“Abstract eXtensible Markup Language Object Model”,是一个用于处理XML的开源对象...

Global site tag (gtag.js) - Google Analytics