未捕获的类型错误:无法执行'观察'在'突变观察者':参数1不是'节点'
Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type '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
元素和config
变量的定义来解决它:
请运行下面的代码片段,单击";添加列表项";按钮,并在控制台中查看更改日志。
$(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>
相关文章:
- 检测 DIV 的高度何时变化,而无需轮询或突变观察者
- 突变观察者尚未定义
- 突变观察者未能检测到元素's删除dom
- 手动调整元素大小;不要在Chrome中激发突变观察者
- 未捕获的类型错误:无法执行'观察'在'突变观察者':参数1不是'节点'
- 阵列突变而不触发特定的观察者
- 突变观察者收到的突变记录的顺序是什么?
- 突变观察者 - 未检测到添加的某些节点
- 使用突变观察者将 DOM 元素列入黑名单
- 突变观察者仅获取特定内容
- 重新连接并断开突变观察者
- 突变观察者不起作用
- DOM突变观察者:如何支持DOM3突变事件的一个重要用途
- 突变观察者字符数据使用情况,没有子列表
- 突变观察者不检测文本变化
- 使突变观察者更快,资源更少
- 聚合物:用复杂观察者观察阵列突变
- 铬突变观察者
- Firefox不遵守突变观察者的childList配置参数
- 如何使用突变观察者对特定的样式属性更改做出反应