如何使用Javascript访问一个里面的< p>三层< div>？

ryhaxcpt 于 2023-01-04 发布在 Java

关注(0)|答案(5)|浏览(187)

我试着使用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>元素都有类，但这不应该影响事情，对吗？
Edit 2：很抱歉占用了你的时间，但是我发现这个问题完全是另外一回事。我一直在函数调用中使用保留字，但不知何故从来没有注意到这是个问题。再次感谢那些回答我的人，我将在发布下一个问题之前更深入地研究我的代码。

JavaScript

来源：https://stackoverflow.com/questions/74987734/how-to-access-a-p-inside-three-layers-of-div-using-javascript

5条答案

按热度按时间

ki0zmccv1#

为什么不直接用

var x = document.getElementById("div3")

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

赞(0）回复(0）举报 2023-01-04

ryevplcw2#

如果div始终按此顺序排列，则可以按如下方式执行：

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

赞(0）回复(0）举报 2023-01-04

6ioyuze23#

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

const pTags = document.querySelectorAll('p')

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

赞(0）回复(0）举报 2023-01-04

tyg4sfes4#

代替Id，你可以更具体&尝试以下：

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

这将是一个非常严格的实现&在没有id或类的情况下遵循条件。

赞(0）回复(0）举报 2023-01-04

cwxwcias5#

使用querySelector是为了使用CSS选择器#div3 p，它意味着"拾取id为div3的元素内部的段落元素"。
然后，当你只是改变一个文本字符串时，改变该元素的textContent，或者它的innerText（它们之间有subtle differences）。

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>

赞(0）回复(0）举报 2023-01-04

我来回答

如何使用Javascript访问一个里面的< p>三层< div>？

5条答案

相关问题

热门标签

最新问答