如何用Javascript解析HTML？
问题的提出是我需要将另一个网页的某些内容解析出来并集成到当前正在处理的网页中。第一想法就是，使用dojo.xhrGet得到网页的内容，再使用某种Javascript Library来解析。我熟悉的dojo并没有这种库，查询了一下，jQuery也没有。后来发现jQuery的作者，鼎鼎大名的John Resig有这样一个库，支持SAX语法和DOM树的构建：
Pure JavaScript HTML Parser
拿我要试验的网页试了一下，很可惜，它crash掉了（这个网页有好几十K大小，也不一定很规范）。不仅想念起Java来，在Java下我们的兵器库里会有一堆这样的东西，有不少甚至支持cssrendeing和Javascript执行。
怎么办？我的需求并不复杂，也许正则表达式就可以用了，但是想起复杂的css查询，以及要兼容网页未来可能的变化，所以这一方法并不值得去试。
突然想起来，browser就是最完美的HTML解析器，如果让browser新开一个窗口加载这个网页，然后再使用DOM API来分析网页，这样要获取我所需要的内容一定会更加准确、灵活，将来网页改变后，程序的修改也显然会更容易。当然，新开窗口的做法不太优雅（甚至会引起用户的错愕），我们使用frame来实现。
Frame共有两类，分别由frameset，frame标签或iframe标签创建。如果一个HTML文件中含有frameset，则该文件只应含有<head>,<frameset>和<frame>标签，不应该有<body>标签。而iframe则用来创建一个内联frame，它包含在<body>标签内。
很多教科书讲关于<frameset>创建的frame的内容，以及各个frame之间window和document的关系，比如《Javascript高级程序设计》（Nicholas Zakas）。而通过iframe创建的frame有以下关系：
原始文档对应的窗口对象，以下简称iWindow，它拥有下列对象：
iWindow.frames: 拥有的子frame数组。可以用frames.length == 0判断一个窗口是否有frame。
iWindow == top
iWindow == iWindow.parent
被创建的frame的文档对象，根据DOM规范，由frameNode.contentDocument来引用，其窗口对象应为frameNode.contentWindow，但注意各浏览器的实现不尽相同。这也正是dojo可以帮忙的地方。下面来看看dojo的实现：
创建iframe www.zzzyk.com
dojo.io.iframe.create(/*String*/fname, /*String*/onloadStr, /*String?*/uri)
第一个参数是你将要为该frame指定的名字。实际上dojo同时也将该名字当成该iframe的id属性使用。因此，你不可以多次使用同一名字来创建iframe。第二个参数指定了当该iframe内容加载完毕时应该触发的事件，它可以是一小段javascript程序。第三个参数可选，如果不指定，则其会加载dojo.js所在域的某个指定位置下的一个空白html文件。如果你是跨域加载dojo的话（在CDN使用越来越频繁的情况下，跨域加载变得更加常见），这会引起一个安全错误。也许可以将这个参数指定为“about:blank’，firefox和ie都支持这个语法。
操纵iframe文档对象
应该始终使用dojo提供的方法来获取对iframe文档对象的引用，这是因为各个浏览器对象层次结构不同。
dojo.io.iframe.doc(/*DOMNode*/myFrame);
这里的myFrame是先前通过create函数创建的一个DOMNode。记住inline frame就是当前文档对象中的一个结点。如果有兴趣看一下dojo的源代码，它对不同浏览器是这样实现对这个文档的选择的：
doc: function(/*DOMNode*/iframeNode){
//summary: Returns the document object associated with the iframe DOM Node argument.
var doc = iframeNode.contentDocument || // W3
(
(
(iframeNode.name) && (iframeNode.document) &&
(dojo.doc.getElementsByTagName("iframe")[iframeNode.name].contentWindow) &&
(dojo.doc.getElementsByTagName("iframe")[iframeNode.name].contentWindow.document)
)
) || // IE
(
(iframeNode.name)&&(dojo.doc.frames[iframeNode.name])&&
(dojo.doc.frames[iframeNode.name].document)
) || null;
return doc;
},
对我们拿到的这个doc对象，如何运用DOM API以及dojo的css选择语法呢？
jQuery的核心语法是$，通过$选择了一个结点时，其默认根结点是当前文档对象，但是可以通过$(,)的第二个参数来选择其根结点，比如：
$('h1', window.parent.frames[0].document).remove()
应该说在这一点上，jQuery的语法相当简洁。在dojo中，我们需要这样做：
dojo.withDoc(/*the doc object of iframe*/iframeDoc, method, scope, args);
其中scope是dojo用来查找第二个参数method以及在method中引用到的一切变量的环境。如果method是’byId’,则scope应为dojo。args是调用method时需要传入的参数。
iframe的销毁
dojo的文档没有提及如何销毁一个iframe，在它自身的实现中甚至没有实现这个功能。考虑到iframe只不过是当前document的一个结点，所以应该可以用DOM API来销毁一个iframe。这一点未及实验。
替换目标链接
比起destroy操作，可能更常见的操作是通过iframe来分别加载不同的html文档。可以通过dojo.io.iframe.setSrc来实现：
dojo.io.iframe.setSrc(/*DOMNode*/iframe, /*String*/src, /*Boolean*/replace);
第三个参数值得注意，根据实验，如是指定为false，在firefox中可能导致iframe并不更新文档。
关于这个函数，有一些行为值得进一步研究。我们在创建iframe时指定了onload事件的处理代码，是因为除了回调之外，并无好的办法来确保处理程序一定在iframe文档加载完成之后再执行。那么，当setSrc为iframe替换了新的location之后，这个onload事件怎么办？经过在firefox中试验后，令人惊讶的是，先前创建iframe时指定的onload事件处理程序仍然有效—而dojo并未为此做些什么。这说明，dojo创建iframe时指定的onload事件是window的事件，而非document，甚至更底层一点，body的事件。
结论
在Javascript的世界里，有时候程序员是在跳戴着镣铐的舞蹈，这时候艺术比科学更重要。通过使用iframe，比较有效地解决了文档的解析问题—程序员可以仍然以他们熟悉的API和方式去操作这些文档，这比起费心费力去寻找一个不太成熟的库，甚至自己去实现某些功能要好得多。
iframe方法仍然有着自己的缺点—在某些场合也许是致命的。浏览器越来越多地限制跨域操作，因此如果在iframe里加载了另一个域的HTML文档，你将只可以访问title，location等等属性，而无法访问其内容。由于这是浏览器的限制，因此无论是dojo还是jQuery都注定无法饶过去。一个惟一的办法，也许是通过link或者<script>标签来载入跨域内容—这又使得基于Javascript的HTML解析器仍然有存在的必要。
摘自：盛夏莲花- 前沿web技术
补充：web前端 , JavaScript ,
