获取Javascript结果的精确内部文本

Question

我在一个网站上运行这个脚本：

document.forms[0].getElementsByTagName('input')[2]

它的输出是：

<input _ngcontent-aui-c140="" pinputtext="" type="password" formcontrolname="password" autocomplete="current-password" class="ng-untouched ng-pristine ng-invalid p-inputtext p-component">

这正是我所需要的(或者用逗号分隔的东西)。当我试图将它转换为一个使用JSON.stringify的字符串时，它会给出一个TypeError: Converting circular structure to JSON错误。没问题，我也可以借助以下工具将循环结构转换为字符串：Chrome sendrequest错误：TypeError：将循环结构转化为JSON

但它会返回许多额外的未知字符串！我只需要逗号分隔格式(JSON)的内部HTML。我该怎么办？

Answer 1

您可以使用outerHTML获取元素及其子元素的HTML：

const input = document.forms[0].getElementsByTagName('input')[2];
console.log(input.outerHTML);

<form>
<input>
<input>
<input _ngcontent-aui-c140="" pinputtext="" type="password" formcontrolname="password" autocomplete="current-password" class="ng-untouched ng-pristine ng-invalid p-inputtext p-component">
</form>

我只需要逗号分隔格式(JSON)的内部HTML。我该怎么办？

如果您的意思是希望表单中所有的input都有上述内容，那么您可以循环遍历getElementsByTagName的结果，获得它们中每个的outerHTML，并将字符串与join(",")连接在一起。(尽管我可能不会使用CSV。)

const inputs = document.forms[0].getElementsByTagName('input');
const strings = Array.prototype.map.call(
inputs,
input => input.outerHTML
);
console.log("Joined with a comma:");
console.log(strings.join(","));
console.log("As JSON:");
console.log(JSON.stringify(strings));

<form>
<input type="text" class="example">
<input type="date" class="blah">
<input _ngcontent-aui-c140="" pinputtext="" type="password" formcontrolname="password" autocomplete="current-password" class="ng-untouched ng-pristine ng-invalid p-inputtext p-component">
</form>