个人中心
gpt4 book ai didi

javascript - 通过 JavaScript 将 DOM 转换为 HTML？

转载 作者：行者123 更新时间：2023-12-05 07:48:36 25 4
gpt4 key购买 nike

好的，我已经知道我可以使用以下方法获取整个 HTML 文档的标记(减去 DOCTYPE):

document.documentElement.outerHTML

然而，这只会让我得到原始源标记，而不是 DOM 的当前状态，而这正是我正在寻找的。对于我的即时需求，我真的只想保留文档中表单的状态(从自动保存的 Angular 考虑)。

  • 请注意，这并未以标准网站/网络应用格式使用，因此发布、提交等确实不是一种选择。我需要一种纯 JavaScript 方法来获取当前 DOM 树的 HTML 字符串表示形式，以便外部调用者可以将其保存到磁盘以备后用。

现在我知道我可以手动遍历所有表单元素，获取每个值，并对上述 outerHTML 的结果进行字符串替换(通过正则表达式)，以构建一个反射(reflect)当前 DOM 的 HTML 字符串，但我希望有一种更简单的方法来做到这一点(也许是内置的)。就像 DOM 到 HTML 解析器/编写器。

但是到目前为止，我还没有找到一种内置的方法来做到这一点。只是想联系一下，看看是否还有其他人需要这样做。并在我开始实现之前询问我上面提出的方法是否是解决这个特定问题的最佳方法。

最佳答案

这是一个示例 HTML 页面，我在其中尝试了所提供的功能:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">

      function getFormState() {
        // this could be set outside this function if calling multiple times
        var theForm = document.forms[0];
        console.log(theForm);
        
        var theData = new FormData(theForm);
        console.log(theData);
        
        // get the state of the form as an iterator of key/value pairs
        var state = theData.entries();
        console.log(state);
        
        // convert the iterator into an array of key/value pairs
        var stateArray = Array.from(state);
        console.log(stateArray);
        
        // Use JSON.stringify to change the key/value pair array state into a string
        var stateString = JSON.stringify(stateArray);
        console.log(stateString);
        
        return stateString;
      }
         
    </script>
    <style>

      #header {
          background: #ffffff;
          position: fixed;
          width: 100%;
          height: 30px;
          padding: 5px 0px 0px 0px;
          top: 0;
          z-index: 1;
      }
      
      #content{ 
          margin-top: 40px;
      }

      body, input, select, textarea  {
        font-family: monospace;
        font-size: 10pt;
        font-weight: bold;
      }

      td {
        padding: 8px 8px 8px 8px;
      }

      input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"]):not([type="reset"]):not([type="submit"]), select, textarea {
        -webkit-transition: all 0.30s ease-in-out;
        -moz-transition: all 0.30s ease-in-out;
        -ms-transition: all 0.30s ease-in-out;
        -o-transition: all 0.30s ease-in-out;
        outline: none;
        padding: 3px 0px 3px 3px;
        margin: 5px 1px 3px 0px;
        border: 1px solid #DDDDDD;
      }

      input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"]):not([type="reset"]):not([type="submit"]):focus, select:focus, textarea:focus {
        box-shadow: 0 0 5px rgba(81, 203, 238, 1);
        padding: 3px 0px 3px 3px;
        margin: 5px 1px 3px 0px;
        border: 1px solid rgba(81, 203, 238, 1);
      }
      
    </style>
    <title>HTML5 FormData Test</title>
  </head>
  <body>
    <form id="frmForm">
      <div id="header">
        <button type="button" onclick="getFormState()">getFormState</button>
        <hr>
      </div>
      <div id="content">
        <table border="1">
          <tr>
            <td>Button</td>
            <td><input id="btnButton" type="button" value="Button"></td>
          </tr>
          <tr>
            <td>Checkbox</td>
            <td><input id="chkCheckbox" type="checkbox"></td>
          </tr>
          <tr>
            <td>Color</td>
            <td><input id="clrColor" type="color" value="#000000"></td>
          </tr>
          <tr>
            <td>Datalist</td>
            <td>
              <input id="txtDatalist" type="text" list="choices" value="">
              <datalist id="choices">
                <option value="One"></option>
                <option value="Two"></option>
                <option value="Three"></option>
              </datalist>
            </td>
          </tr>
          <tr>
            <td>Date</td>
            <td><input id="calDate" type="date" value=""></td>
          </tr>
          <tr>
            <td>Datetime (Deprecated)</td>
            <td><input id="calDateTime" type="datetime" value=""></td>
          </tr>
          <tr>
            <td>Datetime (Local)</td>
            <td><input id="calDateTimeLocal" type="datetime-local" value=""></td>
          </tr>
          <tr>
            <td>Disabled</td>
            <td><input id="txtDisabled" type="text" value="Disabled" disabled=""></td>
          </tr>
          <tr>
            <td>E-Mail</td>
            <td><input id="txtEMail" type="email" value=""></td>
          </tr>
          <tr>
            <td>File</td>
            <td><input id="binFile" type="file" value=""></td>
          </tr>
          <tr>
            <td>Hidden</td>
            <td><input id="txtHidden" type="hidden" value="HIDDEN"></td>
          </tr>
          <tr>
            <td>Image (Submit)</td>
            <td><input id="btnImage" type="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAAVCAIAAABpKDERAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAJcSURBVEhLzZVNTxpBGMcHvkEjbZFkT3BoUmNSsSc/QXdBLL23IRyQmkhjzNbGO4nUbUwQ15geeiC9QDct3V3itSdE7YuSniBRGynQ8BXcPs/s4HLYAk2q3d+Bed7zn5md4KpUKo1GgzgSv9/vyufz0WiUBRyGoihuw9mgvgunwvQ5GTdcMzOdB2hzs6N0KgPOr7p+o5/HhXOWuDbw/Jhpw/RSt9vdXYWi1V2w3jwaZ4nrZOj7xU1YFVVpLCZJsTFAeinhEiu0MLFHHcaTIo0BUN8PK24V6ASKtEcLbWH6BkGovstPAMxS2kh29Ock/Z2rfZWF0ukpJqafdRi1bUFNiEX8GPZfPUgL2zUzSMgL/XX0JkTX784TGaOdmjyb5uPFNk6w5y/PD92VmXt0vcN58BM5OjnHROtd7BZlYl7DFtpjNVtW9dMaIaXkBK1NlnqldjB9A4G5OKJHz7uMmr8HG5NJbUX9CXzb4nsNwRmRaMlJr9dLs6kgjWKr+BFLTXYewqH+iaH66Mb7AA98vHa6IobRPjsihOfwAR28faqbQaOpyBk+d9g0WZyi/QbHhQnJyErTdIcw4H73N3w+Xxgug6yFwYorcI9UHybZikph9cwmRKIvBKFsi9sUUR0kb0cSy2bQhE648ETkL5shKx5X2jjQDtDmkmU5FArhjv85n7Nc5Dhb3ZkbB+cwy81llt//SAXN5CioqnqF/2+ds2NreLPfGRXocOVyOUGAx38V/PqwcD+Fr5mypJwsTjF7NDRNQ308Dy/Oiei6Pvz9/l9c5XK5Xq8zwQ4jEAj8BmbeP4OPzU0kAAAAAElFTkSuQmCC"></td>
          </tr>
          <tr>
            <td>Month</td>
            <td><input id="calMonth" type="month" value=""></td>
          </tr>
          <tr>
            <td>Number</td>
            <td><input id="numNumber" type="number" min="0" max="10" step="1" required="" value=""></td>
          </tr>
          <tr>
            <td>Password</td>
            <td><input id="txtPassword" type="password" value=""></td>
          </tr>
          <tr>
            <td>Radio</td>
            <td>
              <input id="radRadio1" type="radio" name="radRadio" value="1">One<br>
              <input id="radRadio2" type="radio" name="radRadio" value="2">Two<br>
              <input id="radRadio3" type="radio" name="radRadio" value="3">Three
            </td>
          </tr>
          <tr>
            <td>Range</td>
            <td><input id="numRange" type="range" min="0" max="10" value="5"></td>
          </tr>
          <tr>
            <td>Readonly</td>
            <td><input id="txtReadonly" type="text" value="Readonly" readonly=""></td>
          </tr>          
          <tr>
            <td>Reset</td>
            <td><input id="btnReset" type="reset"></td>
          </tr>
          <tr>
            <td>Search</td>
            <td><input id="txtSearch" type="search" placeholder="search text" value=""></td>
          </tr>
          <tr>
            <td>Select</td>
            <td>
              <select id="sltSelect">
                <option value="" disabled="" selected="">&lt;Select&gt;</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>Select (Multiple)</td>
            <td>
              <select id="sltMultiSelect" multiple="">
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>Submit</td>
            <td><input id="btnSubmit" type="submit"></td>
          </tr>
          <tr>
            <td>Telephone</td>
            <td><input id="txtTelephone" type="tel" value=""></td>
          </tr>
          <tr>
            <td>Textbox</td>
            <td><input id="txtTextbox" type="text" value=""></td>
          </tr>
          <tr>
            <td>Textarea</td>
            <td><textarea id="txtTextarea"></textarea></td>
          </tr>
          <tr>
            <td>Time</td>
            <td><input id="calTime" type="time" value=""></td>
          </tr>
          <tr>
            <td>URL</td>
            <td><input id="txtURL" type="url" value=""></td>
          </tr>
          <tr>
            <td>Week</td>
            <td><input id="calWeek" type="week" value=""></td>
          </tr>
        </table>
      </div>
    </form>
  </body>
</html>

返回以下内容:

Output

我能够手动遍历所有输入以获得我需要的内容，事实上这是我当前的解决方案，但 FormData 解决方案似乎是一种更简洁的方法，它只是没有返回预期的数据。

事实上，唯一似乎填充的输入是 RadioButton。

关于javascript - 通过 JavaScript 将 DOM 转换为 HTML？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38283602/

25 4 0
文章推荐： javascript - # 在页面加载 URL 后自动出现
文章推荐： php - 在类之间共享对象的正确方法是什么？
文章推荐： Webpack 加载 CSS 时抛出错误 "Unexpected token"
文章推荐： python - 属性错误 : 'module' object has no attribute 'commit_on_success'
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com