有些属性显示在DOM树中，但仍然有效。

Question

对于meteor来说，我是新手，我正在使用meteor.js创建一个像这这样的简单项目--我用<input value="{{counter}}" />创建了这个输入框，显示了与您看到的paragraph.And一致的值--它工作得很好。

但是，当我检查chrome开发工具中的DOM树时，我看到的是<input>而不是<input value="1">，就像我想象的那样。

为什么在DOM树中，属性值是不可见的?同时，有人能解释为什么即使在DOM树中找不到值属性，也能看到输入框中的数字吗？

Answer 1

这是因为Meteor在构建时将所有模板的js和html文件打包在同一个javascript文件中。然后，DOM仅通过javascript进行操作。而且，通过javascript对DOM元素所做的大量更改不会出现在浏览器的控制台中。例如，尝试用jQuery data()更改元素的数据属性，您将不会看到任何新的data-...属性，同样，如果通过在控制台中键入$('input').val('some value')来更改输入的值，则值将更改，但value属性不会出现。

如果在示例中打开控制台(假设使用的是Chrome，请按F12)并切换到“input”，然后打开名为'36dcbdf8917964892be8bca43c71d137318461f5.js‘的惟一js文件，您将看到input的值是通过javascript设置的(第82行)：

... 
HTML.INPUT({value:function(){return Spacebars.mustache(e.lookup("counter"))}})
...