JS开发视频选择器时调用appendChild方法报错问题咨询

问题原因分析 #

• 第一个报错Uncaught TypeError: video.appendChild is not a function的核心原因：document.getElementsByClassName返回的是包含所有匹配类名元素的类数组集合，不是单个DOM元素，集合本身没有appendChild方法，你需要取集合里的第一个匹配元素使用。
• 获取元素返回null的原因：你的JS代码执行时机早于DOM元素渲染，浏览器还没解析到<video>标签就已经执行了获取元素的代码，自然拿不到节点。
• 额外的语法错误：
  1. HTML里<option>的自定义属性写法错误，data-show: "2020"要改成data-show="2020"，属性赋值用等号不是冒号
  2. jQuery事件绑定的选择器写错，.vid-select是类选择器，前面要加.，你写的$("vid-select")匹配不到任何元素
  3. 切换视频后需要手动调用video.load()才会加载新的源地址

修正后的代码示例 #

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="past-player">
  <select class="vid-select" data-target=".past-player .player">
    <option data-show="2020">2020</option>
    <option data-show="1">1</option>
    <option data-show="2">2</option>
    <option data-show="3">3</option>
    <option data-show="4">4</option>
    <option data-show="5">5</option>
    <option data-show="6">6</option>
    <option data-show="7">7</option>
  </select>
  <video class="player"></video>
</div>
<!-- JS代码放在DOM元素末尾，确保DOM加载完成再执行 -->
<script src="你的JS文件路径"></script>

JS部分 #

// 确保DOM完全加载后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 取第一个匹配的video元素
  var video = document.getElementsByClassName("player")[0];
  var source = document.createElement("source");
  source.setAttribute("src", "../shows/2020.mp4");
  video.appendChild(source);
  // 加载完成后播放
  video.load();
  video.play();

  // 类选择器加.前缀
  $(document).on("change", ".vid-select", function() {
    var show = $("option:selected", this).data("show");
    source.setAttribute("src", "../shows/" + show + ".mp4");
    // 切换源后重新加载播放
    video.load();
    video.play();
  })
})

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