如何用JavaScript访问三层<div>嵌套内的<p>并实现文本切换？

问题核心原因 #

你的代码不生效有两个关键问题：

• 函数名冲突：translate是浏览器DOM元素的内置方法（用于CSS变换等场景），用它作为自定义函数名会导致函数无法正常调用。
• 元素获取方式错误：getElementById是document对象的专属方法，不能链式调用在已获取的DOM元素上（比如div1.getElementById('div2')属于无效写法）。

修正后的实现方案 #

以下是完整可运行的代码，包含触发按钮和切换逻辑：

HTML 结构

<div id="div1">
  <div id="div2">
    <div id="div3">
      <p>text1</p>
    </div>
  </div>
</div>
<button onclick="toggleText()">切换文本</button>

JavaScript 逻辑

// 使用非内置名称的自定义函数
function toggleText() {
  // 直接定位目标<p>元素，写法简洁高效
  const targetP = document.querySelector('#div3 p');
  
  if (targetP.textContent === "text1") {
    targetP.textContent = "text2";
  } else {
    targetP.textContent = "text1";
  }
}

代码说明 #

• 函数名改用toggleText，彻底避免和浏览器内置方法的命名冲突。
• 用document.querySelector('#div3 p')直接定位目标元素，无需多层冗余的DOM调用。
• 优先使用textContent操作文本，相比innerHTML更安全，仅处理纯文本时能避免潜在的XSS风险。

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