Необходимо отобразить текст из списка с использованием дочерних узлов

ProgramBox

Необходимо отобразить текст из списка с использованием дочерних узлов

Post author:admin
Запись опубликована:28 мая, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

   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, и это ничего не изменило. также игралось с типом узла и по-прежнему без изменений, при выполнении кода первое предупреждение пустое, а второе работает должным образом

Ответ №1:

На самом деле childNode[0] из any element является a textNode , поэтому вы могли бы начать с childNode[1] . Аналогично все четные childNodes будут textNodes , поэтому вам нужно вывести значение odd 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>

Смотрите изображение для получения дополнительных разъяснений;

Ответ №2:

В скрипте есть опечатка 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>

Ответ №3:

Вы можете использовать это :

 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>

1. спасибо, но мне нужно использовать почти тот же метод, который используется со вторым идентификатором, который является «toDoNotes»

2. Какую его часть вы хотите использовать конкретно?

3. Мне нужно получить оповещение, в котором будут показаны все 3 предложения из списка. Я должен использовать node (мы находимся в главе dom), но я не понимаю, в чем ошибка

Ответ №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>

Ответ №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.