Question

我在网站（基于模板）中嵌入了html，我想在我的用户定义的html之外操作html。它在网站上的基本工作方式是：

 function playAudio(player, button) {
    var src = button.getAttribute("data-audio");
    player.volume = 1.0;
    player.setAttribute("src", src);
    player.play();
  }

但是，这只会查找内部html范围内的“p”元素。我的问题是，有没有办法从内部html范围检索DOM元素到外部html范围？这是我正在使用的代码：

<html>
 <head></head>
 <body>
  <p>Hello World!</p>
 </body>
 <html>
  <script>
   document.getElementsByTagName("p").innerHTML = "Greetings World!";
  </script>
 </html>
</html>

主要问题是我无法以任何方式更改外部HTML范围;我能定义的唯一html与我想要改变的范围不同。

Answer 1

// Your original code:
// document.getElementsByTagName("p").innerHTML = "Greetings World!";

// New code:
document.getElementsByTagName("p")[0].innerHTML = "Greetings World!";

<html>

<head></head>

<body>
  <p>Hello World!</p>
</body>

</html>

我注意到您使用getElementsByTagName("p")，作为简短通知，您会在getElements之后看到 s ，其中s意味着它将是一个HTMLCollection，因为您的HTML中可能包含许多p元素，[0]表示此HTML页面中的第一个<p>元素。

要获得更好的代码，您应该执行以下操作：

document.getElementById("greeting").innerHTML = "Greetings World!";

<html>

<head></head>

<body>
  <p id="greeting">Hello World!</p>


</body>

</html>
<html>

你可以使用id=""函数来获得更安全的代码，因为你说它在模板中你可能不确定它的位置，而HTML中的id必须是唯一的，它证明你是'找到你想要改变的元素/地方，并拥有更好的代码。

Answer 2

您无法以任何方式更改外部HTML范围＆＃34;，因为不应该为一个。你在问题中包含的HTML在各方面都是完全错误的，并且会使任何HTML验证器成为facepalm。

在现有HTML文档中使用"inner HTML tree"的唯一有效方法是使用iframe或object。在iframe的情况下，为了能够访问外树的内容，父窗口的内容和iframe的内容都需要来自同一个域

如果满足以上所有条件，您可以使用以下代码访问父窗口的文档，然后访问textarea：

parent.document.getElementByID("np-text");

此外，您使用的JavaScript代码中也有错误：

document.getElementsByTagName("p").innerHTML = "Greetings World!";

getElementsByTagName方法返回HTMLCollection，而不是单HTMLElement，它没有innerHTML方法。要更改元素集合的innerHTML，可以使用以下代码：

/* Fetch all 'p' elements. */
var pCollection = document.getElementsByTagName("p");

/* Iterate over every element in the collection and change its content. */
[].forEach.call(pCollection, (element) => element.innerHTML = "Greetings World!");

从内部HTML范围检索外部HTML范围中的DOM元素

2 个答案: