HTML字符串转DOM提取对象

要将HTML字符串转换为DOM提取对象，可以使用JavaScript的DOMParser对象，以下是一个示例：

（图片来源网络，侵删）


<!DOCTYPE html>
<html>
<head>
  <title>HTML字符串转DOM提取对象</title>
</head>
<body>
  <h1>HTML字符串转DOM提取对象示例</h1>
  <p>将下面的HTML字符串转换为DOM提取对象：</p>
  <pre id="htmlString">&lt;div&gt;&lt;p&gt;这是一个示例&lt;/p&gt;&lt;/div&gt;</pre>
  <button onclick="convertHTMLStringToDOM()">转换</button>
  <h2>转换结果</h2>
  <table id="resultTable" border="1">
    <thead>
      <tr>
        <th>标签名</th>
        <th>属性</th>
        <th>子元素</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <script>
    function convertHTMLStringToDOM() {
      const htmlString = document.getElementById('htmlString').innerText;
      const parser = new DOMParser();
      const doc = parser.parseFromString(htmlString, 'text/html');
      const resultTable = document.getElementById('resultTable').getElementsByTagName('tbody')[0];
      resultTable.innerHTML = '';
      function traverseNode(node, level) {
        if (node.nodeType === Node.ELEMENT_NODE) {
          const row = document.createElement('tr');
          row.innerHTML = <td>${node.tagName}</td><td></td><td></td>;
          resultTable.appendChild(row);
          const attributesRow = document.createElement('tr');
          attributesRow.innerHTML = <td colspan="3"><strong>属性：</strong></td>;
          resultTable.appendChild(attributesRow);
          for (let i = 0; i < node.attributes.length; i++) {
            const attrRow = document.createElement('tr');
            attrRow.innerHTML = <td></td><td>${node.attributes[i].name}</td><td>${node.attributes[i].value}</td>;
            resultTable.appendChild(attrRow);
          }
          for (let i = 0; i < node.childNodes.length; i++) {
            traverseNode(node.childNodes[i], level + 1);
          }
        } else if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
          const row = document.createElement('tr');
          row.innerHTML = <td colspan="3">文本内容：${node.textContent.trim()}</td>;
          resultTable.appendChild(row);
        }
      }
      traverseNode(doc.body.firstChild, 0);
    }
  </script>
</body>
</html>

这个示例中，我们首先创建了一个HTML字符串，然后使用DOMParser将其解析为DOM对象，接着，我们遍历DOM对象，将每个元素的标签名、属性和子元素添加到一个表格中，当用户点击“转换”按钮时，会触发convertHTMLStringToDOM函数，将HTML字符串转换为DOM提取对象并显示在表格中。

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/475922.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。