网络技术问题 | JavaScript 课程测验 1 |问题 5

在 JavaScript 课程测验 1 中，问题 5 似乎是导致很多学生烦恼的部分。问题要求给出一个特定的代码段，并要求编写程序来输出代码中的特定元素。以下是问题 5 的代码段：

<div id="container">
  <h1>Title</h1>
  <p>Lorem ipsum dolor sit amet</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

为了回答这个问题，我们需要编写一些 JavaScript 代码。下面是一个可能的答案：

var container = document.getElementById('container');
var h1 = container.getElementsByTagName('h1')[0];
var p = container.getElementsByTagName('p')[0];
var ul = container.getElementsByTagName('ul')[0];
var li1 = ul.getElementsByTagName('li')[0];
var li2 = ul.getElementsByTagName('li')[1];
var li3 = ul.getElementsByTagName('li')[2];

console.log(h1.innerHTML);
console.log(p.innerHTML);
console.log(li1.innerHTML);
console.log(li2.innerHTML);
console.log(li3.innerHTML);

这个代码块首先通过 Id 获取了包含所有内容的 div 元素，并且获取了 div 中包含的所有元素。然后，它将每个元素存储在一个变量中，并使用 console.log() 方法来输出每个元素的 innerHTML。由于 innerHTML 属性返回元素内部的所有 HTML，因此这将输出标题，段落和列表中的每一项。

有些人可能会发现这个过程有些冗长。幸运的是，现代浏览器已经添加了更简单的方法来编写这个示例。可以使用 querySelector() 和 querySelectorAll() 方法来轻松选择元素。以下是使用这种方法的代码块：

var h1 = document.querySelector('#container h1');
var p = document.querySelector('#container p');
var lis = document.querySelectorAll('#container li');

console.log(h1.innerHTML);
console.log(p.innerHTML);
console.log(lis[0].innerHTML);
console.log(lis[1].innerHTML);
console.log(lis[2].innerHTML);

这个代码块执行相同的操作，但使用 querySelector() 和 querySelectorAll() 方法来查找元素。这里的语法更加简单，代码量也更少。在这个示例中，我们将标题、段落和列表项提取到变量中，并将它们用于输出 innerHTML。

在回答 JavaScript 测验问题 5 的过程中，可以使用任何一种方法来查找元素。虽然使用 querySelector() 和 querySelectorAll() 可以使您的代码更短，但是如果您更习惯于使用传统的方法，则可以继续使用它们。重要的是要知道这些方法，并能够在需要时使用它们。

以上是JavaScript 的问题5的介绍，希望对所有的程序员有所帮助。