Javascript 编辑值前后的 innerHTML

Question

我正在尝试查询打开的 window 的源代码，然后我更改了一个值。起初我打开了一个新的window并打印了它的源代码。

<html>
<head></head>
<body>
    <script>
        a=window.open("pageOnSameDomain.html");
        a.onload = function() {
            //To test it, i used 'alert' 
            alert(a.document.documentElement.innerHTML);

            //Old value of this field was 'hello'
            a.document.forms[0].inputField.value="aloha";

            //Again used 'alert' to test. But the value is the same as before
            alert(a.document.documentElement.innerHTML);
        }
    </script>
</body>

现在我的问题是，第一个 innerHTML 函数的输出与第二个 innerHTML 函数的输出相同。但是如果我尝试准确查询元素的值，我会得到正确的值。

//Here it's 'aloha'
alert(a.document.forms[0].inputField.value);

此致

Answer 1

对象（以及这些对象的属性）存储在内存中。 .innerHTML 并不是 DOM 对象在内存中的反映，相反，它是 HTML 代码被解析并用作 initial DOM 内存中的对象。更改属性不会更改 .innerHTML。

a.document.forms[0].inputField.value="aloha"; 设置字段的 value 属性, 不是导致将 value 属性添加到元素，因此 .innerHTML 保持不变，而 DOM 在内存中已被更改。

要更改 HTML，您需要使用：

a.document.forms[0].inputField.setAttribute("value", "aloha");

Javascript 编辑值前后的 innerHTML

Javascript innerHTML before and after editing a value

html

javascript

innerhtml

window.open