Vue项目中getElementsByClassName获取元素后innerHTML/innerText返回undefined问题

我在基于Vue.js开发的页面中，尝试通过document.getElementsByClassName("parent-nav")获取元素结构并修改HTML文本值，但调用document.getElementsByClassName("parent-nav").innerHTML或document.getElementsByClassName("parent-nav").innerText时，即便元素本身存在对应值，仍返回undefined。请问我忽略了什么？

你忽略的核心点 #

document.getElementsByClassName()返回的不是单个DOM元素，而是一个HTMLCollection（类数组的元素集合）。从你给出的返回结构也能看到，结果明确标记为HTMLCollection，还带有length:1的属性——这说明它是一个包含单个元素的集合，而非元素本身。

集合本身并没有.innerHTML或.innerText属性，只有集合里的具体DOM元素才有这些属性，所以直接在集合上访问自然会得到undefined。

解决方法 #

• 方法1：从集合中取出具体元素
  你的集合里只有1个元素，直接通过索引获取第一个元素即可：

  // 获取第一个匹配的元素
  const parentNav = document.getElementsByClassName("parent-nav")[0];
  // 现在可以正常访问和修改
  console.log(parentNav.innerHTML); // 会输出"<span>Photos</span>"
  parentNav.innerText = "新的导航文本";
  

• 方法2：使用querySelector直接获取单个元素
  document.querySelector()会直接返回匹配选择器的第一个DOM元素，比处理集合更简洁：

  const parentNav = document.querySelector(".parent-nav");
  console.log(parentNav.innerText); // 输出"Photos"
  

• 方法3：Vue推荐的方式——使用ref
  既然是Vue项目，更推荐遵循Vue的响应式思路，避免直接操作DOM：

  1. 在模板里给目标元素添加ref：

     <a ref="parentNav" class="nav-link dropdown-toggle parent-nav">...</a>
     

  2. 在组件代码中通过$refs访问元素：

     // 访问元素
     console.log(this.$refs.parentNav.innerText);
     // 修改文本
     this.$refs.parentNav.innerText = "新导航标题";
     

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