DOM4 要素の変化を拾う

JavaScript

フォームの value の変化は拾えないのか・・・

<!DOCTYPE html>
<title></title>
<meta charset="UTF-8">
<style>
</style>

<body>
<p>
  <input type="text" id="hoge" value="">
  <input type="button" value="Change Title" onclick="document.getElementById('hoge').title='red'">
  <input type="button" value="Change Value" onclick="document.getElementById('hoge').value='red'">
  
</p>

<script type="text/javascript">
var observer = new MutationObserver (function (records, observer) {
    Array.prototype.forEach.call (records, function (record) {
        var newValue = record.target.getAttribute (record.attributeName);
        var oldValue = record.oldValue;
        alert([newValue, oldValue]);
    }, observer);
});

// ノードを監視する
observer.observe (document.documentElement, {
    childList            : true,  // ターゲットの子ノードを監視
    attributes        : true,
    subtree           : true,
    attributeOldValue : true,
    characerDataOldValue : true,  // 修正前のテキストデータを記録する
    attributeFilter      : [ 'class', 'title', 'value' ] // 監視する属性名

});

</script>