is there an alternative to DOMAttrModified that will work in webkit

by

Although Chrome does not dispatch DOMAttrModified events, the more lightweighted mutation observers are supported since 2011 and these work for attribute changes, too.

Here is an example for the document body:

var element = document.body, bubbles = false;

var observer = new WebKitMutationObserver(function (mutations) {
  mutations.forEach(attrModified);
});
observer.observe(element, { attributes: true, subtree: bubbles });

function attrModified(mutation) {
  var name = mutation.attributeName,
    newValue = mutation.target.getAttribute(name),
    oldValue = mutation.oldValue;

  console.log(name, newValue, oldValue);
}

For a simple attribute change, the console.log statement would print:

<body color="black">
<script type="text/html">
document.body.setAttribute("color", "red");
</script>
</body>

Console:

> color red black

More Related Contents:

  1. Detect changes in the DOM
  2. Most efficient method of detecting/monitoring DOM changes?
  3. DOMNodeInserted equivalent in IE?
  4. Access HTML attribute value in SASS
  5. inject a javascript function into an Iframe
  6. Get element node at caret position (in contentEditable)
  7. How to use “not” in XPath?
  8. How to clone or re-dispatch DOM events?
  9. What DOM events are available to WebKit on Android?
  10. DOM mutation events replacement
  11. DOM Mutation event in JQuery or vanilla Javascript
  12. Have any browsers implemented the DOM3 EventListenerList?
  13. window.onload seems to trigger before the DOM is loaded (JavaScript)
  14. Is Shadow DOM fast like Virtual DOM in React.js?
  15. Alternative to DOMNodeInserted
  16. INVALID_STATE_ERR: DOM Exception 11 (WebKit)
  17. Getting ‘xlink:href’ attribute of the SVG element dynamically using JS in HTML DOM
  18. How to stop event propagation with inline onclick attribute?
  19. Firing event on DOM attribute change
  20. Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
  21. How to expose IFrame’s DOM using jQuery?
  22. How To Wrap / Surround Highlighted Text With An Element
  23. Finding line-wraps
  24. What are -moz- and -webkit-? [duplicate]
  25. Select all elements with a “data-xxx” attribute without using jQuery
  26. DOM refresh on long running function
  27. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  28. Getting HTML elements by their attribute names
  29. Display DIV at Cursor Position in Textarea [duplicate]
  30. CSS3 – How to style the selected text in textareas and inputs in Chrome?

Leave a Comment