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

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

javascript html

Javascript 从内部HTML范围检索外部HTML范围中的DOM元素,javascript,html,Javascript,Html,我将html嵌入到一个网站中（基于模板），我想在用户定义的html之外操纵html。它在现场的基本工作方式是： <html> <head></head> <body> <p>Hello World!</p> </body> <html> <script> document.getElementsByTagName("p").innerHTML = "Greetings

我将html嵌入到一个网站中（基于模板），我想在用户定义的html之外操纵html。它在现场的基本工作方式是：

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


你好，世界
document.getElementsByTagName（“p”）.innerHTML=“问候世界！”；

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

<!-- Website HTML -->
<html>
<textarea id="np-text">Hello World!</textarea>
  <!-- Custom HTML -->
  <html>
  <body>
  <button onclick="myFunction()">Change Value</button>
    <script>
    function myFunction() {
      document.getElementById("np-text").innerHTML += '<span class="hover"><span></span></span>';
    }
    </script>
  </body>
  </html>
</html>


你好，世界！
更改值
函数myFunction（）{
document.getElementById（“np文本”）.innerHTML+=''；
}

主要的问题是，我无法以任何方式更改外部HTML范围；我唯一可以定义的html与我想要更改的内容不在同一范围内。

//您的原始代码：
//document.getElementsByTagName（“p”）.innerHTML=“问候世界！”；
//新代码：
document.getElementsByTagName（“p”）[0].innerHTML=“问候世界！”

你好，世界
您不能“以任何方式更改外部HTML范围”，因为不应该有一个。您在问题中包含的HTML在任何可以想象的方面都是完全错误的，并且将使任何HTML验证器都成为facepalm
在现有HTML文档中拥有“内部HTML树”
的唯一有效方法是使用iframe
或对象。在iframe
的情况下，为了能够访问外部树的内容，父窗口的内容和iframe
的内容都必须来自同一个域
如果以上所有内容都已准备就绪，您可以使用以下代码访问父窗口的文档，然后访问textarea
：
parent.document.getElementByID("np-text");

/* 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!");

此外，您的JavaScript
代码中也有一个错误，您在其中使用：
document.getElementsByTagName("p").innerHTML = "Greetings World!";

getElementsByTagName
方法返回一个HTMLCollection
，而不是一个没有innerHTML
方法的HTMLElement
。要更改元素集合的innerHTML
，可以使用以下代码：
parent.document.getElementByID("np-text");

/* 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/JS做什么？我将添加另一个示例，并更改的结束标记。不知道我为什么要把它关起来为什么要嵌套？每个文档只需要其中一个，您需要从正确的HTML开始，否则结果将是不可预测的。在一个文档中不能多次使用html
、body
或head
。这是网站实现用户定义html的方式；有一个html设置站点结构（不能更改），然后里面是您自己定义的任何html片段。…这意味着它将是一个数组…
。绝对不是getElementsByTagName
返回一个HTMLCollection
，而不是数组
。不客气@Munucial。只是小心不要误导别人。正是这些小事情起到了作用@AngelPolitis在那段时间里变得非常匆忙，我会在下次出版之前确保内容是正确的只要你及时纠正任何不完善的地方，一切都会好的。