使用DOM方法处理AJAX响应

Sto*_*ped 3 javascript dom

我正在通过AJAX检索整个HTML文档 - 这很好.但我需要提取该文档的某些部分并使用它们进行操作.

使用框架(jquery,mootools等)不是一种选择.

我能想到的唯一解决方案是使用正则表达式获取HTML文档的正文(是的,我知道,很糟糕),即.<body>(.*)</body>将它放入隐藏元素中的当前页面的DOM中,并从那里开始使用它.

有更简单/更好的方法吗?

更新

我已经完成了一些测试,并且在我测试的浏览器中,将整个HTML文档插入到创建的元素中的行为有点不同.例如:

  • FF3.5:保留HEAD和BODY标签的内容
  • IE7/Safari4:只包括...之间的内容
  • Opera 10.10:保留HEAD及其中的所有内容,保留BODY的内容

IE7和Safari的行为是理想的,但不同的浏览器以不同的方式做这件事.由于我正在加载一个预定的HTML文档,我想我将使用regEx来获取我想要的内容并将其插入到DOM元素中 - 除非有人有其他建议.

Mat*_*chu 5

元素可以存在而不在页面本身中.只需将HTML转储到虚拟div中即可.

var wrapper = document.createElement('div');
wrapper.innerHTML = "<ul><li>foo</li><li>bar</li></ul>";
wrapper.getElementsByTagName('li').length; // 2
Run Code Online (Sandbox Code Playgroud)

鉴于您的编辑,我们遇到了困难,因为您想要getElementById.如果您可以通过创建新的虚拟文档document.implementation.createDocument,这件事可能很容易,但IE根本不支持.

使用正则表达式是一个混乱的业务,因为如果我们看到类似的东西<body><input value="</body>" /></body>呢?你可能只是让你的正则表达式贪婪,以便它移动到最后一个实例</body>,但如果你最终遇到麻烦,可能需要更彻底的解析.即使一个完整的框架不是一个选项,你可能最终想要使用像jQuery这样的库的核心Sizzle来寻找你想要的元素.或者,如果你真的感觉纯粹的情绪,你可以自己编写递归搜索功能 - 但是如果其他人已经采取了它,为什么要采取这种方法呢?

var response_el = document.createElement('html'), foo;
response_el.innerHTML = the_html_elements_content;
foo = Sizzle('#foo', response_el);
Run Code Online (Sandbox Code Playgroud)