JS如何检测ctrl+shift+i输入等HTML变化？答案

【问题标题】：How can JS Detect changes in the HTML such as ctr+shift+i input?JS如何检测ctrl+shift+i输入等HTML变化？
【发布时间】：2020-08-06 23:48:02
【问题描述】：

Here 是我目前正在开发的网站。作为对用户的挑战，我们要求他们使用 ctrl+shift+i 与 HTML 交互并更改某些元素。

Javascript 或 html/css 如何检测到他们改变了这一点？

即

<div>
  <p>This is placeholder text</p>
</div>

我们希望他们将占位符文本更改为特定内容，然后授予他们访问新页面的权限。

【问题讨论】：

我能想到的最好的办法就是定期扫描这些元素的内容，看看是否有任何变化
这能回答你的问题吗？ Is there a JavaScript / jQuery DOM change listener?
@ItsLogic 这个应该解释一下jsfiddle.net/4maLhq5e/2
#this_should_change 是您希望用户更改其内容的元素。这样做是在页面加载时加载该元素的内容并定期检查它是否有变化
@ItsLogic 我会添加它作为答案然后我们可以关闭这个问题

标签： javascript html css user-input

【解决方案1】：

正如 cmets 中所发布的，可以在页面加载时加载元素的默认内容，然后定期扫描更改

window.onload = () => {
  let changeCheck = document.querySelector('#this_should_change'); // get the element
  let oL = changeCheck.innerHTML; // load the default values
  let check = setInterval(() => {
  	if (changeCheck.innerHTML !== oL) { // if the values are different from the values on load
    	alert("Stuff changed"); // your code
      clearTimeout(check);	// clear the interval so that it does not repeat itself
    }
  }, 100); // this will check the element every second
};

<p id="this_should_change">
  Foo
</p>

【讨论】：