ДАГ Lloyd: В этом видео мы хотели чтобы вызвать отдельного внимания в частности, очень элемент JavaScript что вы могли бы найти под рукой когда вы начинаете работать на манипулировании веб-страниц и изменения содержания веб-страницы на лету. И это понятие Объектная модель документа. Итак, как мы видели в нашем видео на JavaScript, являются очень гибкими. И они могут содержать различные поля. И хотя мы не пошли на много подробно, эти поля или свойства, что мы, вероятно, более соответственно называть их в контексте объекта, даже Эти свойства можно другие объекты. А внутри этих объектов могут быть и другие объекты. 

Вы должны это очень большой объект с большим количеством других объектов внутри него, что-то создает эту идею большого дерева. Теперь, объект документа является очень специальный объект в JavaScript который организует всю вашу сеть страница под такого рода зонтиком объекта. И так внутри документа объект объекты, представляющие являются голова и тело вашей веб-странице. 

Внутри те друга объекты, и так далее, и так далее, до вся ваша веб-страница не имеет был организован в этом большом объекте. Что вверх здесь, верно? Ну, мы знаем, как работать с объектами в JavaScript. 

Так что, если у нас есть объект, который относится ко всей нашей веб-странице, что означает, позвонив правильно методы, чтобы манипулировать, что объект или изменения наверняка его свойств, мы может изменять элементы наша страница программно с помощью JavaScript, вместо того, кодировать вещи, скажем, HTML. Так вот пример очень простой веб-страницы, не так ли? Он получил HTML-теги, голову. 

Внутри есть название, привет мир. Тогда у меня есть тело. Внутри, что у меня есть три разные вещи. У меня есть тег заголовка h2, абзац, а также ссылка. Это очень простой веб-страницы. 

Ну, то, что документ может объект для этого выглядеть? Ну, это немного страшно, может быть, в первую очередь. Но это на самом деле просто большое дерево. И в самом корне ней документ. 

Внутри документ является еще одним Объект со ссылкой на HTML моей странице. И HTML моей странице все это. И тогда внутри HTML объект, у меня есть объект голову, который относится ко всему там. 

А внутри там, У меня есть объект название. А внутри там, у меня есть еще один возразить, что просто привет мир. Я мог бы мое тело представлены, как это. 

Внутри моего тела, у меня есть h2 объект и объект р по пункту и объект для ссылки. И так вся эта иерархия может быть представлена ​​в виде большого дерева с большим меньшего Литтл вещи выходят из него. Теперь, конечно, когда мы программ, мы Не думаю, что таких вещей, как большое дерево. Мы хотим, чтобы текущая код, связанные вещи. 

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

И я открыл Developer Tools. И в моем видео на JavaScript, я отметил, что консоль не только где-то, где мы печатаем информацию, это также место, где мы можем входную информацию. В этом контексте, что Я собираюсь сказать, Я хотел бы вернуться объекты документов, так что я могу начать, чтобы взглянуть на него. Так как я мог это сделать? Ну, если я хочу организовать очень красиво, Я хочу сказать, console.dir, D-I-R. Теперь, я использую console.log просто распечатать что-то очень простое. Но если я хочу, чтобы организовать это иерархически как объект, Я хочу это своего рода структурированный как структуры каталогов. 

Поэтому я хочу, чтобы console.dir документ. Я ударю Enter. И прямо под ним сейчас, и я буду приближать здесь, Я получил этот документ реагирования с небольшой стрелкой рядом с ним. Теперь, когда я открываю эту стрелку, там будет много вещей. 

Но мы собираемся игнорировать много из него и только отчасти в фокусе на самой важной части, таким образом, мы может начать перемещаться этот документ. Там намного больше к DOM, чем просто родитель узлы и дочерние узлы. Там очень много вспомогательного материала. 

Так что я собираюсь открыть это. И есть много вещи, которые всплывает. Но все, что я забочусь о том прямо здесь, дочерние узлы. Давайте откроем, что до. 

Внутри есть я вижу что-то знакомое, HTML. Так внутри нашего документа один уровень вниз, HTML. Я открываю, что до. Что мы ожидаем? 

Если вы помните из нашей диаграмме, что мы должны найти внутри HTML? Какие два узлы под ним в дереве? Давай выясним. Мы открываем HTML. Мы спускаемся в его дочерних узлов. 

Поп, которые открываются. Там голова и тело. И мы можем открыть головку. Перейти к его дочерних узлов. Ну, есть название. 

И мы могли бы пойти дальше и на, как это навсегда. Мы могли бы сделать это с телом, а также. Но есть способ для нас, чтобы смотреть на документ организован как большой объект. И если мы посмотрим на большой объект, который выглядит много как код, это означает, что мы можем начать манипулировать этой большой объект с помощью Код изменить то, что наши сайт выглядит и чувствует, как. 

Так что это довольно мощный инструмент мы имеем в нашем распоряжении в настоящее время. Так как мы только что видели, Сам документ объект и все объекты внутри него имеют свойства и методы, просто как и любой другой объект, который мы работает с в JavaScript. Но мы можем использовать эти свойства и использовать эти методы, чтобы своего рода развернуть с большой документа и получить все ниже и ниже, и ниже, тоньше и тоньше зерна не детализации, пока мы попасть в очень определенной части нашего веб-страницы, которые мы хотим изменить. 

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

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

Но пару из этих свойств может быть что-то вроде внутренней HTML. И вы, возможно, даже вспомнить меня используя это в видео JavaScript в самом конце, когда я говорил о событиях. Что это внутренняя HTML? Ну, это просто то, что между тегами. 

И так внутренний HTML, Например, названия тег, если бы мы продолжали идти в что, например, минуту назад, было бы привет мир. Это было название нашей страницы. Другие свойства включают в себя имя узла, который это имя из HTML элемент, такой как название. ID, который является идентификатором атрибут HTML элемента. 

Напомним, что мы можем специально указать конкретные элементы нашего HTML с ID атрибута, который обычно пригождается в контексте CSS, специально. Родительский узел, который является ссылкой на что только наверху меня в DOM. И дочерние узлы, что является ссылка на то, что внизу меня. И мы увидели, что много просто просматривая. Дочерние узлы, которые, как мы получили все ниже и ниже в дереве. 

Атрибуты, это просто массив из атрибуты HTML элемент. Так пример атрибутов может если бы у вас есть тег изображения, он обычно имеет атрибут исходного, может быть, высота и ширина атрибут. И так, что бы просто быть массивом из всех атрибутов, связанных с этой HTML элемента. 

Стиль еще один, который вовсе представляют CSS укладка конкретного элемента. А потом в этом видео, мы будем специально рычаги стиль сделать пару изменения на нашем сайте. Так что те, некоторые свойства. 

И есть также некоторые Методы, которые мы можем использовать также более быстро, может быть, изолировать элементы объекта документа. Может быть, самый универсальный из них является getElementById. Так что я мог бы сказать что-то вроде, потому что помните, что это метод Документа Объект, document.getElementById. 

А внутри этих скобок, укажите HTML-элемент с определенной ID атрибутов, что я ранее установлен, и я сразу же буду идти прямо к этому элементу от общего веб-сайта. Так что я не должен, может быть, сверлить вниз через каждый слой. Я могу просто использовать этот метод, чтобы найти его, вроде как тепло ищущего ракеты, правильно? Это просто идет и находит именно то, что он ищет. 

GetElementsByTagName является очень похожи по духу. Может быть, это будет найти все из смелые теги и все р тегов и дать мне массив все что я мог бы работать. AppendChild добавляет что-то один уровень вниз в дереве. 

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

getElementById-- Д в нижнем регистре. Я не могу сказать вам, сколько раз я должен б getElementById и капитализируются Д есть. Потому что это действительно общее. Если мы пишем слово ID, это как правило, капитал Капитал I Д. И мой код просто не работает. И я не могу понять, почему. Это действительно, действительно, действительно общая ошибка, что каждый делает, даже эксперты, которые имеют делал это навсегда. Так просто быть в курсе, getElementById, что г в нижнем регистре. И можно надеяться, что экономит несколько минут, по крайней мере душевной боли. 

Итак, что же все это нам говорит? У нас есть эти методы. У нас есть эти свойства. Теперь, если мы исходим из документ, документ. все, теперь мы можем получить любой один кусок нашей веб-странице что мы хотим, чтобы с помощью JavaScript просто называть эти методы и используя свойства что мы находим в разных местах. 

Это может стать многословным, это document.getElementById, может быть, есть длинный имя тега, Может быть, вы больше звонков позже. Вещи могут получить немного многословны. И как программисты, как вы, наверное, видели во многих из этих видео, нам не нравится многословные вещи. 

Мы хотели бы быть в состоянии сделать вещи быстро. Таким образом, мы хотели бы более кратким способ сказать что-то. Так что это своего рода приводит к Понятие, что называется JQuery. Теперь JQuery не JavaScript. Это не часть JavaScript. 

Это библиотека, которая была написана некоторые программисты JavaScript около 10 лет назад. И его целью является, чтобы упростить это то, что называется стороне клиента сценариев, которые в основном то, что мы были просто говорить о с DOM манипуляций. И поэтому, если я хотел, чтобы модифицировать Цвет фона моей веб-странице, может быть, специфический Див. 

Вот, я, видимо, получать ElementById colorDiv. И я хочу, чтобы установить его цвет фона. Если я только с помощью чистого JavaScript с использованием Document Object Model, это много вещей, не так ли? document.getElementById colorDiv.style.backgroundColor = зеленый. 

Вот так. Это было много, чтобы сказать. Это много, чтобы ввести, тоже. И так в JQuery, мы можем сказать, может быть, это немного более кратко. Компромисс быть это, может быть, немного немного больше загадочное вдруг, правильно? 

По крайней мере, долго еще немного поясняющими, как то, что мы делаем. Этот знак доллара, круглые скобки, апостроф, хэш, colorDiv, верно? Что это значит? Ну, это в основном только document.getElementById colorDiv. 

Но это такого рода стенографии способ сделать это с помощью JQuery. Давайте просто посмотрите сейчас на несколько различных способов что я на самом деле может Используйте этот объект Document Модель манипулировать части моего сайта. В частности, мы собираемся работать на манипулировании цвет конкретный Див, colorDiv, на веб-странице. Итак, давайте взглянем на это. Все в порядке. Так что я на странице. Это называется test.html, когда вы загружаете это, если вы хотите, чтобы возиться с этим. И я получил кучу Кнопки на этой странице. И я говорю отдельные функции для цвет фона, фиолетовый, зеленый, оранжевый, красный, синий, одна функция для цвета фона, обработчик события для цвета фона, и с помощью JQuery. Что я говорю о когда я делаю это? Таким образом, мы видели кнопки. Теперь, давайте взглянем на некоторые из исходного кода здесь. Мы начнем с test.html. Так отдельные функции для фона цвет, что я набрал здесь. Позвольте мне прокрутить немного. 

И вы заметите, что я определили эти кнопки сказать, когда эта кнопка нажата, вызвать функцию включить фиолетовый. Когда эта кнопка мыши, а, вызвать функцию зеленеть, оранжевым, красным, синим. Вы, наверное, можете догадаться, что это Возможно, это не самый лучший дизайн смысл, верно? 

Было бы неплохо, если бы я мог имеют более общий подход. Ну, во-первых, мы будем смотреть на то, что эти пять функций document.getElementById colorDiv.style.background = фиолетовый, зеленый, оранжевый, красный, и синий, соответственно. Так, в частности, не лучший дизайн. 

Следующий набор кнопок Я это я написал одна функция называется изменить цвет, что, видимо принимает строку в качестве аргумента. Так что это немного лучше. Фиолетовый, зеленый, оранжевый, красный, синий теперь аргумент. Так что я написал более общий Дело функция JavaScript, которые могли бы выглядеть следующим образом. Я передаю в. Это изменение цвета функция ожидая аргумент с именем цвета. И я говорю установить цвет фона цвет. Так здесь представляет то, что я попал сюда. Так что это немного лучше. 

Но я мог бы быть в состоянии лучше, чем это. Если мы идем вниз, чтобы взглянуть в ситуации обработчика событий, Теперь все эти вызовы выглядят одинаково. Если вспомнить для нашего обсуждение обработчиков событий, Я могу получить информацию о том, какие из эти кнопки нажали и использовать. 

И так в event.JavaScript, у меня написано изменение цвета событие, которое выясняет, какая кнопка была нажата. Это объект триггера линии. И тогда здесь, это становится действительно многословным. Но то, что я делаю, я установка фон цвет triggerObject inner.HTML. Вот текст между тэгами кнопки. 

И тогда я, очевидно, имеют чтобы установить его в нижний регистр. И это, как я могу преобразовать все строка в нижний регистр в JavaScript с помощью что метод в нижний регистр. Потому что, когда я поставил цвет, как я пытаюсь сделать здесь, цвет должен быть в нижнем регистре. 

Но кнопка, которая у меня была, если мы еще раз взглянуть, заметить, что текст есть написано с большой буквы для фиолетовый. И тогда, по крайней Нижняя здесь, я, кажется, попытаться сделать это, используя JQuery, а также. И в этом случае, я на самом деле не вызов функции вообще. Я только что сказал, что класс Я используя для этого является кнопка JQ. Вот и все. 

Так как же JQuery знаю, что я делаю? Ну, это одно из преимуществ сократить недостатки JQuery. Это может позволить мне делать то, очень лаконично, но, возможно, не а интуитивно. Может быть, те, другие три сделать немного больше ощущать, что я делаю. Здесь, однако, то, что происходит? 

Судя по всему, создание анонимная функция что всякий раз, когда мой грузы документ готов, так document.ready, некоторые функции произойдет. В основном, когда документ готов? Это когда моя страница загрузится. 

Поэтому, как только моя страница загружена, Следующая функция всегда готов. Это говорит, если объект типа jQButton, или если класс jQButton была нажата, выполнить эту функцию. Так вот два анонимных функций, которая определена внутри другой. 

Так всю мою контексте здесь до сих пор моя страница при загрузке он вызывает эту функцию. И эта функция ждет Для кнопок будет нажата. А когда нажата кнопка, JQ Кнопка специально щелчке он вызывает этот другой функция, которая будет чтобы установить фон Цвет colorDiv быть любой текст, в между тегами. 

Это понятие кнопка, которая была нажата. Но в противном случае, это своего рода себя похоже на события. Это точно так же, как я выразит это в JQuery. Опять же, это, вероятно, намного больше запугать. Это не ясно, как что-то вроде event.js, что, может быть, немного больше многословен, но немного меньше пугающим. 

Но если мы поп-обратно к браузере окна, если я начну clicking-- хорошо, что изменилось в фиолетовый. Это зеленый с использованием метода строку. Это оранжевый, используя обработчик событий. 

Это красный, используя JQuery, верно? Все они ведут себя точно так же. Они просто делают это с использованием различных подходы к решению проблемы. Там очень много больше, чтобы JQuery то мы, конечно, поговорим о в этом видео. Но если вы хотите узнать больше, вы можете перейти к JQuery рода документации и узнать немного больше о это очень гибкая библиотека, которая является большим для этого на стороне клиента сценариев, таких как то, что мы делали манипулировать вид и чувствовать нашей веб-странице с объектной модели документа. Я Дуг Ллойд. Это CS50.