下面我们来说另一半步。这就是 DOM。

DOM 是啥？

 DOM的全名是Document Object Model（文档对象模型）

为啥要知道DOM?

因为，使用JavaScriipt所面对的浏览器，不像我们用的Step7、TIA 博图是绑定在 微软的 WINDOWS操作系统上。它会面对各式各样厂商开发的浏览器（虚拟机）。如果这些浏览器对JavaScript脚本解释执行是各式各样的，那么开发者就得针对每一种浏览器，写一次程序，否则就错误百出。甚至导致浏览器“死机”。

这里的意思就是：当我们今后要用浏览器替代当前的HMI时，就要使用到DOM。

DOM是做什么的？

很明显，当使用JavaScript去操作某个浏览器界面中的HTML内容时，DOM就是能被各种浏览器支持的标准方法。在DOM眼中，把整个HTML文档看作是个对象的树；其中各层都是由元素构成的。

根据你要操作的每个对象，要预先定义对象的节点，这样你就可以很方便地找到要操作的元素了。

比如：浏览器呈现的界面是几张表格（驱动的转速、电压、电流），你需要对其内容操作时，就要在HTML 定义它们不同的元素节点（通常是 < [div] id=“xxx”）之类; 然后就可以在 JavaScript 中，通过 document.getElementById(“xxx”) 找到它，并操作它了（改变值等等）；

又比如：我们需要在浏览器界面上显示个柱图，那其中的绿、红黄“柱体”实际上是个image图像，当我们获得驱动侧电流变化时，需要使用JavaScriput将电流值变换成柱状的相对高度。然后通过document.getElementById(“xxx”) 找到它，改变其图像相对窗体的位置，不就可以了么？

在这里也很明显，这个JavaScript 应该是个可以被多次调用的函数。用它就可以去操作窗体内的各个驱动单元的（速度、电流、电压等等）柱状图。

HTML DOM

小结：DOM是一种适应不同浏览器、 呈现动态界面、快速操作对象的一种标准方法。

在Node-Red中，它也照样用到。当你在调试窗口中，鼠标指向 那些 id 时，立刻检索到这个节点。（红色虚框围绕），对吧？