Почему в коде ниже точка останова DOM для этого элемента
<ul id="container"></ul>
в Google Chrome Debugger не достигнута?Эта точка останова DOM имеет параметр «поддерево изменено».
Я думаю, что объяснение состоит в том, что код, который изменяет элемент HTML container (добавить 10 li элементов), запускается сразу после загрузки DOM.
Потому что, когда я добавляю
<input type="button" id="myButton" value="add 10 [li] elements into [ul] element" />
на мою страницу и в случае "нажатия" этой кнопки, я выполняю код JS, достигается точка останова DOM.
Почему моя точка останова достигнута в одном случае, а не в другом?
Исходный код
Мой HTML-файл: page1.html
<!DOCTYPE html>
<html>
<head>
<title>Test: DOM breakpoint with Chrome</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="page1.js"></script>
</head>
<body>
<ul id="container"></ul>
</body>
</html>
И мой JS-файл: page1.js
// Equivalent in JS native of JQuery function '$.document.ready()'
function ready(fn) {
if (document.readyState !== 'loading'){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
// The content of this function is executed only when DOM is loaded
function onReady()
{
var container = document.querySelector('#container');
for (var i = 0, element; i < 10; i++) {
element = document.createElement('li');
container.appendChild(element);
element.innerHTML = i + 1;
}
}
ready(onReady); // Allow to execute JS instructions, only when DOM is fully loaded.
Скриншоты из отладчика Google Chrome
