从指定ID元素开始输出DOM元素列表

function DOMTree(e, ul) {
  if (!e) return; // 增加判空处理，防止找不到元素时报错
  for (let i = 0; i < e.childNodes.length; i++) { // 修改循环条件，包含最后一个子节点
    let child = e.childNodes[i];
    if (child.nodeType === Node.ELEMENT_NODE) { // 确保是元素节点
      let li = document.createElement('li');
      if (child.id) {
        li.innerText = child.nodeName + ' ' + child.id;
      } else {
        li.innerText = child.nodeName; // 如果没有ID，只显示节点名
      }
      ul.appendChild(li);

      let ul1 = document.createElement('ul');
      DOMTree(child, ul1);
      li.appendChild(ul1); // 将子列表添加到当前列表项中
    }
  }
}

function buttonF() {
  var input = prompt("From which element do you want to show DOM?").replace("#","");
  var startElement = document.getElementById(input);
  var targetList = document.querySelector("#idList");

  // 清空之前的列表内容
  targetList.innerHTML = '';

  DOMTree(startElement, targetList);
}

<div id="div1">
  <h2 id="header1">
    Simple text, nothing special.
  </h2>

  <p id="parag1"> Тext of parag1.</p>

  <img id="image1" src='img/cactus.png' width="150"><br>
</div>

<div id="div2">
  <h2 id="header2">
    Still same text.
  </h2>

  <p id="parag2">Text of parag2.</p>

  <img id="image2" src ="img/sunflower.png" width="150"> <br>
</div>

<ul id="idList"></ul>


<button id = "button1" onclick = "buttonF()">Show the DOM tree:</button><br><br>