需要使用子节点显示列表中的文本

作者: 不想吃东西
发布时间: 2025-02-07 06:46:35 (3天前)
转自：

5 条回复

0#
回复此人
哇塞 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 脚本中有拼写错误 <code> olElement </code> 没有在任何地方定义。 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> function seeListItems() { var oiElement = document.getElementById("toDoList"); var st = ""; for (var i = 0; i < oiElement.childNodes.length; i++) { if (oiElement.childNodes[i].nodeType == 3) { st += oiElement.childNodes[i].nodeValue; } } alert(st); var pElement = document.getElementById("toDoNotes"); var str = ""; for (var j = 0; j < pElement.childNodes.length; j++) { if (pElement.childNodes[j].nodeType == 1) { str += pElement.childNodes[j].nodeValue; } } alert(str); } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <h1>Things To Do</h1> <ol id="toDoList"> <li>Mow the lawn</li> <li>Clean the windows</li> <li>Answer your email</li> </ol> <p id="toDoNotes">Make sure all tasks are done by 10pm.</p> <button type="button" onclick="seeListItems();">Run function</button> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
1#
回复此人
庸人自扰1 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 为了清楚起见，我只做了以下更改： </p> <pre> <code> function seeListItems() { var oiElement = document.getElementById("toDoList"); var st = ""; for (var i=0; i < oiElement.childNodes.length; i++) { if(oiElement.childNodes[i].nodeType === Node.ELEMENT_NODE) { st += oiElement.childNodes[i].firstChild.nodeValue; } } alert(st); var pElement = document.getElementById("toDoNotes"); var str = ""; for (var j=0; j < pElement.childNodes.length; j++) { if(pElement.childNodes[j].nodeType === Node.TEXT_NODE) { str += pElement.childNodes[j].nodeValue; } } alert(str); </code> </pre> <P> } </p> <P> 你也把oiElement误认为是元素。 </p> </DIV>

编辑
2#
回复此人
句号了哦哦 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您的代码中有拼写错误。 <code> var oiElement = document.getElementById("toDoList"); </code> 应该 <code> var olElement = document.getElementById("toDoList"); </code> 。 </p> <P> 另外，你考虑过使用jQuery吗？我认为这会大大简化你想要做的事情。有些人因为它的大小而抨击jQuery，但我认为它并不那么糟糕。考虑一下您将节省多少行代码，这并不算太糟糕！ </p> <P> 考虑这个例子： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> function seeListItems() { $("#toDoList").children('li').each(function(){ console.log($(this).text()); }); } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>To-Do List</title> </head> <body> <h1>Things To Do</h1> <ol id="toDoList"> <li>Mow the lawn</li> <li>Clean the windows</li> <li>Answer your email</li> </ol> <p id="toDoNotes">Make sure all tasks are done by 10pm.</p> <button type="button" onclick="seeListItems();">Run function</button> </body> </html> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
3#
回复此人
My☀ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你可以用它： </p> <pre> <code> function seeListItems() { var olElements = document.querySelectorAll("#toDoList li"); olElements.forEach(function(li){ alert(li.innerText); }) var pElement = document.getElementById("toDoNotes"); var str = ""; for (var j=0; j < pElement.childNodes.length; j++) { if(pElement.childNodes[j].nodeType == 1) { str += pElement.childNodes[j].nodeValue; } } alert(str); } </code> </pre> <P> 编辑：简化=＆gt; </p> <pre> <code> <script> function seeListItems() { document.querySelectorAll("#toDoList li").forEach(function(li){ alert(li.innerText); }) alert(document.getElementById("toDoNotes").innerText); } </script> </code> </pre> </DIV>

编辑

登录后才能参与评论