在Javascript中提取2个标签之间的数据答案

【问题标题】：Extracting data between 2 tags in Javascript在Javascript中提取2个标签之间的数据
【发布时间】：2017-06-29 10:44:40
【问题描述】：

我是 js 新手。我正在尝试从一个非常旧且过时的网页中获取一个表格，该网页不断更新（本地）并将其添加到不同的页面。

我需要从以下示例中提取表 1。如果你能解释你的解决方案是如何工作的，那就加分。

<html>
<head>
</head>
<div> This is table 1 </div>
<table>
    <tr>
       <td>
         <a>
         </a>
       </td>
    </tr>
</table>
<div> This is table 2 </div>
<table>
    <tr>
       <td>
         <a>
         </a>
       </td>
    </tr>
</table>
</html>

谢谢！

【问题讨论】：

想要的输出到底是什么？您如何尝试在脚本中表示此表？数组？一个对象？
解决问题的方法有很多。请将您的问题限制在与您编写的代码相关的特定问题上，而不是非常笼统的“我如何获得表格”。在这种情况下，您可以使用document.getElementsByTagName('table')[0] 获取第一个表，然后使用previousSibling 获取先前的兄弟，直到找到一个DIV，然后获取它的textContent。但是有很多选择。

标签： javascript html

【解决方案1】：

通常您会给目标元素一个唯一的 ID，并使用document.getElementById('[target]') 定位它：

var element_1 = document.getElementById('one');
console.log(element_1);

<div id="one">This is table 1</div>
<table>
  <tr>
    <td>
      <a>
      </a>
    </td>
  </tr>
</table>
<div id="two">This is table 2</div>
<table>
  <tr>
    <td>
      <a>
      </a>
    </td>
  </tr>
</table>

如果您无法访问 HTML 中的唯一 ID，但确实有适用的类，则可以使用 document.getElementsByClassName('[target]')，它返回具有所需类的所有元素的集合名称：

var elements = document.getElementsByClassName('target');
console.log(elements[0]);
console.log(elements[1]);

<div class="target">This is table 1</div>
<table>
  <tr>
    <td>
      <a>
      </a>
    </td>
  </tr>
</table>
<div class="target">This is table 2</div>
<table>
  <tr>
    <td>
      <a>
      </a>
    </td>
  </tr>
</table>

如果您无法访问既唯一ID，或者可以访问jQuery，则使用.find('div') 遍历DOM 非常简单，它返回所有<div> 节点的数组。从那里您可以简单地指定所需的索引：

var element_1 = $(document).find('div')[0];
var element_2 = $(document).find('div')[1];
console.log(element_1);
console.log(element_2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>This is table 1</div>
<table>
  <tr>
    <td>
      <a>
      </a>
    </td>
  </tr>
</table>
<div>This is table 2</div>
<table>
  <tr>
    <td>
      <a>
      </a>
    </td>
  </tr>
</table>

或者，使用原始 JavaScript，可能会使用 .childNodes 定位元素（使用 .firstElementChild 更容易）。您仍然需要从“独特”点开始工作，在这种情况下，您需要从 body 甚至 document 本身开始工作。

请注意，在此示例中，childNodes[5] 属于第二个<div>，因为每个“节点”都以该节点的描述符开头。因此，childNodes[1] 引用第一个 <div>，childNodes[3] 引用 <table>，childNodes[5] 引用第二个 <div>。

var element_1 = document.body.firstElementChild;
var element_2 = document.body.childNodes[5];
console.log(element_1);
console.log(element_2);

<div>This is table 1</div>
<table>
  <tr>
    <td>
      <a>
      </a>
    </td>
  </tr>
</table>
<div>This is table 2</div>
<table>
  <tr>
    <td>
      <a>
      </a>
    </td>
  </tr>
</table>

希望这会有所帮助！ :)

【讨论】：

【解决方案2】：

另一种更短的方法是使用DOMParser。 DOMParser.parseFromString 会将您的 html 代码解析为 DOMDocument 对象。 DOMDocument 对象有 body 对象。而反过来身体有孩子。您的 table1 是该列表中的第二个孩子。

let source = "..." //your html text above
// method 1: use DOMParser
let dom = (new DOMParser()).parseFromString(source, 'text/html')
let table1 = dom.body.children[1]

试试这个https://codepen.io/minht/pen/EXbgXY?editors=0010#0

【讨论】：

这是做什么的？这如何回答这个问题？不要在没有解释的情况下就脱口而出！
你应该把它放在你的答案中，而不是作为对你答案的评论。