第一个 JavaScript 之后列表中的每个元素

在学习 JavaScript 的过程中，第一个学习的就是列表。通过学习列表，可以快速的掌握 JavaScript 的基本语法和概念，为后续的学习打下坚实的基础。

在列表中的每个元素都是一个对象，它们有着各自的属性和方法，这些属性和方法可以用来操作元素的内容、样式和事件。

列表元素的属性

列表元素的最常见的属性就是innerHTML和textContent。前者用于获取或设置元素的 HTML 内容，后者用于获取或设置元素的纯文本内容。

// 获取列表中第一个元素的文本内容
const firstItem = document.querySelector("ul li:first-of-type");
console.log(firstItem.textContent);

// 将列表中第一个元素的 HTML 内容替换为新的内容
firstItem.innerHTML = "<strong>Hello, world!</strong>";

除了innerHTML和textContent之外，还有一些常见的属性，包括id、className、style、value等。这些属性可以用来设置元素的唯一标识、类名、样式和值等。

列表元素的方法

列表元素的方法可以用来修改元素的内容、样式和事件。其中最常见的方法是addEventListener，用于给元素添加事件监听器。

// 给列表中第一个元素添加点击事件监听器
firstItem.addEventListener("click", function () {
  console.log("Hello, world!");
});

此外，列表元素还有很多其他方法，比如appendChild、removeChild、insertBefore等。这些方法可以用来添加、删除和移动列表中的元素。

总结

在学习 JavaScript 的过程中，第一个学习的就是列表。学习列表元素的属性和方法可以帮助我们更好的掌握 JavaScript 的基本语法和概念。列表元素的属性和方法还有很多其他的用法，需要逐步掌握。