Question

更新：我在原始的html / js中测试了此代码，并且如评论中所述正常工作。这是React App的一部分，我想问题应该出在应用程序如何加载这部分代码。但是，对于选择其他元素，效果很好。

我正在尝试从网页中选择包含 contenteditable 属性的所有元素，并将其设置为 true ，但是querySelectorAll返回的NodeList包含0个元素

HTML（来自编辑器组件）：

<div class="codex-editor">
   <div class="codex-editor__redactor" style="padding-bottom: 300px;">
       <div class="ce-block">
         <div class="ce-block__content">
           <h2 class="ce-header" contenteditable="true" data-placeholder="">Editor.js</h2>
         </div>
       </div>
   </div>
</div>

JavaScript

useEffect(() => {
    let matches = document.body.querySelectorAll('[contenteditable=true]'); 
    console.log(matches)
})



 return (
  <Editor
       tools={{
         header: Header,
         list: List,
         image: Image,
         delimiter: Delimiter
       }}
      holder="guest-editorjs"
      onChange={(data) => console.log(data)}
      onReady={() => console.log('Start!')}
      data={{data}} />
    )

控制台中的结果：空的NodeList

Answer 1

解决方案：此代码在原始html / js中可以正常工作。问题在于React加载子组件，这就是为什么无法访问内容的原因。

谢谢！

querySelectorAll找不到具有自定义属性的元素

1 个答案: