Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Событие изменения DOM (https://javascript.ru/forum/events/28342-sobytie-izmeneniya-dom.html)

Logo 16.05.2012 03:47

Событие изменения DOM
 
Есть ли событие, когда DOM был изменен?

Octane 16.05.2012 04:06

есть, гуглите dom mutation events

Logo 16.05.2012 12:39

Написано, что оно не является cancelable...
Можно ли как то получить добавленный элемент, что бы удалить только его, а не обходить весь DOM Заново?
Так же нашел какой-то MutationObserver, но по нему информации на русском совсем мало.

Octane 16.05.2012 15:28

Добавленный элемент будет в event.target

document.addEventListener("DOMNodeInserted", function (event) {
	alert(event.target);
}, false);

document.body.appendChild(document.createElement("h1"));

IE<9 не поддерживает mutation events

Logo 16.05.2012 17:35

Мне только для веб кит, приложение для KDE делаю.

А изменение стиля (style=) можно отловить так, что бы знать, у какого элемента он изменился? DOMAttrModified почему-то не перехватывается.

Octane 16.05.2012 21:37

Да, в Chrome 20 почему-то не работает, все остальные браузеры реагируют на изменения style :(

----------
Ааааа в webkit вообще не работает DOMAttrModified, но на stackowerflow нагуглился пример использования WebKitMutationObserver: http://stackoverflow.com/a/10466236
вроде работает

Logo 16.05.2012 23:56

Странно, у меня почему-то в chrome просто не работает, а rekonq вообще пишет "ReferenceError: Can't find variable: WebKitMutationObserver"

Octane 17.05.2012 00:24

Может быть это где-нибудь в chrome:flags включается, хотя у меня без всяких настроек такой конструктор доступен:

Logo 17.05.2012 02:18

В хроме функция есть, просто не работает, код вроде без ошибок
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Conforming XHTML 1.0 Strict Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
window.onload = function() {
    var element = document.documentElement, 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);
    }
}

function doo(el) {
    var some = document.getElementById('some')
    //some.style.border = '1px solid red'
    some.setAttribute('style', 'border: 1px solid red')
}
</script>
</head>
<body>
<button onclick="doo(this)">click me</button><div id="some"></div>
</body>
</html>


А в нужном браузере, rekonq, вобще нет этой функции

cyber 17.05.2012 02:51

опа, уже 20й хром я отстал от жизни=)

Octane,
а где можна скачать версию dev-m , а то чет не могу найти на офф сайте

Octane 17.05.2012 17:25

cyber, http://www.chromium.org/getting-involved/dev-channel

Logo, babbles же false, вот и не всплывают события выше element

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>…</title>
</head>
<body>
	<button onclick="doo(this)">click me</button><div id="some"></div>
<script>

var element = document.documentElement, bubbles = true;
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;

  alert([name, newValue, oldValue]);
}

function doo(el) {
	var some = document.getElementById('some'); 
	some.style.border = '1px solid red';
	some.setAttribute('style', 'border: 1px solid red');
}
</script>
</body>
</html>

cyber 17.05.2012 21:33

блин интерефейс ужасный на том сайте=) вчера мин 15 искал та и не нашел где скачать.
спс за линк


Часовой пояс GMT +3, время: 03:48.