Handle id and className attributes

dom-element.js

@@ -17,7 +17,6 @@ function DOMElement(tagName, owner, namespace) {
 
     this.tagName = ns === htmlns ? String(tagName).toUpperCase() : tagName
     this.nodeName = this.tagName
-    this.className = ""
     this.dataset = {}
     this.childNodes = []
     this.parentNode = null
@@ -29,6 +28,33 @@ function DOMElement(tagName, owner, namespace) {
     if (this.tagName === 'INPUT') {
       this.type = 'text'
     }
+
+    var _id
+    var _className
+    Object.defineProperties(this, {
+        id: {
+            enumerable: true,
+            get: function () {
+                return _id
+            },
+            set: function (newVal) {
+                if (_id === newVal) return
+                _id = newVal
+                this.setAttribute('id', _id)
+            }
+        },
+        className: {
+            enumerable: true,
+            get: function () {
+              return _className
+            },
+            set: function (newVal) {
+                if (_className === newVal) return
+                _className = newVal
+                this.setAttribute('class', _className)
+            }
+        }
+    })
 }
 
 DOMElement.prototype.type = "DOMElement"
@@ -104,6 +130,12 @@ DOMElement.prototype.setAttributeNS =
             prefix = name.substr(0, colonPosition)
             localName = name.substr(colonPosition + 1)
         }
+        if (name === 'id') {
+          this.id = value
+        }
+        if (name === 'class') {
+          this.className = value
+        }
         if (this.tagName === 'INPUT' && name === 'type') {
           this.type = value;
         }

serialize.js

@@ -53,7 +53,8 @@ function isProperty(elem, key) {
     return elem.hasOwnProperty(key) &&
         (type === "string" || type === "boolean" || type === "number") &&
         key !== "nodeName" && key !== "className" && key !== "tagName" &&
-        key !== "textContent" && key !== "innerText" && key !== "namespaceURI" &&  key !== "innerHTML"
+        key !== "textContent" && key !== "innerText" && key !== "namespaceURI" &&
+        key !== "id" && key !== "innerHTML"
 }
 
 function stylify(styles) {
@@ -112,10 +113,6 @@ function properties(elem) {
       }
     }
 
-    if (elem.className) {
-        props.push({ name: "class", value: elem.className })
-    }
-
     return props.length ? stringify(props) : ""
 }
 

test/test-dom-element.js

@@ -57,6 +57,22 @@ function testDomElement(document) {
         cleanup()
         assert.end()
     })
+
+    test("setAttribute will properly affect className property", function(assert) {
+      var div = document.createElement("div")
+      div.setAttribute("class", "my-class")
+      assert.equal(div.toString(), "<div class=\"my-class\"></div>")
+      assert.equal(div.className, "my-class")
+      assert.end()
+    })
+
+    test("setAttribute will properly affect id property", function(assert) {
+      var div = document.createElement("div")
+      div.setAttribute("id", "my-id")
+      assert.equal(div.toString(), "<div id=\"my-id\"></div>")
+      assert.equal(div.id, "my-id")
+      assert.end()
+    })
 
     test("does not serialize innerText as an attribute", function(assert) {
       var div = document.createElement("div")