如何获取getElementsByTagName返回值的最后一个下标以修改末尾段落

你现有代码中使用固定索引1获取p元素，由于DOM查询返回的集合从0开始计数，[1]固定对应第二个段落，因此只能修改第二个段落。针对你的需求有两种调整方式：

方式1：固定修改第三个段落 #

如果只是要定位到当前的第三个段落，不需要适配后续新增的内容，直接把索引值从1改为2即可：

function myFunction() {
  document.getElementsByTagName("p")[2].innerHTML = "Hello World!";
}

方式2：自动适配修改最新添加的最后一个段落 #

如果要实现不管新增多少个段落，永远修改最后添加的那个最新段落，就通过集合长度动态计算索引：

function myFunction() {
  const pList = document.getElementsByTagName("p");
  // 长度减1永远对应最后一个元素的索引，会随页面p元素数量自动变化
  pList[pList.length - 1].innerHTML = "Hello World!";
}

原理说明 #

• document.getElementsByTagName("p")返回的是实时更新的类数组集合，会自动同步当前页面所有p元素的最新数量
• 用集合的length属性减1得到的索引，永远指向最后一个p元素，不需要每次新增段落手动修改索引值

内容的提问来源于stack exchange，提问作者Collin Davis