DOM HTML解析

问题描述:

Source.HTMLDOM HTML解析

<!DOCTYPE html> 
<html> 
<body> 
<h1 style="color:red">Hello World</h1> 
<p id="demo" style="color:red">Click the button below to remove the style attribute from the header above.</p> 
</body> 
</html> 

Parser.html

<!DOCTYPE html> 
<html> 
<body> 
<button onclick="myFunction()">Parse</button> 
<script> 
function myFunction() 
{ 
document.getElementsByTagName("H1")[0].removeAttribute("style"); 
document.getElementsByTagName("P")[0].removeAttribute("style"); 
}; 
</script> 
</body> 
</html> 

现在我需要的是引导,我需要从解析器解析按钮。 html将source.html的功能应用到output.html并保存在source.html的相同路径中...

请帮助我...

+0

你需要使用服务器端语言,像PHP,与文件系统的工作。 您的JavaScript函数不适用于此,我认为FileSystem API是有限的。你想看看PHP和AJAX –

+0

这不是关于解析。解析是浏览器为构建DOM树所做的工作。因此,当您操作DOM时,文档必须已经被解析。 –

Willshaw说的是正确的。 Javascript没有那么大的能力来解决你的问题。你需要去做一些服务器端的脚本。

我同意上一个答案,这是一个很奇怪的方法。

但是,DOM解析对于javascript来说非常简单,我可以在客户端进行解析,然后将处理后的html发送到后端,并将其保存在result.html中。

我将使用Jquery为例,方式更简单。

Parser.html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>load demo</title> 
    <style> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 

<button id="btnLoad">Load Source</button> 
<button id="btnParse">Parse</button> 
<button id="btnSave">Save</button> 

<div style="display:none" id="sourceContainer"></div> 

<script> 
$(document).ready(function() { 
    $(".btnLoad").click(function(){$("#sourceContainer").load("/source.html");}) 
    $(".btnParse").click(function(){ 
     $(".sourceContainer h1").removeAttr("style"); 
     $(".sourceContainer p").removeAttr("style"); 
    }) 
    $(".btnSave").click(function(){ 
     var data = { 
      html: $("#sourceContainer").html() 
     }; 
     //replace first param by the backend url, add callback function 
     $.post("http://...", data, ...); 
    }) 
}); 
</script> 

</body> 
</html> 
+0

它输出空白页.. 这里找到http://tool.setinfotec.com/parser.html –

+0

当你将上面的代码复制/粘贴到样式标签中时,你真的希望它能够工作吗? (我检查了你的例子在铬检查员) – Yoann