Question

  function seeListItems() {
    var olElement = document.getElementById("toDoList");
    var st = "";

    for (var i=0; i < olElement.childNodes.length; i++) {
        if(olElement.childNodes[i].nodeType == 1) {
	        st += olElement.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 == 3) {
            str += pElement.childNodes[j].nodeValue;
        }
    }
    alert(str);
}

<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>

需要使用子节点显示列表中的文本（所有三行）。它适用于toDoNotes，但不适用于toDoList，试图将nodeValue更改为nodeName，并且没有任何改变。在执行代码时，也使用节点类型播放并且仍然没有更改，第一个警报为空白，第二个警报正常工作

Answer 1

实际上，任何childNode[0]中的element都是textNode，因此您可以从childNode[1]开始。同样，所有偶数childNodes都将是textNodes，因此您必须按如下所示打印childNodes的奇数#toDoList的值；

function seeListItems() {
    var oiElement = document.getElementById("toDoList");
    var st = "";
    for (var i = 1; i < oiElement.childNodes.length; i=i+2) {
        if (oiElement.childNodes[i].childNodes[0].nodeType == 3) {
            st = st + oiElement.childNodes[i].childNodes[0].nodeValue + "\n";
        } 
    }
    alert(st);
}

<!DOCTYPE html>
<html>

<head>
    <title>To-Do List</title>
    <script src="to.js"></script>
</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>
    <button onclick="seeListItems()">
        Show works
    </button>

查看图片以获得更多说明；

Answer 2

您可以使用它：

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);
}

编辑：简化=>

<script>
function seeListItems() {
    document.querySelectorAll("#toDoList li").forEach(function(li){
      alert(li.innerText);
    })

    alert(document.getElementById("toDoNotes").innerText);
}
</script>

Answer 3

脚本olElement中有一个错字未在任何地方定义。

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);
}

<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>

Answer 4

您的代码中有错字。 var oiElement = document.getElementById("toDoList");应该是var olElement = document.getElementById("toDoList");。

此外，您是否考虑过使用jQuery。我认为这将大大简化您的工作。有人因为它的大小而抨击jQuery，但我认为它没有那么糟糕。考虑要保存多少行代码，还算不错！

考虑以下示例：

function seeListItems()
{
  $("#toDoList").children('li').each(function(){
    console.log($(this).text());
  });
}

<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>

Answer 5

为清楚起见，我进行了以下更改：

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);

}

您还将oiElement误认为是olElement。

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

5 个答案: