Спецификация вывода c дочерний элемент в alert () при клике (pure JS)

Question

Я пытаюсь получить предупреждение, как только я нажимаю на элемент списка, содержащий только заголовок этого элемента списка.

Я очень устал, но я только начинаю учиться, и дошел только до того, чтобы вывести полный внутренний HTML элемента.

https://jsfiddle.net/9cbjde5s/2/

function createEventHandler(items, i) {
  return function() {
    alert(items[i].innerHTML);
  };
}
onload = function() {
  var view = document.getElementById('view');
  var items = view.getElementsByTagName('li');
  for (var i = 0; i < items.length; i++) {
    items[i].onclick = createEventHandler(items, i);
  }
};

.list-item {
  background-color: Gray;
  list-style: none;
}

<ul id='view'>
  <li class="list-item">
    <p class="author">some author</p>
    <p class="title">Title1</p>
    <p class="date">01.01.2020</p>
  </li>

  <li class="list-item">
    <p class="author">some author2</p>
    <p class="title">Title2</p>
    <p class="date">01.01.2020</p>
  </li>

  <li class="list-item">
    <p class="author">some author</p>
    <p class="title">Title3</p>
    <p class="date">01.01.2020</p>
  </li>
</ul>

Answer 1

Это решение было бы еще лучше, поэтому вы не учитываете узлы, а ссылаетесь на дочерний элемент по имени класса:

function createEventHandler(items, i) {
  return function() {
    alert(items[i].querySelector('.title').innerHTML);
  };
}
onload = function() {
  var view = document.getElementById('view');
  var items = view.getElementsByTagName('li');
  for (var i = 0; i < items.length; i++) {
    items[i].onclick = createEventHandler(items, i);
  }
};

.list-item {
  background-color: Gray;
  list-style: none;
}

<ul id='view'>
  <li class="list-item">
    <p class="author">some author</p>
    <p class="title">Title1</p>
    <p class="date">01.01.2020</p>
  </li>

  <li class="list-item">
    <p class="author">some author2</p>
    <p class="title">Title2</p>
    <p class="date">01.01.2020</p>
  </li>

  <li class="list-item">
    <p class="author">some author</p>
    <p class="title">Title3</p>
    <p class="date">01.01.2020</p>
  </li>
</ul>

Answer 2

Обратитесь к дочернему узлу, содержащему заголовок, например:

function createEventHandler(items, i) {
  return function() {
    alert(items[i].childNodes[3].innerHTML);
  };
}
onload = function() {
  var view = document.getElementById('view');
  var items = view.getElementsByTagName('li');
  for (var i = 0; i < items.length; i++) {
    items[i].onclick = createEventHandler(items, i);
  }
};

.list-item {
  background-color: Gray;
  list-style: none;
}

<ul id='view'>
  <li class="list-item">
    <p class="author">some author</p>
    <p class="title">Title1</p>
    <p class="date">01.01.2020</p>
  </li>

  <li class="list-item">
    <p class="author">some author2</p>
    <p class="title">Title2</p>
    <p class="date">01.01.2020</p>
  </li>

  <li class="list-item">
    <p class="author">some author</p>
    <p class="title">Title3</p>
    <p class="date">01.01.2020</p>
  </li>
</ul>