未捕获的 TypeError：无法在“MutationObserver”上执行“观察”：参数 1 不是“节点”类型答案

【问题标题】：Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'未捕获的 TypeError：无法在“MutationObserver”上执行“观察”：参数 1 不是“节点”类型
【发布时间】：2016-03-28 17:49:02
【问题描述】：

所以我下面的代码在 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);

【问题讨论】：

在两个“元素”引用中？
不只是当你打电话给observer.observe()。哦等等等等，不，我完全错了。
好的，你确定页面上有一个类为“pet-name”的元素吗？如果不是，那么element 将是null 或undefined。
好吧，宠物名字会出现在某些页面上，但不是全部......
那么您可能需要检查：if (element) observer.observe(...)

标签： javascript jquery

【解决方案1】：

我遇到了同样的错误，通过在onload/ready代码块中调用.observe()方法而不是观察者var定义，加上target元素和config变量的定义来解决它：

请运行下面的代码sn-p，点击“添加列表项”按钮，在控制台查看更改日志。

$(document).ready(function () {
    var target = document.getElementById("myList");
    var config = {
        childList: true,
        subtree: true,
        attributes: true,
        characterData: true
    };
    //note this observe method call
    observer.observe(target, config);
    console.log("Observer is 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>

【讨论】：