如何使HTMLDOM元素与关联的javascript对象保持同步？最佳做法

假设我有以下结构：

<textarea id="content"></textarea>
<select id="sel">
    <option value="1">value1</option>
    <option value="2">value2</option>
    <option value="3">value3</option>
</select>

现在让我们假设我动态地获取这个对象，然后在用户更改HTML元素（textarea和select）之后，我需要将这些数据发布回服务器

因此，用户更改textarea内容，并选择与先前选择的选项1不同的选项。我现在要做的就是再次从DOM中获取所有数据并将其发送到服务器

随着我的代码不断增长，我注意到这种方法非常糟糕，我开始考虑我的js对象（objectData）需要与HTML元素处于同步模式的方法，因此每当用户更改textarea内容时，objectData.textareacontent将随着用户交互而动态变化，然后不再从DOM中收集所有内容（因为如果我有30个或100个选项，每个选项有50个，那么从这些选项中收集值将是噩梦。而且DOM速度很慢）。然后将objectData发送到服务器

我在这里寻找最佳实践，一个简单的例子将不胜感激。我也注意到了观察者的模式

Object.observe

---

这看起来不错，但似乎只适用于更改js对象状态而不保持对象状态与关联HTML元素异步时（或者我遗漏了一些内容）

您必须以某种方式连接DOM元素和数据结构。如果您有一个输入元素，您就知道可以通过value属性访问它的当前值。现在必须向输入（DOM元素）元素添加一个单击或更改侦听器来更新数据结构。因为这对于输入元素总是相同的，所以您可以编写一个通用代码来实现这一点

register(inputElement, function(value) {
   myDataStructure.value1 = value;
});

---

将向inputElement添加事件并使用更新的值调用函数（值）的寄存器

根据我的评论，在包括库之后，这变得非常简单：

<textarea id="content" data-bind="value: textareacontent"></textarea><br />
<select id="sel" data-bind="value: selectData">
    <option value="1">value1</option>
    <option value="2">value2</option>
    <option value="3">value3</option>
</select><br />

请点击此处：

---

看，我建议您看看。这是一个相当轻量级的库，可以完全实现这一点。还有其他的，但击倒是我熟悉的一个。这正是我想要的。。。“数据绑定”是另一个“5美分概念的25美元术语”。谢谢你的链接！我会接受这个答案，因为这就是我想要的。尽管我将使用这个工具实现一些非常简单的东西，尽可能少的占用空间，但是没有问题。不过，请花5分钟的时间看看框架中的一些示例——它们超越了这里的基础，允许通过模板等轻松创建非常复杂的设计。非常值得学习未来的细节。谢谢。我会在周末做5分钟以上。干杯如果我有100个选择，这仍然很难管理。公认的答案就是我想要的答案。无论如何谢谢你

<textarea id="content" data-bind="value: textareacontent"></textarea><br />
<select id="sel" data-bind="value: selectData">
    <option value="1">value1</option>
    <option value="2">value2</option>
    <option value="3">value3</option>
</select><br />

var objectData = {
    "textareacontent"   : ko.observable("some random content"),
    "selectData"        : ko.observable("1")
}

ko.applyBindings(objectData);