JavaScript获取append追加HTML元素属性返回undefined问题

find方法里调用firstChild拿到的不是你动态追加的img元素，是id="b"的div内部的空白文本节点。
你的HTML中<div id="b">和闭合标签之间存在换行、缩进空格，浏览器会把这类空白内容解析为文本节点，排在所有子节点的最前面。文本节点没有className、src这类HTML元素专属属性，所以输出undefined，全程也不会触发报错。
你在add函数里重复给src、class属性赋值的写法不会触发这个问题，后赋值的内容会正常覆盖前值。

• 优先用firstElementChild替换firstChild：这个API只会返回第一个子元素节点，自动跳过空白文本、注释等非元素节点，兼容性覆盖所有主流浏览器。
  修复后的find函数代码：

function find() {
  console.log("find");
  const elm = document.getElementById("b").firstElementChild;
  console.log(elm.className); // 正常输出 lpoop
  console.log(elm.src); 
  // 注意：直接读src属性会返回浏览器自动补全的绝对路径，如果需要拿到你设置的原始值/poop，改用elm.getAttribute('src')即可
}

• 如果需要兼容不支持firstElementChild的老旧环境，可以手动遍历子节点过滤出元素节点（元素节点的nodeType值固定为1）：

function find() {
  console.log("find");
  const nodeList = document.getElementById("b").childNodes;
  let elm = null;
  for (let i = 0; i < nodeList.length; i++) {
    if (nodeList[i].nodeType === 1) {
      elm = nodeList[i];
      break;
    }
  }
  console.log(elm.className);
  console.log(elm.src);
}

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