javascript - 当父元素中存在元素时，HTMLCollection 显示长度 0

Question

我正在使用苹果的 MapKit JS 将地图嵌入到网页中。我需要访问底层 HTML Shadow Dom 中的标记注释，我想为元素添加一个类名。使用浏览器开发工具，我可以“看到”shadow dom

Shadow Dom 结构

我使用以下代码“遍历”shadow dom：

  let annotationContainer = document.querySelector(".mk-annotation-container");

  let mapAnnotations = annotationContainer.shadowRoot.querySelector(".mk-annotations");

  console.log(mapAnnotations);

  if (!mapAnnotations.hasChildNodes()) {
    console.log("There are NO child nodes");
  }

  let firstAnnotation = mapAnnotations.firstElementChild;
  console.log("First Child: "+firstAnnotation);

  var annotationMarkers = mapAnnotations.children;
  console.log(annotationMarkers)

运行此命令时，控制台日志显示 mapAnnotations 的childElementCount确实为 2，并且节点显示在 childNodes 和 children 属性中。但是，当读取子节点或子节点时，它显示没有子节点，并且变量annotationMarkers中生成的 HTMLCollection有两个元素，但长度为 0。

控制台输出显示带有子节点的父节点

显示日志消息的控制台输出

我见过几个类似的问题，答案似乎是 DOM 没有完全加载，尽管在记录父节点时这确实显示了子元素。

所以我的问题分为两部分，父元素是否知道它有 2 个子元素，但这些元素实际上并没有在那时加载，并且

其次，有没有办法在 shadowDom 上执行类似的 $(document).ready 函数调用？从而确保 shadowDom 中的所有元素（或父 mapAnnotations 节点的所有子元素）都已加载？

我已经在 shadowRoot 元素上尝试了一个 ready 函数，并附加了一个 eventListener 来监听 DomContentLeaded 事件，但这根本不会触发。

更新 30/09/2020 @ 20:30

我在 JS 中放了一个 setTimeout，超时完成后子节点计数现在显示为 2。我需要找到一种方法来等待 shadowDom 完成并等待元素存在：/

标签： javascriptshadow-domnodelisthtmlcollection

Answer 1

使用 Jquery 库

var child_items = $('.your_parrent_class').find('li');

console.log(child_items.length);