如何获取未知嵌套层级的子元素指定属性值？

针对你无法提前确定子节点嵌套层级，不能写死链式childNodes索引的问题，可根据需求场景选择以下两种最优实现：

方案1：原生DOM选择器（普通场景首选） #

如果你的需求是找到父节点下所有后代元素中第一个带有placeholder属性的元素，直接调用querySelector方法即可，无需手动处理层级逻辑，性能最高：

// 匹配parent下第一个带placeholder属性的后代元素，自动遍历所有嵌套层级
const targetElement = parent.querySelector('[placeholder]');
// 取值前做空判断避免报错
const placeholderValue = targetElement ? targetElement.getAttribute('placeholder') : null;

该方法调用浏览器原生选择器引擎实现，代码量最少，兼容所有现代浏览器和IE8+。

方案2：递归遍历（自定义筛选场景适用） #

如果你有额外的筛选规则（比如需要同时匹配元素类型、其他属性等），可以封装递归遍历函数实现灵活的自定义逻辑：

/**
 * 从父节点的所有后代中查找带有指定属性的元素，返回属性值
 * @param {HTMLElement} parent 父节点
 * @param {string} attrName 要查找的属性名
 * @returns {string|null} 找到的属性值，未找到返回null
 */
function getAttrFromNestedDescendant(parent, attrName) {
  // 遍历当前节点的所有直接子元素（children仅包含元素节点，过滤文本、注释等非元素节点）
  for (const child of parent.children) {
    // 先检查当前子元素是否存在目标属性
    if (child.hasAttribute(attrName)) {
      return child.getAttribute(attrName);
    }
    // 递归遍历当前子元素的后代
    const result = getAttrFromNestedDescendant(child, attrName);
    if (result !== null) {
      return result;
    }
  }
  // 所有后代都未匹配到返回null
  return null;
}

// 调用示例
const placeholderValue = getAttrFromNestedDescendant(parent, 'placeholder');

额外说明： #

• 如果你需要匹配所有符合条件的元素而非第一个，可修改递归函数，用数组存储所有匹配到的属性值最后统一返回即可
• 如果确实需要处理childNodes包含的文本、注释等非元素节点，把遍历对象从parent.children换成parent.childNodes，同时加节点类型判断即可

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