- 浏览: 252726 次
- 性别:
- 来自: 南京
文章分类
最新评论
-
mabusyao:
漠北空城 写道请问下,你这个是JDK版本是多少呢?!忘记了,应 ...
HashMap 源码解读 -
漠北空城:
请问下,你这个是JDK版本是多少呢?!
HashMap 源码解读 -
schumee:
完美团队~
项目沉思录 - 1.1 -
winie:
整理下 搞成引擎嘛 国产需要这样的engine
简单工作流引擎 -
mabusyao:
某位同学给我提供的堪称完美的解决方案:1. 将三个int数组放 ...
CraneWork
最近在做一个web前端的项目,其中有一个需求便是,如何将HTML与DOM互相转换。
DOM ---> HTML
DOM向HTML的转换相对比较简单, 因为DOM节点是树状的,我们只需要利用递归遍历整个DOM树,就可以生成比较完整的HTML。
在firebug中有一个相当完善的解决方案,其中对某些类型的节点做了escape, 如果你的生成的结果要求并不是那么严格的话,可以去掉一些代码。
firebug.lib.js
但是其实这个方法还是遗漏了HTML中的一部分信息: doctype。
为了完全的支持HTML的生成,我又加了一个简单的方法来处理doctype,当然也可以在这个方法体里面进行改动,但基本思路是一样的。
doctype string generate
如果是想在原方法里面处理,则可以采用 elt.nodeType == Node.DOCUMENT_TYPE_NODE 这样的方式。
HTML ---> DOM
HTML转换成DOM相对比较复杂, 基本上有两种思路:
1. 将HTML中的数据转化成DOM节点树,再通过模糊匹配找到DOM中相应的节点。
2. 在DOM节点中添加额外的attribute,然后通过该attribute属性来实现反向检测。
实现起来两者都比较复杂,但是基本思想还是很简单的。
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属性来实现反向检测。
实现起来两者都比较复杂,但是基本思想还是很简单的。
发表评论
-
大数据下的实体解析
2016-07-07 12:03 671大数据时代的实体解析困境 <!--[if !sup ... -
中文相似度匹配算法
2015-12-30 14:44 1921基于音形码的中文字 ... -
各种语言写的wordcount
2015-09-24 16:07 0Java版本: String input ... -
数组双指针算法的研究
2015-07-14 16:59 2455双指针算法在数组/链 ... -
摩尔投票法
2015-06-30 20:13 18405摩尔投票法 提问: 给定一个int型数组,找出该数 ... -
(转)最长回文字串算法
2015-01-18 14:30 1436来自(http://blog.163.com/zhaohai ... -
STRUTS2 源码 - Logging System
2012-05-24 08:51 1400看了STRUTS2的源码,了解了它的logging系统,觉得还 ... -
在线词典的数据结构实现。
2012-05-18 08:37 0昨天在网上看到了一道百度的面试题: Baidu写道 ... -
存储中间计算结果的动态规划算法
2012-04-18 15:50 1213public class RodCutting { ... -
java写的四则运算器
2011-08-19 22:19 2708本打算做一个从RE到NFA的转换器,思路已经理清了,但是在动手 ... -
什么是最小二乘拟合
2007-09-14 21:27 958对于一个数据点(x1, y1), ... (xn, yn)的集 ... -
palindrome
2008-07-14 17:39 983package palindrome;/*Problem St ... -
CraneWork
2008-07-14 19:14 1014/*Problem Statement There are ... -
SalesRouting
2008-07-15 10:53 786package salesRouting;/*Problem ... -
FactorialSystem
2008-07-21 19:36 852/*Problem StatementIn the facto ... -
RecurringNumbers
2008-07-22 09:41 914/*Problem StatementA rational n ... -
HardDuplicateRemover
2008-07-23 15:17 917/*Problem StatementWe have a se ... -
BlockStructure
2008-07-23 20:55 796/*Problem StatementA group of v ... -
SkipStones
2008-07-28 17:31 823/*Problem StatementWhen a stone ... -
TheaterVisit
2008-07-28 17:31 782/*Problem StatementYou want to ...
相关推荐
这个例子展示了如何创建一个HTMLDOM对象,找到第一个`<h1>`元素,并打印其文本内容。此外,`php-simple-html-dom-parser`还支持CSS选择器,使得定位和操作HTML元素更加便捷。 在Laravel项目中,这个解析器常用于...
html-dom-parser 在服务器(Node.js)和客户端(浏览器)上均可使用HTML到DOM解析器: HTMLDOMParser(string[, options])解析器将HTML字符串转换为描述DOM树JavaScript对象。例子const parse = require ( '...
HTML DOM Parser是一款重要的前端开源库,它主要用于将...总的来说,html-dom-parser是一个强大的工具,为前端开发者提供了方便的HTML到DOM的转换功能,极大地简化了HTML文档的操作和处理,是前端开发中的重要利器。
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` 包,这是一个基于 PHP Simple HTML DOM Parser 的 Laravel 封装,用于解析和操作 HTML 文档。通过理解这个包,开发者可以更高效地...
038HTML-DOM对象.doc
本项目"react-router-dom-demo"专注于演示如何在React应用中利用`react-router-dom`进行页面间的数据传递。 首先,我们要理解`react-router-dom`中的`Link`组件。`Link`是`react-router-dom`提供的一个组件,用于在...
在前端开发领域,DOM(Document Object Model)是一个重要的概念,它是HTML和XML文档的结构化表示,允许程序和脚本动态更新、添加、删除和改变元素。`can-use-dom`是一个小巧而实用的前端开源库,它专门用于检测运行...
React.js、react-dom.js和babel.js是开发基于React的应用程序时不可或缺的JavaScript库和工具。在深入探讨这些文件之前,让我们先理解React的基本概念。React是由Facebook开发的一个用于构建用户界面的JavaScript库...
2. JSX:React引入了一种语法扩展,JSX,它允许在JavaScript中写类似于HTML的结构,使代码更易读。 3. 状态和属性:组件的状态(state)是组件内部可变的数据,而属性(props)是从父组件传递给子组件的静态数据。 4...
htmldom.dev故事Web开发进行得非常快。 我仍然记得开始使用 , , , 等等的时刻。 如今,即使我们的应用程序由诸如Angular,Vue,React,Svelte等的现代工具提供支持,我们也必须处理DOM。 这些框架直接封装和隐藏...
在axiom-dom-1.2.12.jar中,“DOM”指的是Document Object Model,这是W3C定义的一种标准接口,用于表示XML和HTML文档。DOM将整个文档视为一个树形结构,其中每个节点代表文档的一个部分,如元素、属性、文本等。...
在实际项目中,通常将`react.min.js`和`react-dom.js`通过CDN链接或者本地引入到HTML文件中,然后就可以开始编写React应用了。JSX是一种类似XML的JavaScript语法扩展,允许我们在JavaScript中写HTML,使得代码更易读...
《前端开源库——htmldom:Node.js中的HTML处理利器》 在当今互联网技术日新月异的时代,前端开发人员面临着各种挑战,其中一项便是如何有效地处理和操作HTML文档。在此背景下,`htmldom`应运而生,它是一个专门为...
如果是要直接在HTML上编辑,需要下载react.js与react-dom.js。如果要使用JSX语法,则需要使用转换JSX语法的插件 react-dom.js:提供操作DOM相关的功能
它引入了一种叫做JSX的语法扩展,使得HTML和JavaScript能够更好地融合在一起,为开发组件化、可重用的前端应用提供了强大的支持。在这个压缩包中,包含的三个关键文件——`react.development.js`, `babel.min.js`, ...
React DOM是React与浏览器之间的桥梁,它负责在React组件的状态改变时,同步这些变化到实际的HTML元素上。这个过程称为"reconciliation",即React DOM比较新旧虚拟DOM树,找出最小的变更集,然后仅对实际DOM进行必要...
标题 "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"是一个包含特定版本(1.2.1)的AXIOM DOM库的Java归档(JAR)文件的压缩包。AXIOM,全称为“Abstract eXtensible Markup Language Object Model”,是一个用于处理XML的开源对象...