动态相当于innerHTML？

发布于 2024-08-17 20:55:33 字数 498 浏览 1 评论 0原文

我想获取可能已被用户更改的元素的innerHTML。

因此，例如，我想知道单选按钮的状态：

<input type="radio" name="Q_209" value="A" checked>

或者

<input type="radio" name="Q_209" value="A">

在现代浏览器中，innerHTML 只是在加载页面时提供原始标记（如此处详细讨论)：它不记录单选按钮是否已被用户选中。

有没有安全的方法来获取更新的 HTML？我知道有多种方法可以在 Javascript 中获取单选按钮本身的状态，但我想要的是完整的、更新的 HTML。

谢谢！

原文

I want to get the innerHTML of an element that may have been changed by the user.

So, for example, I want to know the state of a radio button:

<input type="radio" name="Q_209" value="A" checked>

<input type="radio" name="Q_209" value="A">

In modern browsers, innerHTML just gives the original tag when the page was loaded (as discussed at length here): it doesn't record whether the radio button has been checked by the user or not.

Is there any safe way to get the updated HTML? I know that there are ways to get the state of the radio button itself in Javascript, but what I would like is the full, updated HTML.

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

愿与i 2024-08-24 20:55:33

正如已经提到的，HTML 不存储表单元素的当前状态。 HTML 定义表单元素的初始状态或默认状态。 DOM 存储易失性表单状态。

例如，此 HTML

<input type="radio" name="Q_209" value="A" checked>

会将元素的 defaultChecked 属性设置为 true，即使选中组中的不同单选按钮，该属性也会保留。

更改defaultChecked 属性似乎确实会更新outerHTML。

因此，如果您循环遍历所有表单元素，将当前值/检查性/选择性复制到 defaultValue/defaultChecked/defaultSelected 属性，则您可能能够获得您正在寻找的更新的outerHTML。

As has been mentioned, the HTML doesn't store the current state of form elements. HTML defines the initial or default state of form elements. The DOM stores the volatile form state.

For example, this HTML

<input type="radio" name="Q_209" value="A" checked>

would set the defaultChecked property of the element to true, which would persist even if a different radio button in the group were checked.

Changing the defaultChecked property does appear to update the outerHTML.

So, if you loop through all of the form elements copying the current value/checkedness/selectedness to the defaultValue/defaultChecked/defaultSelected properties, you may then be able to get the updated outerHTML you are looking for.

回复收藏 0 原文

失退 2024-08-24 20:55:33

据我所知，HTML 元素属性的实际顺序可以由浏览器解释，因此没有可靠的方法来确定您是否正在处理或

但是，你可以得到使用 for ... in 语句的元素的所有属性和值：

var foo = document.getElementById('form_id')['Q_209'];
var foo_properties = [];

for (var prop in foo) {
   // do something with prop and foo[prop];      
}

这意味着您可以将元素中找到的属性与您实际关心的属性子集（特定于该特定属性）进行比较标签或更大的“html”属性）来获取元素的“html状态”并能够重建它，或者它的字符串表示形式。

var input_foo = document.getElementById('form_id')['Q_209'];
var awesome_properties = {'type':'','name':'','value':'','checked':''};
var tag = '<input ';
var properties = '';

for (var prop in foo) {
   if (prop in awesome_properties) {
      properties += ' '+prop+'="'+foo[prop]+'"';
   }
}

tag += properties;
tag += '>';

window.alert(tag);

As far as I know, the actual order of an HTML element's properties is open to interpretation by the browser, so there's no reliable way to determine if you're dealing with <input type="radio" name="Q_209" value="A" checked> or <input checked="true" name="Q_209" value="A" type="radio">

But, you can get all of the properties and values of an element with for ... in statement:

var foo = document.getElementById('form_id')['Q_209'];
var foo_properties = [];

for (var prop in foo) {
   // do something with prop and foo[prop];      
}

This means you could potentially compare the properties found in the element against a subset of properties you actually care about (specific to this particular tag or a larger universe of "html" properties) to get the "html state" of the element and be able to reconstruct it, or a string representation of it.

var input_foo = document.getElementById('form_id')['Q_209'];
var awesome_properties = {'type':'','name':'','value':'','checked':''};
var tag = '<input ';
var properties = '';

for (var prop in foo) {
   if (prop in awesome_properties) {
      properties += ' '+prop+'="'+foo[prop]+'"';
   }
}

tag += properties;
tag += '>';

window.alert(tag);

回复收藏 0 原文