Странная работа JS

TANDEROID · October 6, 2017

Доброго времени суток, форумчане! Столкнулся со следующей проблемой, а скорее вопросом к опытным разработчикам. Сам вопрос в том, что я не могу понять почему так работает:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <main>
    </main>
    <script>
        var body = document.body;
        var main = document.getElementsByTagName("main")[0];
        main.innerHTML += "Hello";
        body.innerHTML += "World!";
    </script>
</body>
</html>

А так нет:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <main>
    </main>
    <script>
        var body = document.body;
        var main = document.getElementsByTagName("main")[0];
        body.innerHTML += "World!"; //переставил строку на другое место
        main.innerHTML += "Hello";
    </script>
</body>
</html>

Tilonorrinco · October 6, 2017

Дело, как мне кажется в том, что main изменяется уже после того, как DOM-дерево перестроено. Попробуйте переместить строку с инициализацией переменной main уже после изменения innerHTML у body, и все заработает. Мне кажется, это работает как-то так:

1) перед выполнением скрипта анализируется html-код и строится объектная модель документа (ДОМ)

2) вы инициализируете несколько переменных, они ассоциируются с конкретными элементами DOM дерева.

3) вы изменяете содержимое первого элемента(body) и полностью перестраиваете его html. DOM-дерево рендерится заново. Так как дерево заново перерисовалось, ссылка на вторую переменную уже не актуальна: она ссылается на элемент из старого дерева. Именно он и изменяется через innerHTML, а новый узел дерева остается нетронутым.

AlexZaw · October 6, 2017

я конечно плохо знаю JS, но мне кажется тут дело в чем то другом, т.к. если во втором примере в конце вывести main в консоль он содержит строку Hello, но body при том же выводе в консоль почему то содержит пустой main

Edited October 6, 2017 by AlexZaw

Switch74 · October 6, 2017

https://jsfiddle.net/79ko4qry/
если мы меняем body, то main полученные до и после этого изменения не один и тот же элемент
если не менять то один и тот же

Tilonorrinco · October 6, 2017

AlexZaw,

Просто тот узел main, на который ссылается переменная, продолжает существовать, хоть и извлекается из DOM-дерева. Cборщик мусора не удаляет этот элемент, т.к. на него ссылается переменная. Именно этот элемент и дополняется текстовым узлом ('hello'). Поэтому в консоли выводится содержимое старого main'a.

А если вы после изменения body заново инициализируете эту переменную (или создадите новую переменную), то в консоли выведется уже пустой main, а старый main будет удален окончательно.

Edited October 6, 2017 by Tilonorrinco

Sign In

Странная работа JS

Question

TANDEROID

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Tilonorrinco

Link to comment

Share on other sites

AlexZaw

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Tilonorrinco

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information