如何将JavaScript嵌套对象属性完整路径转为字符串用于DOM元素ID命名

我明白你想要的是把嵌套对象里目标属性的完整访问路径（比如myBowtie.Cause1.Barrier1）转成字符串，用来给DOM元素设置ID，这样后续能直接关联到对应的对象属性。这里有个简单可行的方案，核心是在遍历对象时传递并拼接父级路径，下面给你具体修改代码：

方案：遍历对象时传递父路径 #

我们可以给displayBowtie函数加一个可选的parentPath参数，用来记录当前属性的上层路径。每次遍历到子对象时，就把当前属性名拼接到父路径里，递归调用函数；遇到匹配elementType的属性时，就能得到完整的路径字符串了。

修改后的完整代码如下：

var myBowtie = {
  "Hazard":{"Name":"Hydrocarbons under Pressure"}, 
  "TopEvent":{"Name":"Loss of Containment"}, 
  "Cause1": { 
    "Name":"Cause 1", 
    "Barrier1": { 
      "Name":"Barrier 1", 
      "Type":null, 
      "Health":null, 
      "DegFactor1":{ 
        "Name":null, 
        "Barrier1": { "Name":null, "Health":null } 
      }, 
    }, 
  }, 
  "Cause2": { 
    "Name":"Cause 2", 
    "Barrier0": { 
      "Name":"New Barrier 1", 
      "Type":null, 
      "Health":null, 
      "DegFactor1":{ 
        "Name":null, 
        "Barrier1": { "Name":null, "Health":null } 
      }, 
    }, 
  }, 
  "Consequence2": { 
    "Name":"Consequence 2", 
    "Barrier1": { 
      "Name":"New Barrier 1", 
      "Type":null, 
      "Health":null, 
      "DegFactor1":{ 
        "Name":null, 
        "Barrier1": { "Name":null, "Health":null } 
      }, 
    }, 
  }, 
}; 

// 调用时传入根路径"myBowtie.Cause1"
displayBowtie("Barrier", myBowtie.Cause1, "myBowtie.Cause1"); 

function displayBowtie(elementType, objectName, parentPath = ""){ 
  if (Object.entries(objectName).length > 0){ // 确保对象有属性
    const entries = Object.entries(objectName); 
    for (const [key, value] of entries){ // 遍历每个属性
      // 拼接当前属性的完整路径
      const currentPath = parentPath ? `${parentPath}.${key}` : key;
      
      if (key.includes(elementType)){ 
        // 这里就得到了完整路径字符串，比如"myBowtie.Cause1.Barrier1"
        console.log("完整路径：", currentPath);
        // 接下来可以给DOM元素设置ID
        // const domElement = document.createElement('div');
        // domElement.id = currentPath;
      }

      // 如果当前属性值是对象，递归遍历（排除null，因为null不是对象）
      if (typeof value === 'object' && value !== null){
        displayBowtie(elementType, value, currentPath);
      }
    } 
  } 
}

其他可选的命名方式 #

如果你不想用点分隔的路径，也可以考虑这些替代方案：

• 用下划线分隔：把路径里的.换成_，比如myBowtie_Cause1_Barrier1，避免DOM ID里的点可能带来的选择器问题（比如用getElementById没问题，但用querySelector时需要转义点）
• 用特殊符号分隔：把路径存成数组["myBowtie", "Cause1", "Barrier1"]后转成"myBowtie|Cause1|Barrier1"，后续可以再拆成数组访问对象
• 生成唯一标识符：如果不需要直观的路径，也可以给每个属性生成唯一的UUID，同时用一个Map映射UUID到对应的对象属性，这种方式更简洁，避免长ID

注意：DOM ID不能包含空格，你的路径里都是合法标识符，所以没问题；如果后续属性名可能出现特殊字符，记得提前转义或替换。

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