JS获取动态添加元素的方法详解

动态添加元素是网页开发中十分常见的做法，在使用JavaScript操作动态添加元素时，我们需要确保能够正确获取到这些元素，下面将简要介绍JS获取动态添加元素的几种方法。

通过事件委托实现动态添加元素的监听

当我们想在动态添加的元素上绑定事件时，可以通过事件委托来实现。

事件委托，顾名思义，就是将事件的监听委托给父元素，从而实现对子元素的操作。具体实现可以借助事件对象和冒泡原理。

下面是一个简单的示例：

//HTML结构
<div id="container">
  <button id="addBtn">添加元素</button>
</div>

//JS代码
const container = document.querySelector('#container');
container.addEventListener('click', function(e) {
  if(e.target && e.target.tagName === 'BUTTON') {
    const newElement = document.createElement('div');
    newElement.innerHTML = '新的元素';
    container.appendChild(newElement);
  }
})

上面的代码在container元素上绑定了click事件的监听，当点击container内的任何元素时，会触发事件的冒泡，从而执行回调函数。在回调函数内，我们可以通过事件对象的target属性来获得当前被点击的元素，然后将新元素添加到container内。

使用MutationObserver实现动态添加元素的监听

另一种常见的JS获取动态添加元素的方法是使用MutationObserver，这是一种可以监听DOM变化的API，可以监听到DOM树内部所有发生的变化。

先看一下使用步骤：

创建一个MutationObserver对象
调用MutationObserver.observe()方法开始监听DOM变化
编写回调函数，当监听到DOM发生变化时，该函数会自动执行

下面的代码演示了如何使用MutationObserver来监听动态添加元素的操作：

//HTML结构
<div id="container"></div>
<button id="addBtn">添加元素</button>

//JS代码
const container = document.querySelector('#container');
const addBtn = document.querySelector('#addBtn');

const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    const addedNodes = mutation.addedNodes;
    for(let i = 0; i < addedNodes.length; i++) {
      const addedNode = addedNodes[i];
      if(addedNode.nodeType === 1 && addedNode.tagName === 'DIV') {
        //执行相关操作
      }
    }
  })
})

observer.observe(container, { childList: true });

addBtn.addEventListener('click', function() {
  const newElement = document.createElement('div');
  newElement.innerHTML = '新的元素';
  container.appendChild(newElement);
})

上面的代码中，我们首先创建了一个MutationObserver对象，然后监听container元素的子元素变化，当子元素变化时，执行回调函数。在回调函数内，我们通过mutation.addedNodes属性来获得添加的新节点，然后筛选出符合条件的节点，即nodeType为1，且tagName为div的新节点，即可执行相关操作。