<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="add()">Add</button>
<button onclick="remove()">remove</button>
<div class="controls">
<button id="reload" type="button">Reload</button>
</div>
<div class="event-log">
<label>Event log:</label>
<textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
</div>
<script>
function add() {
let odiv = document.createElement("div");
odiv.style.width = "100px";
odiv.style.height = "100px";
odiv.style.background = "#f00";
odiv.id = "odiv"
document.body.appendChild(odiv);
}
function remove() {
let odiv = document.getElementById("odiv");
document.body.removeChild(odiv);
}
document.addEventListener("DOMContentLoaded", function () {
console.log("DOMContentLoaded")
document.addEventListener("DOMNodeInserted", function (e) {
console.log("insert", e.target);
});
document.addEventListener("DOMNodeRemoved", function (e) {
console.log("remove", e.target);
});
// var div = document.createElement("div");
// div.innerHTML = "<span>span</span>";
// console.log("%cinnerHTML", "color:red");
// document.body.innerHTML = "<div><span>span</span></div>text";
// console.log("%cinsertAdjacentHTML", "color:red");
// document.body.insertAdjacentHTML("beforeend", "<div>div</div>");
// console.log("%cappendChild", "color:red");
// document.body.appendChild(div);
// document.body.appendChild(div); //重复调用 appendChild
// console.log("%cremoveChild", "color:blue");
// document.body.removeChild(div);
// console.log("%cinnerHTML", "color:blue");
// document.body.innerHTML = "";
});
const log = document.querySelector('.event-log-contents');
const reload = document.querySelector('#reload');
reload.addEventListener('click', () => {
log.textContent = '';
window.setTimeout(() => {
window.location.reload(true);
}, 200);
});
window.addEventListener('load', (event) => {
log.textContent = log.textContent + 'load\n';
});
document.addEventListener('readystatechange', (event) => {
log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
});
document.addEventListener('DOMContentLoaded', (event) => {
log.textContent = log.textContent + `DOMContentLoaded\n`;
});
</script>
</body>
</html>
DOMContentLoaded DOMNodeInserted DOMNodeRemoved 加载 添加 删除 dom
最新推荐文章于 2022-07-20 16:55:18 发布