点击时输出altert（）中的特定子元素（纯JS）

Question

我试图单击列表元素（仅包含该列表元素的标题）时就收到警报。

我很累，但是我才刚刚开始学习，到目前为止我只能输出该元素的完整innerHTML。

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

Answer 2

此解决方案会更好，因此您无需计算节点数，而是通过类名引用子级：

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>