记录整个HTML元素而不仅仅是外部选择器？

Question

说我有一个简单的清单：

<ul>
  <li>
    <a href="/page1">Item 1</a>
  </li>
  <li>
    <a href="/page2">Item 2</a>
  </li>
</ul>

如果我遍历该列表并注销每个项目，则似乎只记录了li，而不记录其中的HTML。

var items = document.querySelectorAll("li");
for (var i = 0; i < items.length; i++) {
   console.log(items[i]);
}

有没有办法记录整个元素，包括链接和文本？

Answer 1

您可以使用.outerHTML获取元素的html字符串表示形式，其中包括元素的子节点的字符串表示形式

for (var i = 0; i < items.length; i++) {
   console.log(items[i].outerHTML);
}

您还可以迭代item[i] .childNodes

for (var i = 0; i < items.length; i++) {
   console.log(items[i]);
   for (var j = 0; j < items[i].childNodes.length; j++) {
     console.log(items[i].childNodes[j]);
   }
}

Answer 2

检查此工作代码

 window.onload = function () { var items = document.querySelectorAll("li"); for (var i = 0; i < items.length; i++) { console.log(items[i].innerHTML); } } 

 <ul> <li> <a href="/page1">Item 1</a> </li> <li> <a href="/page2">Item 2</a> </li> </ul>