Question

首先，我们导航到页面http://testphp.vulnweb.com/AJAX/index.php。
the init page pic 页面加载后，我们注入了一段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个新的突变节点进行通知，但是日志显示它只是一个（当我们点击页面中的“发送xml”标签）the console log pic

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]

如果我们单击第一个标签（“ artists”）并中断循环（取消注释while循环中的“ break”），则可以获取第一个突变节点通知，如以下the console log pic所示：

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树发生更改的所有按钮/ A链接时，如何使所有变异节点通知我，

MutationObserver仅获得最后“单击后”更改的节点通知

0 个答案: