Где посмотреть DOM дерево для веб-страницы.

Прежде чем мы приступим к работе с DOM-деревом документа и прежде чем начать с помощью Javascript влиять на HTML-структуру документа, на стили CSS и.т.д. я бы хотел сказать несколько слов об основных принципах, как это все будет работать. 

Нужно понимать, что когда в браузере открыта какая-либо вкладка, для нее создается глобальный объект, который содержит в себе всю информацию, которая относится к этой вкладке, к этой странице, к этому окну. И этот глобальный объект содержиться у нас в специальном объекте, который называется window.

Мы можем в консоли веб-разработчика браузере набрать эту команду и мы получим ее содержимое, которое содержит в себе всю информацию об этом веб-документе, который у нас открыт. 

Внутри этой глобальной переменной мы можем увидеть важную вкладку, которая называется document. Там содержиться вся информация о DOM - дереве документа, той страницы, которая сейчас открыта в браузере.

Document - это самый верхний узел DOM-дерева той страницы, которая у вас открыта. Там можно найти дочерние узлы, свойства и методы, которые могут применяться к HTML-дереву. Главное, что нужно понимать, что когда открыта вкладка, у нас создается глобальная переменная window, в которую размещается главный корневой узел (элемент) для DOM-дерева, который называется Document. 

Если в браузере вывести document в консоль, мы получим DOM-дерево документа из которого состоит документ.

Главное, о чем я хотел сказать, для того, чтобы обратиться к какому-то элементу, чтобы произвести с ним какие-то действия, в первую очередь нужно обратиться к корневому элементу (элементу document). 

Если мы хотим внести изменения в какой-то узел этого DOM-дерева, нам, в первую очередь, этот элемент нужно выбрать, т.е. сказать Javascript, что мы будем работать с этим элементом. 

С помощью специальных конструкций кода (селекторов) нужно выбрать этот элемент и сообщить какие действия Javascript должен будет сделать с этим узлом. 

В Javascript есть довольно много методов, как вы можете выбрать какой-либо элемент из DOM-дерева документа. Но, нужно понимать, что независимо от того, какой метод вы будете применять для выборки элемента, начинать обращаться к элементу, нужно с его корневого элемента (с элемента document).

Мы пишем document, далее указываем свойство или метод этого объекта. Document - содержит все DOM - дерево документа и обращаясь к его свойствам и методам, можно выбрать нужный элемент и произвести с ним нужные действия. 

О том, какие свойства и методы в объекте document мы можем применять, мы поговорим позже уже в следующих уроках. 

Комментарии: