我正在尝试从 HTML 文档中提取类和 ID。<textarea class="output"></textarea>我希望在单击“提交”按钮时显示结果。HTML： <div id="fullwidth"> <div id="wrapper"> <div id="content"> <div class="fifty"> <textarea class="input"> <div class="font step_footer"> <div class="container"> <div class="font-in"> <ul class="d-flex flex-wrap"> <li class="col-md-3 col-4"> <div class="font-list"> <p>Notre équipeM<br> reconnus<br>obtient<br>istance</p> </div> </li> </ul> </div> </div> </div> </textarea> <div id="button-div"> <button id="button">Submit</button> </div> </div> <div class="fifty"> <textarea class="output"></textarea> </div> </div> </div> </div>javascript: const main = () => { console.log(emptyInnerHTML(document.body)) } const emptyInnerHTML = (element) => { return renderHTML(describeHTML(element)).innerHTML } const describeHTML = (node) => { return ({ tagName: node.tagName, id: node.id || undefined, classList: [...node.classList], children: [...node.childNodes] .filter(child => child.nodeType != Node.TEXT_NODE && child.tagName !== 'SCRIPT') .map(child => describeHTML(child)) }) } const renderHTML = (tree) => { let node = document.createElement(tree.tagName) if (tree.id) node.setAttribute('id', tree.id) if (tree.classList && tree.classList.length) node.className = tree.classList.join(' ') if (tree.children && tree.children.length) { tree.children.forEach(child => node.appendChild(renderHTML(child))) } return node } main()检查 Codepen Console 选项卡时就会出现结果。我为它创建了一个 Codepen 页面。您可以在此 Codepen 链接中看到它： https ://codepen.io/coderco/pen/BajJMav 我想在单击“提交”按钮时将其作为结果。
2 回答
慕哥6287543
TA贡献1831条经验 获得超10个赞
工作代码！！
观察右侧的输出textarea，单击submit按钮后，您将能够看到与当前加载时看到的相同结果。
const main = () => {
document.getElementById("resultArea").value = emptyInnerHTML(document.body);
};
const emptyInnerHTML = (element) => {
return renderHTML(describeHTML(element)).innerHTML;
};
const describeHTML = (node) => {
return {
tagName: node.tagName,
id: node.id || undefined,
classList: [...node.classList],
children: [...node.childNodes]
.filter(
(child) =>
child.nodeType != Node.TEXT_NODE && child.tagName !== "SCRIPT"
)
.map((child) => describeHTML(child))
};
};
const renderHTML = (tree) => {
let node = document.createElement(tree.tagName);
if (tree.id) node.setAttribute("id", tree.id);
if (tree.classList && tree.classList.length)
node.className = tree.classList.join(" ");
if (tree.children && tree.children.length) {
tree.children.forEach((child) => node.appendChild(renderHTML(child)));
}
return node;
};
const onSubmit = () => {
main();
};
#fullwidth {
width: 100%;
display: inline-block;
font-family: Arial;
}
#wrapper {
margin: 0 auto;
width: 1100px;
}
#content {
width: 100%;
display: inline-block;
}
.fifty {
width: 50%;
float: left;
padding: 5px;
box-sizing: border-box;
}
.input,
.output {
width: 100%;
height: 200px;
border: 1px solid #ccc;
border-radius: 9px;
padding: 10px;
box-sizing: border-box;
}
#button-div {
width: 100%;
display: inline-block;
}
#button {
float: right;
width: 125px;
height: 50px;
border-radius: 9px;
border: 1px solid #db4907;
background: #ec350b;
color: #fff;
font-size: 18px;
text-transform: uppercase;
}
#button:hover {
color: #000;
}
<div id="fullwidth">
<div id="wrapper">
<div id="content">
<div class="fifty">
<textarea class="input">
<div class="font step_footer">
<div class="container">
<div class="font-in">
<ul class="d-flex flex-wrap">
<li class="col-md-3 col-4">
<div class="font-list">
<img src="/img/font-img1.png" width="145" alt="img">
<p>Notre équipeM<br> reconnus<br>obtient<br>istance</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</textarea>
<div id="button-div">
<button id="button" type="submit" onclick="onSubmit()">Submit</button>
</div>
</div>
<div class="fifty">
<textarea id="resultArea" class="output"></textarea>
</div>
</div>
</div>
</div>
慕勒3428872
TA贡献1848条经验 获得超6个赞
<div id="button-div"> <button id="button" type="submit">Submit</button> </div>
- 2 回答
- 0 关注
- 103 浏览
添加回答
举报
0/150
提交
取消