如何观察JavaScript中HTMLELEMENT的可读性？

Question

我想观察htmlelement的“联系”属性。但是，由于它是只读的属性，其中没有属性列表。因此，覆盖Getter和Setter或创建代理对象的经典方法将没有用。

我已经阅读了MutationObserver，他们只能观察到属性。对于我们的应用程序，它们也很重，因为我们需要在我们创建的每个动态元素上观察此property（ISSECTECT）（80％的应用程序只是动态元素）。

还有其他方法可以观察到可读性属性的变化吗？

Answer 1

OP应给出 mutation> mutation> mutation observer 尝试。对于OP的情况，节点的无法直接观察属性，但是相同的信息...节点属于或不是渲染dom的一部分...可以从'child -list'突变类型中检索。 。

function handleDomChanges(mutationsList, observer) {
  for (const mutation of mutationsList) {
  debugger;
    const {
      type, attributeName,
      addedNodes, removedNodes
    } = mutation;
    if (type === 'childList') {
      if (addedNodes.length >= 1) {

        console.log(`${ addedNodes.length } child node(s) has/have been added`);
      }
      if (removedNodes.length >= 1) {

        console.log(`${ removedNodes.length } child node(s) has/have been removed`);
      }
    } else if (type === 'attributes') {
      console.log(`The ${ attributeName } attribute has been mutated.`);
    }
  }
};

const config = {
  attributes: true,
  childList: true,
  subtree: true
};
const targetNode = document.querySelector('#app');

const observer = new MutationObserver(handleDomChanges);

observer.observe(targetNode, config);
// observer.disconnect();


const listNode = document.querySelector('#navList');

const itemNode = document.createElement('li');
const testNode = document.createElement('a');
testNode.href = '\/';
testNode.textContent = 'test 4';

itemNode.appendChild(testNode);

console.log({
  testNodeIsConnected: testNode.isConnected
});
listNode.appendChild(itemNode);

console.log({
  testNodeIsConnected: testNode.isConnected
});
testNode.remove(); 

console.log({
  testNodeIsConnected: testNode.isConnected
});
itemNode.appendChild(testNode);

console.log({
  testNodeIsConnected: testNode.isConnected
});

.as-console-wrapper {
  bottom: 0;
  left: auto!important;
  min-height: 100%;
  width: 50%;
}

<div id='app'>
  <nav>
    <ul id="navList">
      <li><a href="/">test 1</a></li>
      <li><a href="/">test 2</a></li>
      <li><a href="/">test 3</a></li>
    </ul>
  </nav>
</div>