Question

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

我需要从以下示例中提取表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>

谢谢！

Answer 1

通常，您会为目标元素指定唯一ID，并使用document.getElementById('[target]')

进行定位

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果您无法访问唯一ID，但又可以访问 jQuery ，则很容易使用.find('div')转换DOM，返回所有<div>个节点的数组。从那里你可以简单地指定所需的索引：

＆＃13;

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

＆＃13;

<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>

＆＃13;

或者，使用原始JavaScript，可能会使用.childNodes定位元素（使用.firstElementChild更容易）。你仍然需要从一个独特的＆＃39;在这种情况下，您希望在body，甚至是document本身工作。

请注意，在此示例中，childNodes[5]与第二个<div>相关，因为每个＆＃39;节点＆＃39;以该节点的描述符开头。因此，childNodes[1]引用了第一个<div>，childNodes[3]引用了<table>，childNodes[5]引用了第二个<div>。

＆＃13;

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

＆＃13;

<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>

＆＃13;

希望这有帮助！：）

Answer 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

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

2 个答案: