MutationObserver получает только последние измененные узлы после щелчка - PullRequest
Новая
       25

MutationObserver получает только последние измененные узлы после щелчка

0 голосов
/ 08 октября 2018

сначала мы переходим на страницу http://testphp.vulnweb.com/AJAX/index.php.
начальная страница рис. когда страница загружена, мы вставляем фрагмент кода JavaScript 

// html5 MutationObserver to monitor new nodes generated
var observer = new MutationObserver(function(mutations ){
  mutations.forEach(function (mutation) {
      if (mutation.type === 'childList') {
          // when new element generated
          console.log("child list: ");
          console.log(mutation);
      } else if (mutation.type === 'attributes') {
          // when attr change
          console.log("attributes: ");
          console.log(mutation);
      }
  });
});

observer.observe(window.document, {
  subtree: true,
  childList: true,
  attributes: true,
  attributeFilter: ['src', 'href', 'action']
});


function treeWalkerFilter(element) {
  if (element.nodeType === Node.ELEMENT_NODE) {
      return NodeFilter.FILTER_ACCEPT;
  }
}
var treeWalker = document.createTreeWalker(
      document,
      NodeFilter.SHOW_ELEMENT,
      treeWalkerFilter,
      false
  );

// traverse element nodes
while (treeWalker.nextNode()) {
  console.log("[*] processing node " + treeWalker.currentNode.tagName + ' ' + treeWalker.currentNode.id);
  if(treeWalker.currentNode.click && treeWalker.currentNode.tagName == 'A')
    {
        treeWalker.currentNode.click();
        //break;
    }
}

Как и в приведенном выше коде, мы используем treeWalker для обхода dom-дерева и щелкаем узлы. Я ожидаю, что MututionObserver получит 4 новых узла мутации для уведомления, но журнал показывает, что это был только один (последний, когда мы нажималитег 'send xml' на странице) изображение журнала консоли 

console log:[*] processing node HTML
console log:[*] processing node HEAD
console log:[*] processing node META
console log:[*] processing node TITLE
console log:[*] processing node LINK
console log:[*] processing node SCRIPT
console log:[*] processing node BODY
console log:[*] processing node TABLE
console log:[*] processing node TBODY
console log:[*] processing node TR
console log:[*] processing node TD
console log:[*] processing node A
console log:ajax open, url: artists.php
console log:ajax send,data:
loading: http://testphp.vulnweb.com/AJAX/artists.php
console log:[*] processing node A
console log:ajax open, url: categories.php
console log:ajax send,data:
loading: http://testphp.vulnweb.com/AJAX/categories.php
console log:[*] processing node A
console log:ajax open, url: titles.php
console log:ajax send,data:
loading: http://testphp.vulnweb.com/AJAX/titles.php
console log:[*] processing node A
console log:ajax open, url: showxml.php
console log:ajax setheader, header: content-type
console log:ajax send,data: <xml><node name="nodename1">nodetext1</node><node name="nodename2">nodetext2</node></xml>
loading: http://testphp.vulnweb.com/AJAX/showxml.php
console log:[*] processing node A
console log:[*] processing node TR
console log:[*] processing node TD
console log:[*] processing node DIV contentDiv
console log:[*] processing node TR
console log:[*] processing node TD
console log:[*] processing node DIV infoDiv
console log:[*] processing node TR
console log:[*] processing node TD
console log:[*] processing node DIV xmlDiv
console log:child list:
console log:[object MutationRecord]

, если щелкнуть первый тег ('Artist') и разорвать цикл (раскомментируйте 'break' в то время какцикл), мы можем получить уведомление о первых узлах мутации, как показано ниже Рисунок журнала консоли : 

console log:[*] processing node HTML
console log:[*] processing node HEAD
console log:[*] processing node META
console log:[*] processing node TITLE
console log:[*] processing node LINK
console log:[*] processing node SCRIPT
console log:[*] processing node BODY
console log:[*] processing node TABLE
console log:[*] processing node TBODY
console log:[*] processing node TR
console log:[*] processing node TD
console log:[*] processing node A
console log:ajax open, url: artists.php
console log:ajax send,data:
loading: http://testphp.vulnweb.com/AJAX/artists.php
console log:child list:
console log:[object MutationRecord]
console log:child list:
console log:[object MutationRecord]

, поэтому мои вопросы заключаются в том, как заставить все узлы мутации уведомлять, когда мой коднажмите все кнопки / ссылку, которая может изменить дерево Dom, любые предложения помогут, спасибо.

...