微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript – 未捕获TypeError:无法在’MutationObserver’上执行’observe’:参数1不是’Node’类型

所以我的代码在jsfiddle中独立工作.但由于一些奇怪的原因..我把它推到现场服务器后一直得到这个错误:/我无法弄清楚为什么……

错误

mycodewitherror.js:23 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

JS:

$(document).ready(function() {
// The below collects user login name,new login date and time,and prevIoUs use URL
var element = document.querySelector('.pet-name'); 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
      var username = $('.pet-name').text();
      var referrer = document.referrer;
      var date = new Date();
      var month = date.getUTCMonth() + 1;
      var day = date.getUTCDate();
      var year = date.getUTCFullYear();
      var time = date.toLocaleTimeString();
      var formattedDate = month + '/' + day + '/' + year;
    console.log("Pet Name Time"); 
      console.log(referrer); 
      console.log(petname); 
      console.log(time); 
      console.log(formattedDate);   
});

// configuration of the observer:

var config = { attributes: true,childList: true,characterData: true };

// pass in the target node,as well as the observer options
observer.observe(element,config);

解决方法

我遇到了同样的错误,并通过在onload / ready下插入.observe()方法而不是观察者var定义,加上target(element)和config变量的定义来解决它:
$(document).ready(function () {
    var target = document.getElementById("myList");
     var config = {
        childList: true,subtree: true,attributes: true,characterData: true
    };
//note this observe method
    observer.observe(target,config);
    console.log("registered");
});

var observer = new MutationObserver(function (mutationRecords,observer) {
    mutationRecords.forEach(function (mutation) {
        console.log("mutation change in ",mutation.type," name: ",mutation.target);
    });
});

function add() {
    var index = $("ul li").length;
    var listItem = document.createElement("li");
    listItem.textContent = index + 1;
    var target = document.getElementById("myList").appendChild(listItem,"before");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body >
    <button onclick="add()">Add list item</button>
    <hr>
    <ul id="myList">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
    </ul>
    
</body>

请运行代码段,单击“添加列表项”按钮,然后在控制台中查看更改日志.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


什么是深拷贝与浅拷贝?深拷贝与浅拷贝是js中处理对象或数据复制操作的两种方式。‌在聊深浅拷贝之前咱得了解一下js中的两种数据类型:
前言 今天复习了一些前端算法题,写到一两道比较有意思的题:重建二叉树、反向输出链表每个节点 题目 重建二叉树: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列 {1,2,4,7,3,5,6,8} 和中序遍历序列 {
最近在看回JavaScript的面试题,this 指向问题是入坑前端必须了解的知识点,现在迎来了ES6+的时代,因为箭头函数的出现,所以感觉有必要对 this 问题梳理一下,所以刚好总结一下JavaScript中this指向的问题。
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高