有一个 JS 函数给我一个 DOM 树列表，我需要让用户输入 Id，这将是输出列表中的第一个，在打印之前列表中没有 DOM 对象。我真的不知道该怎么做。
我想从提示中获取 Id (div1/image1/parag1...) 而不是将其用作参数，但我不知道如何在代码中实现它。
function DOMTree(e, ul = document.getElementById('tree')) {
for (let i = 0; i < e.childNodes.length - 1; i++) {
if (e.childNodes[i].id != 'tree') {
let li = document.createElement('li');
let el = e.childNodes[i];
if (e.childNodes[i].id != undefined) {
li.innerText = e.childNodes[i].nodeName + ' ' + e.childNodes[i].id;
ul.append(li);
}
let ul1 = document.createElement('ul');
DOMTree(e.childNodes[i], ul1);
ul.append(ul1);
}
}
}
function buttonF() {
DOMTree(document.body);
var input = prompt("From which element do you want to show DOM?");
document.getElementById(input);
input = document.getElementById();
document.getElementById(input)
}<body>
<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>
<script src="jscode.js"></script>
</body>你几乎拥有它。
首先，您需要从您所做的提示中获取输入。然后将其作为第一个参数传递给 getElementById，然后将目标作为第二个参数传递。
function buttonF(){
var input = prompt("From which element do you want to show DOM?");
DOMTree(document.getElementById(input),document.querySelector("#idList"));
}
function DOMTree(e, ul = document.getElementById('tree')) {
for (let i = 0; i < e.childNodes.length - 1; i++) {
if (e.childNodes[i].id != 'tree') {
let li = document.createElement('li');
let el = e.childNodes[i];
if (e.childNodes[i].id != undefined) {
li.innerText = e.childNodes[i].nodeName + ' ' + e.childNodes[i].id;
ul.append(li);
}
let ul1 = document.createElement('ul');
DOMTree(e.childNodes[i], ul1);
ul.append(ul1);
}
}
}
function buttonF(){
var input = prompt("From which element do you want to show DOM?").replace("#","");
DOMTree(document.getElementById(input),document.querySelector("#idList"));
}<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>