[Powered by Google Translate] [DOM]
[Томми Мак-Вильямс] [Гарвардский университет]
[Это CS50.] [CS50.TV]
В этом видео мы собираемся взглянуть на DOM.
Когда браузер загружает веб-страницы, она должна быть представлена ​​в памяти как-то.
Объектную модель документа DOM или,
описывает, как браузер представляет собой веб-страницы в памяти.
В этом видео мы посмотрим на DOM в контексте JavaScript,
DOM, но является независимым от языка понятие.
Например, PHP имеет свою собственную реализацию DOM, а также.
Тем не менее, DOM часто используются JavaScript
Так как JavaScript позволяет нам изменять содержимое веб-страницы на лету,
DOM и позволяет нам получить доступ к части веб-страниц.
Давайте посмотрим на примере веб-страницы.
Хорошо, теперь давайте посмотрим, как эта страница будет представлена ​​в DOM.
И каждое дерево должно иметь корневой узел в верхней части.
В рамках данного документа, элемент HTML является корневым узлом
, потому что это первый элемент, который появляется.
Давайте добавим корневой узел нашего дерева.
Давайте взглянем на HTML документ еще раз.
Обратите внимание, что тело тег вложен внутри тегов HTML.
Это означает, что тело элемент является дочерним элементом HTML.
Мы можем представить это в нашей DOM дерева, делая тело листа
сходящего с HTML.
Давайте сделаем это.
У нас есть тело под HTML.
Теперь мы видим, что тело имеет 2 детей своих,
элемента h1 и ул элемента.
Это означает, что мы можем соединить оба эти элементы
к телу элементов, так что давайте делать это.
У нас есть h1 и ул.
Наконец, ул элемент имеет еще 3 детей,
и это будет заполните DOM дерева, так что давайте добавим Ли, Ли, Ли.
На этом мы завершаем DOM дерева, и это, как браузер хранит свою страницу.
Теперь давайте посмотрим, как мы можем пройти эту дерева с помощью JavaScript.
Мы можем получить доступ этого дерева с помощью специальной переменной JavaScript называется документом.
Одним из свойств этого объекта документа
является органом собственности и представляет данный объект
элемент тела в нашем примере веб-страницы.
Если бы мы хотели, чтобы все дети элемента тела,
который, если вы помните, что тег h1 и ул тег,
мы можем сказать, document.body.childNodes.
И это вернет нам массив, содержащий оба элемента h1
и ул элемента, так как они оба прямыми потомками тела.
Если бы мы хотели создать переменную представляющих ул элемент
мы можем сказать, ул VRR =, то этот код здесь,
и сейчас, потому что ChildNodes это просто массив
мы можем индексируем его с [1], чтобы получить второй элемент этого массива.
С помощью этого нового объекта уль можно получить доступ к различным свойства элемента, как и его идентификатор.
Если мы говорим, что ul.id будет равна строке списка
потому что это то, что мы имеем в нашей HTML страницы.
Мы также можем получить ее тэг который в этом случае будет
какой элемент он есть, в этом случае, ул.
Мы также можем получить его родителей или узла выше себя, которое в данном случае
будет тело элемента.
Если мы говорим. ParentNode, что это будет такой же, как document.body.
Конечно, эта улица имеет детей своих,
так что мы можем еще сказать. ChildNodes на этом элементе,
и этого массива должны теперь иметь длину 3, потому что есть 3 пункта в нашем списке.
И, наконец, пожалуй, самое полезное свойство будет. Innerhtml,
и это будет фактическое содержимое списка, который в нашем примере страницы
были те 3 Li теги.
Конечно, если у нас есть большой документ, доступ к элементам
таким способом, будет очень сложно, так
в конце концов нам придется говорить вещи, как document.body.childNodes
Кронштейн что-то. ChildNodes кронштейн что-то еще,
и он собирается получить действительно громоздко.
Вместо того, что мы действительно хотим сделать, это иметь возможность запроса документа,
так же, как мы искали вещи в Интернете с помощью ключевых слов
мы действительно нуждаемся в некоторых способ поиска этого документа кратко
вернуться только те элементы, мы заботимся о без пересечения
Весь верхний дерева вниз.
К счастью, современные браузеры позволяют нам это сделать
со специальной функцией называется querySelectorAll,
и эта функция принимает один аргумент
то есть CSS селектор, и он собирается вернуться к нам
все элементы, которые соответствуют этому селектору.
Это означает, что вам не нужно учиться совершенно новый синтаксис для запросов DOM.
Вместо этого вы можете применить знания, вы уже знаете,
о CSS селекторы.
Давайте взглянем на некоторые примеры запросов к документу.
Если мы говорим, querySelectorAll и передать его этой строкой # Foo
что происходит, чтобы вернуть нам элемент с ID Foo.
Можно также сказать, document.getElementById
и передать его строка Foo без этого хэштег.
Вы собираетесь вернуться точно такой же объект.
Если вместо этого мы передаем строку. Бара document.querySelectorAll
мы собираемся вернуть все элементы с классом бар.
Мы также можем объединить CSS селекторы.
Если мы передадим в строке # Foo IMG
что происходит, чтобы вернуть нам все элементы изображения
, которые являются потомками элемента с ID Foo.
Как вы можете видеть, путем объединения селекторов у нас есть некоторые очень мощные возможности поиска.
Но под капотом, DOM на самом деле просто дерево,
и эти селекторы позволяют нам, что от абстрактных до некоторой степени
потому что мы не всегда заботимся о всей структуре дерева DOM.
Это был краткий обзор того, DOM, и спасибо за присоединение к нам.
[CS50.TV]