如何訪問<p>三層里面</p><div>使用 Javascript？</div><div id="text_translate"><p> 我正在嘗試使用 Javascript，這樣當用戶按下網頁上的按鈕時，一個段落將在兩個文本之間交替。 問題是我要操作的<p>元素位於<div>內的<div>內的<div> div> 內。</p><p> 我的代碼的低級模型如下所示：</p><pre class="lang-html prettyprint-override"> <div id="div1"> <div id="div2"> <div id="div3"> <p>text1</p> </div> </div> </div></pre><p> 我發現的所有解決方案只有 state 如果<p>在一個<div>內，該怎么辦； 對我不起作用的解決方案。</p><p> 這是我最近的嘗試：</p><pre class="lang-js prettyprint-override"> function translate() { var x = document.getElementById("div1").getElementById("div2").getElementById("div3").getElementsByTagName('p')[0]; if (x.innerHTML === "text1") { x.innerHTML = "text2"; } else { x.innerHTML = "text1"; } }</pre><p> 我怎樣才能讓它發揮作用？</p><p> 編輯：到目前為止似乎沒有任何效果。 <div>元素都有類，但這應該不會影響事情，對吧？</p><p> Edit2：很抱歉占用您的時間，但我發現這個問題完全是另外一回事。 我一直在為我的 function 調用使用保留字，但不知何故從來沒有注意到這是問題所在。 再次感謝那些回答的人，在發布下一個問題之前，我將更深入地研究我的代碼。</p></div>

Question

我正在嘗試使用 Javascript，這樣當用戶按下網頁上的按鈕時，一個段落將在兩個文本之間交替。 問題是我要操作的<p>元素位於<div>內的<div>內的<div> div> 內。

我的代碼的低級模型如下所示：

<div id="div1">
  <div id="div2">
    <div id="div3">
      <p>text1</p>
    </div>
  </div>
</div>

我發現的所有解決方案只有 state 如果<p>在一個<div>內，該怎么辦； 對我不起作用的解決方案。

這是我最近的嘗試：

function translate() {
  var x = document.getElementById("div1").getElementById("div2").getElementById("div3").getElementsByTagName('p')[0];
  if (x.innerHTML === "text1") {
    x.innerHTML = "text2";
  } else {
    x.innerHTML = "text1";
  }
}

我怎樣才能讓它發揮作用？

編輯：到目前為止似乎沒有任何效果。 <div>元素都有類，但這應該不會影響事情，對吧？

Edit2：很抱歉占用您的時間，但我發現這個問題完全是另外一回事。 我一直在為我的 function 調用使用保留字，但不知何故從來沒有注意到這是問題所在。 再次感謝那些回答的人，在發布下一個問題之前，我將更深入地研究我的代碼。

Answer 1

為什么不直接使用

var x = document.getElementById("div3")

如果直接通過 Id 訪問，那么其他 DIV 是什么並不重要。

Answer 2

您可以使用 document.querySelectorAll 獲取頁面上所有 p 標簽的數組。

const pTags = document.querySelectorAll('p')

pTags.forEach((p, i) => {
  if(i % 2 === 0) {
    p.innerHTML = 'text1'
  } else {
    p.innerHTML = 'text2'
  }
})

Answer 3

如果 div 始終按此順序排列，您可以這樣做：

var x = document.querySelector('#div1 #div2 #div3 p');

Answer 4

除了 ID，您可以更具體並嘗試以下操作：

var x = document.querySelector('div > div > div > p')

這將是一個非常嚴格的實現並遵循沒有 ID 或類的條件。

Answer 5

使用querySelector以使用 CSS 選擇器#div3 p ，這意味着“選擇具有div3 id 的元素內的段落元素”。

然后，當您只是更改一串文本時，請更改該元素的textContent或其innerText （它們之間存在細微差別。）

 const para = document.querySelector('#div3 p'); const button = document.querySelector('button'); button.addEventListener('click', translate); function translate() { if (para.textContent === 'text1') { para.textContent = 'text2'; } else { para.textContent = 'text1'; } }

 <div id="div1"> <div id="div2"> <div id="div3"> <p>text1</p> </div> </div> </div> <button type="button">Translate</button>