getElementsByClassName 获取元素之后其他地方新增了元素,怎么监听这个方法获取的数组变化了

Question

document.getElementsByClassName(xx')

获取元素后其他地方新增了元素,该怎么监听触发回调?

Answer 1

function watchDom(el, ...args) {
  if (typeof el === 'string') {
    el = document.querySelector(el)
  }
  let opt = args.length > 1 ? args[0] : {}
  let cb = args.length > 1 ? args[1] : args[0]
  return new MutationObserver((mutations, observer) => {
    cb(mutations)
  }).observe(el, Object.assign({
    childList: true,
    attributes: true,
    characterData: true,
    subtree: true,
  }, opt))
}

// 使用
watchDom('.div-wrap', mts => {
  console.log('更新了')
})

Answer 2

监听这个事件DOMSubtreeModified。
表示如果当前监听元素的子节点有改动：包括删除子节点、增加子节点、修改子节点的内容，都会触发这个事件。

var container = document.querySelector(".父级class")
container.addEventListener('DOMSubtreeModified', function () {
    // do you thing
}, false);

Answer 3

新增的时候重新获取一下