javascript - 如何查看 DOM 对象属性？

Question

我想查看 DOM 节点属性，但我似乎无法让它工作。

在我的小部件中，我尝试了以下操作。

startup: function() {
  this.inherited(arguments);

  // First try using the dojo 1.6 watch.
  // I'm setting the property of the widget
  // to reference the DOM node's offsetWidth property
  this.width = this.domNode.offsetWidth;
  this.watch("width", function() {
    console.debug('Width changed to ' + this.domNode.offsetWidth )
  })

  // Does this.width contain a reference or a copy of this.domNode.offsetWidth?

  // Second try, the Mozilla watch
  this.domNode.watch("offsetWidth", function() {
    console.debug('Width changed to ' + this.domNode.offsetWidth )
  })
}

Answer 1

I'm would like to watch a DOM node property but I can't seem to get it to work.

您不能通过将 Mozilla 的 watch 直接添加到 DOM 节点来让它工作。

在 http://james.padolsey.com/javascript/monitoring-dom-properties/提到了使用 setInterval、onpropertychange(仅限 IE)和 DOMSubtreeModified(还有其他此类标准 DOM 修改事件，如 DOMAttrModified ，但你必须检查浏览器支持)。标准 DOM 修改事件仅在 DOM 属性更改时有效，而不是等效属性(尽管您可以通过 initMutationEvent 从 JS 触发突变事件):

<input />
<script>
window.onload = function () {
  var ct=0;
  document.addEventListener('DOMAttrModified', function () {
      alert('Value modified ' + (++ct) + ' times');
  }, false);

  var input = document.getElementsByTagName('input')[0];

  input.setAttribute('value', 5); // Triggers the event
  input.value = 15; // Though it sets the value, it doesn't trigger the event

};
</script>

// First try using the dojo 1.6 watch. // I'm setting the property of the widget // to reference the DOM node's offsetWidth property
this.width = this.domNode.offsetWidth; this.watch("width", function() { console.debug('Width changed to ' + this.domNode.offsetWidth ) })

您可以在此处使用 Dojo API 监控 width 属性的设置，但这似乎并没有为您跟踪 DOM 节点(尽管 http://dojotoolkit.org/features/1.6/widget-watch 似乎建议这样做)。例如，您可以:

widget.set('width', 100);

然后可以修改上面的 watch 事件以动态更改 DOM width(但不是 offsetWidth，因为这是一个读取 -唯一属性(property))。

不过，您似乎正在尝试检测自动offsetWidth 计算更改，而不是您自己的更改。在我看来，此时最适合您的解决方案是 setInterval。

// Does this.width contain a reference or a copy of this.domNode.offsetWidth?

一个副本，因为 this.domNode.offsetWidth 是一个数字，在 JavaScript 中，非对象类型总是按值复制。

// Second try, the Mozilla watch
this.domNode.watch("offsetWidth", function() { console.debug('Width changed to ' + this.domNode.offsetWidth )
})

如果这能够工作(但它不工作)，您需要在函数内部使用 this.offsetWidth，因为 Mozilla 将回调 this 设置为被观察的对象。