堆栈内存溢出
  繁体   English   中英

未捕获的类型错误：无法在“IntersectionObserver”上执行“观察”：参数 1 不是“元素”类型

[英]Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'

 原文  2020-08-15 17:31:17  8   6    javascript/ intersection-observer

问题描述

我正在观看 Intersection Observer 上的视频，我已经逐字复制了他的脚本，但不知何故出现了这个错误。 有人遇到了同样的错误，但通过将 querySelectorAll 更改为 querySelector 解决了他们的问题。 即使我复制了他们的代码并将其更改为 querySelector，它仍然无法在我的最终工作。 下面的代码是我的。 我正在使用 vs code 实时服务器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel='stylesheet' href='style.css'>
    <script src='script.js'></script>
</head>
<body>
    <section class = 'section1'></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
</body>
</html>

const sectionOne = document.querySelector('.section1');

const options = {};

const observer = new IntersectionObserver(function
(entries, observer){
    entries.forEach(entry => {
        console.log(entry);
    });
}, options);

observer.observe(sectionOne);

body{
    padding: 0;
    margin: 0;
}

section{
    height: 100vh;
    width:100%;
}
section:nth-child(odd){
    background: lightcoral
}

6 个解决方案

解决方案1
 4  2020-08-15 21:31:09

该元素返回为 null，因为脚本在 HTML 被解析之前运行。 我在脚本标签中使用了 defer 来避免这个问题。

<script src='script.js' defer></script>

解决方案2
 0  2020-08-15 17:48:24

实际上，您发布的示例看起来效果很好，您可以在我制作的这个 JSFiddle 中检查它： https://jsfiddle.net/sandro_paganotti/pomtng6f/3/

const sectionOne = document.querySelector('.section1');
const options = {};

const observer = new IntersectionObserver(function
 (entries, observer){
    entries.forEach(entry => {
       console.log(entry);
 });
}, options);

observer.observe(sectionOne);

当然，作为仅附加到第一部分的观察者，它只会在第一部分进入或离开视口时触发。

解决方案3
 0  2021-02-26 20:22:07

添加

$(document).ready(function () { // your code }

文档 = 你的 div。

您必须确保 DOM 已加载，并且当它“准备好”时它会启动:)。

解决方案4
 0  2021-06-21 03:55:41

您的选择是针对第一个元素的 querySelector 如果您想要 select 全部使用第一个元素，然后使用 querySelectorAll，并循环遍历它们，以便观察者可以一个一个地观察它们，应该如下：

const sections = document.querySelectorAll('section');

const options = {};

const observer = new IntersectionObserver(function
(entries, observer){
entries.forEach(entry => {
    console.log(entry);
});
}, options);

// loop 
sections.forEach( section => {
observer.observe(section);
});

解决方案5
 0  2022-06-15 12:38:12

我相信intersectionObserver.observe只能观察一个元素。 我注意到当有多个具有相同 class 名称的 div 元素时，观察返回未捕获的 typeError。

其他通过从 querySelectorAll 更改为 querySelector 使其工作的人可能是因为他们有几个具有相同 class 名称的 div。

解决方案6
 0  2022-09-22 08:38:12

您需要确保 IntersectionObserver 脚本将在 DOM 完全加载后运行。

document.addEventListener("DOMContentLoaded", function(){
    
      // your instersectionobserver code here
    
    
    });

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 无法在“IntersectionObserver”上执行“observe”：参数 1 不是“元素”类型 未捕获的类型错误：无法在“MutationObserver”上执行“观察”：参数 1 的类型不是“节点” 未捕获的TypeError：无法在“ FileReader”上执行“ readAsBinaryString”：参数1的类型不是“ Blob” 未捕获的类型错误：无法在“AudioContext”上执行“createMediaElementSource”：参数 1 不是“HTMLMediaElement”类型 未捕获的类型错误：无法在“节点”上执行“appendChild”：参数 1 的类型不是“节点”。 爪哇脚本 未捕获的类型错误：无法在“FileReader”上执行“readAsDataURL”：参数 1 的类型不是“Blob” 未捕获的TypeError：无法在&#39;Node&#39;上执行&#39;insertBefore&#39;：参数1不是&#39;Node&#39;类型 未捕获的类型错误：无法在“节点”上执行“removeChild”：参数 1 的类型不是“节点” Angular.js：未捕获的TypeError：无法在“ FileReader”上执行“ readAsDataURL”：参数1的类型不是“ Blob” 未捕获的TypeError：无法在&#39;Node&#39;上执行&#39;appendChild&#39;：参数1不是&#39;Node&#39;类型。
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM