Question

我从一个页面中为Chrome扩展程序选择了多个元素，但其中一些元素未被检测到。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="@android:color/white"
    android:layout_height="match_parent">

    <include
        android:id="@+id/tool"
        layout="@layout/app_bar_dash_board" />

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tool">

        <android.support.v4.widget.DrawerLayout
            android:id="@+id/drawer_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:openDrawer="start">

            <FrameLayout
                android:id="@+id/container"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <android.support.design.widget.NavigationView
                android:id="@+id/nav_view"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="start"
                android:background="@android:color/white"
                android:fitsSystemWindows="true"
                app:headerLayout="@layout/nav_header_dash_board"
                app:itemIconTint="@color/colorPrimary"
                app:itemTextColor="@android:color/black"
                app:menu="@menu/activity_dash_board_drawer" />
        </android.support.v4.widget.DrawerLayout>
    </android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

我想将appendChild添加到此元素，但脚本会在它开始存在之前继续编辑它

var innerChat = document.querySelector('.chat-list');

显然导致：

innerChat.appendChild(emoteMenuWrap);

最好的办法是什么？

Answer 1

使用lookup。

假设您的chatDiv的父元素为chatDiv。页面上必须存在innerChat，但const observer = new MutationObserver(callbackFunction) const config = { subtree: true }; observer.observe(chatDiv, config);不需要：

chatDiv

当innerChat的内容发生变化时（向observer添加{EG}时），observer.disconnect();将运行回调函数。

在回调函数中，你可以做任何你想等待的事情。

此处成功的关键之一是选择父容器，以便其内部没有其他更改会触发您的事件多次。

最后，您可能想要删除回调中的观察者：

subtree

注意我编辑了这个来建议观察public abstract class Test { public Test() { foo(); } public abstract void foo(); } public class Test2 extends Test { private final Object testObj = new Object(); public Test2() { super(); } @Override public void foo() { System.out.println("object is: " + testObj); } }，因为您实际上是在添加元素，而不是更改现有元素。

Answer 2

突变观察者是一个不错的选择。对于下面不支持这种情况的环境，也可以使用getElementsByClassName返回实时列表：

var innerChat = document.getElementsByClassName("chat-list");

在您的其他脚本中：

function process(){
   if(!innerChat.length){
       requestAnimationFrame(process);
   } else {
       innerChat[0].appendChild(emoteMenuWrap);
   }
}
requestAnimationFrame(process);

JavaScript - 元素开始存在时的appendChild

2 个答案: