javascript - element.nextElementSibling 未返回正确的元素

Question

我正在使用 CKEditor 5 在每个 textarea 上创建一个富含文本的编辑器。有 class .section-dynamique-fr 。

编辑器确实已附加到我的 html 页面。

现在，当我尝试使用 e.nextElementSibling 通过 javascript 访问编辑器时，它不会返回其 nextElementSibling正如控制台检查器中的节点树所示，它返回 e.nextElementSibling.nextElementSibling .

知道为什么我无法访问 e.nextElementSibling 吗？ (带有 class .ck-editor 的 div )？

请参阅附图了解 html 节点结构

document.querySelectorAll('.section-dynamique-fr').forEach( (e) => {

    ClassicEditor
        .create( document.querySelector('#' + e.id), {
            // toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
        } )
        .then( editor => {
            window.editor = editor;
            thisEditor = editor;
        } )
        .catch( err => {
            console.error( err.stack );
        } );

    console.log(e); //This gives me the textarea
    console.log(e.nextElementSibling); //This should gives me the div with class ck-editor but instead gives me the div with class .textarea-saved-content-fr

Answer 1

这是因为create执行后编辑器没有创建。您需要将代码替换为then回调。 callback是一个Promise，它将在编辑器完全创建后解析。请参阅documentaion

document.querySelectorAll('.section-dynamique-fr').forEach( (e) => {

    ClassicEditor
        .create( document.querySelector('#' + e.id), {
            // toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
        } )
        .then( editor => {
            window.editor = editor;
            thisEditor = editor;
            console.log(e.nextElementSibling);
        } )
        .catch( err => {
            console.error( err.stack );
        } );