YouTube用户脚本开发：通过类名获取<a>标签href属性的问题与解决

我正在开发一款YouTube用户脚本，想通过类名拿到特定<a>标签的href属性，但运行下面的代码后，控制台一直输出undefined：

var x = document.getElementsByClassName("mix-playlist").getAttribute("href"); 
console.log(x);

对应的HTML结构是：

<a class="XY XY XY mix-playlist XY" href="XY"></a>

已自行解决问题 #

折腾了半天终于搞定了！问题其实出在两个地方：

• 脚本执行得太早了，DOM还没完全加载完成就去查找元素，肯定找不到目标标签
• getElementsByClassName返回的是HTMLCollection类数组对象，不是单个元素，不能直接调用getAttribute方法

修正后的代码把逻辑放到了DOMContentLoaded事件监听里，同时处理了返回的集合：

document.addEventListener("DOMContentLoaded", function() {
  // 获取类名为mix-playlist的第一个元素
  var playlistLink = document.getElementsByClassName("mix-playlist")[0];
  if(playlistLink) { // 先判断元素是否存在，避免报错
    var href = playlistLink.getAttribute("href");
    console.log(href);
  }
});

之前在Stack Overflow搜了20分钟没找到有用的信息，不过好在自己摸索出来了～

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