如何访问<p>在<div>使用Javascript

Question

我正在尝试使用Javascript，这样当用户按下网页上的按钮时，一个段落将在两个文本之间交替出现。问题是，我试图操作的<p>元素位于<div>中<div>中的<div>内。

我的代码的底层模型可以在下面看到：

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

我找到的所有解决方案都只说明如果<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>元素都有类，但这不应该影响事物，对吧？

伊迪丝2：很抱歉占用了你的时间，但我发现问题完全是另一回事。我一直在函数调用中使用一个保留词，但不知何故，我从未注意到这是问题所在。再次感谢那些回答的人，在发布下一个问题之前，我将更深入地研究我的代码。

Answer 1

为什么不直接使用

var x = document.getElementById("div3")

如果通过Id直接访问，那么其他DIV是什么并不重要。

Answer 2

如果div总是按这个顺序排列，您可以这样做：

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

Answer 3

您可以使用document.querySelectorAll获取页面上所有p个标记的数组。

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

Answer 4

您可以更具体地&尝试以下操作：

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

这将是一个非常严格的实施&遵循不带id或类的条件。

Answer 5

使用querySelector以使用CSS选择器#div3 p，意思是"；拾取在具有div3id"的元素内的段落元素；。

然后，当您只是更改一个文本字符串时，请更改该元素的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>