Введение в DOM

Содержание
  1. Цель Объектная модель документа, широко известная как DOM, представляет собой спецификацию W3C (W3C DOM), которая обеспечивает структурное/иерархическое представление документа HTML/XML. Получая доступ к этому структурному представлению и влияя на него, языки программирования (например, JavaScript, PHP, Python) могут изменять структуру, стиль и контент документа. На w3resource есть длинная серия руководств по DOM. Этот учебник Введение в DOM даст вам обзор того, как работает DOM и что вы можете с ним делать. Простой пример Этот простой пример даст вам некоторое представление о том, что можно сделать с DOM. В этом примере нажатие на текст «Получить логотип w3resource» вставит логотип w3resource в документ. Вы можете посмотреть его в прямом эфире здесь. Используемый код показан ниже. Простой пример манипуляции с DOM Получить логотип w3resource function getImage () {var para = document.createElement ("p"); var image = document.createElement ("img"); image.src = "https://www .w3resource.com/images/logo.png "; para.appendChild (изображение); document.body.appendChild (para);} Если часть используемого здесь кода JavaScript вам неизвестна, не беда. Мы поговорим об этом позже в этом уроке. В следующей части руководства мы обсудим некоторые элементарные вещи, касающиеся DOM Некоторые основы DOM Начнем с простого HTML-документа. И тогда у нас будет графическое представление DOM-эквивалента этого документа. Это простой HTML-документ

    Ультиматум Борна

    TheBoutneUltimatumPoster

    Синопсис: The Bourne Ultimatum - это американо-немецкий шпионский триллер 2007 года, снятый Полом Гринграссом по мотивам романа Роберта. Роман Ладлума с таким же названием. Сценарий написали Тони Гилрой, Скотт З. Бернс и Джордж Нолфи.

    • Дата выхода: 3 августа 2007 г. (США).
    • Режиссер: Пол Гринграсс
    • Приквел: Превосходство Борна
    • Сценарий: Тони Гилрой, Скотт З. Бернс, Джордж Нольфи

    На следующем рисунке показана структура DOM документа HTML выше.


    Общие сведения об узлах

    В контексте DOM каждая сущность в документе HTML или XML называется узлом. В JavaScript все узлы представлены как объекты. У них есть свои собственные свойства и методы.

    Что касается вышеупомянутого HTML-документа, сам документ является узлом документа. XML-документ также называется узлом документа.

    - это узел DocumentType.

    - это узел элемента, так же как и meta, title , body, h1, p, ul и li.

    Текстовое содержимое, такое как текст заголовка «Это простой HTML-документ» представляет собой текстовый узел. То же самое и текстовое содержимое элементов h1, p и li.

    Кроме того, у вас могут быть DocumentFragment, ProcessingInstruction и Comment как узлы.

    DocumentFragment относится к части HTML или XML-документ. Примером ProcessingInstruction может быть Xml-stylesheet type = "text/xsl" href = "show_movies.xsl"?>, Который может быть частью файла XML, но они не обязательно подчиняются правилам XML. Комментарии вроде также являются узлами.

    У некоторых узлов могут быть дочерние узлы. Как и у ul в детстве li. У тела есть h1, p, ul всех этих детей. Но у всех узлов нет дочерних элементов.

    Согласно спецификации DOM, все типы узлов отображаются в числовое значение. По этому значению вы можете понять, с каким типом узла вы имеете дело. Следующий код JavaScript покажет все типы узлов и числовые значения, которым они сопоставляются. Откройте этот html-файл в своем браузере (мы использовали Chrome) и запустите следующий код из консоли

      для (var key в Node) {console.log (key, '=  '+ Узел [ключ]);  };
    
    
    вы увидите следующий результат
    
    
    
    Свойства и методы для узлов
    
    
    Объекты узлов имеют свои свойства и методы.  У нас будет обзор наиболее распространенных свойств и методов узла, унаследованных всеми объектами узла.
    
    
    Свойства узла: childNodes, firstChild, lastChild, nextSibling, nodeName, nodeType  , nodeValue, parentNode, previousSibling
    
    
    Методы узла: appendChild (), cloneNode (), compareDocumentPosition (), contains (), hasChildNodes (), insertBefore ()  , isEqualNode (), removeChild (), replaceChild ()
    
    
    Свойства элемента HTML: innerHTML, outerHTML, textContent, innerText, outerText, firstElementChild, lastElementChild, nextElementChild,  previousElementChild, children
    
    
    Методы элемента HTML: insertAdjacentHTML ()
    Что мы можем делать с DOM
    
    
    Начнем с простой HTML-страницы.
      О нас  . списки {color: orange;}    

    О нас

    • Компания:
    • Цель:
    • category:
    А затем с помощью DOM и JavaScript добьетесь следующего. Добавьте тег скрипта непосредственно перед концом тега body. Установите семейство шрифтов «Georgia, Times, Times New Roman, serif». Заполните каждый интервал внутри li некоторой информацией (компания, цель, категория). Перебираем каждый li и добавляем "списки" класса CSS. Добавьте тег стиля, который устанавливает правило для «списков», чтобы сделать цвет текста оранжевым. Создайте новый элемент img и установите для его атрибута src логотип компании. Добавьте этот элемент на страницу. Теперь следующий JavaScript выполнит свою работу. document.body.style.fontFamily = 'Джорджия, Times, "Times New Roman", serif;'; document.getElementById ('coname'). innerHTML = 'w3resource'; document.getElementById ('objective'). innerHTML = 'Создание качественных руководств по веб-разработке'; document.getElementById ('категория'). innerHTML = 'Интернет'; var items = document.getElementsByTagName ('li'); for (var i = 0; i Здесь вы можете увидеть живую демонстрацию. И это то, чем стал HTML-документ после запуска JavaScript Теперь давайте углубимся в простое объяснение, чтобы понять, что произошло. Для добавления семейства шрифтов 'Georgia, Times, "Times New Roman", serif;' к основному тексту мы использовали document.body.style.fontFamily = 'Georgia, Times, "Times New Roman" , serif; ';. Чтобы добавить текстовое содержимое в промежутки внутри li, мы получили доступ к промежутку по его идентификатору, используя (document.getElementById (' coname '), document.getElementById (' objective ') и document.getElementById (' category ')), а затем, используя innerHTML, мы добавили желаемый текст. Затем мы получили доступ к li, используя document.getElementsByTagName (' li '). Мы сохранили это в переменную items.Затем мы выполнили цикл, который выполняется столько раз, сколько li.И на каждом проходе мы использовали items [i] .className = 'lists'; для добавления класса списков в списки. Для добавления изображения мы создали элемент изображения с помощью document.createElement ('img') ;. Затем с w3rlogo.src = 'https://www.w3resource.com/images/logo.png'; мы устанавливаем src для логотипа, который мы хотим отобразить. Использование document.body.appendChild (w3rlogo); мы добавили элемент изображения тела. заключение В этом руководстве мы дали вам обзор того, что такое DOM, и чего мы можем достичь с помощью DOM и JavaScript. Если у вас есть вопросы или предложения, воспользуйтесь разделом комментариев ниже.
  2. Простой пример
  3. Некоторые основы DOM
  4. Свойства и методы для узлов
  5. Что мы можем делать с DOM
  6. заключение

Цель

Объектная модель документа, широко известная как DOM, представляет собой спецификацию W3C (W3C DOM), которая обеспечивает структурное/иерархическое представление документа HTML/XML. Получая доступ к этому структурному представлению и влияя на него, языки программирования (например, JavaScript, PHP, Python) могут изменять структуру, стиль и контент документа. На w3resource есть длинная серия руководств по DOM. Этот учебник Введение в DOM даст вам обзор того, как работает DOM и что вы можете с ним делать.

Простой пример

Этот простой пример даст вам некоторое представление о том, что можно сделать с DOM. В этом примере нажатие на текст «Получить логотип w3resource» вставит логотип w3resource в документ. Вы можете посмотреть его в прямом эфире здесь. Используемый код показан ниже.

    Простой пример манипуляции с DOM    

Получить логотип w3resource

function getImage () {var para = document.createElement ("p"); var image = document.createElement ("img"); image.src = "https://www .w3resource.com/images/logo.png "; para.appendChild (изображение); document.body.appendChild (para);}

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

Некоторые основы DOM

Начнем с простого HTML-документа. И тогда у нас будет графическое представление DOM-эквивалента этого документа.

       Это простой HTML-документ    

Ультиматум Борна

TheBoutneUltimatumPoster

Синопсис: The Bourne Ultimatum - это американо-немецкий шпионский триллер 2007 года, снятый Полом Гринграссом по мотивам романа Роберта. Роман Ладлума с таким же названием. Сценарий написали Тони Гилрой, Скотт З. Бернс и Джордж Нолфи.

  • Дата выхода: 3 августа 2007 г. (США).
  • Режиссер: Пол Гринграсс
  • Приквел: Превосходство Борна
  • Сценарий: Тони Гилрой, Скотт З. Бернс, Джордж Нольфи

На следующем рисунке показана структура DOM документа HTML выше.


Общие сведения об узлах

В контексте DOM каждая сущность в документе HTML или XML называется узлом. В JavaScript все узлы представлены как объекты. У них есть свои собственные свойства и методы.

Что касается вышеупомянутого HTML-документа, сам документ является узлом документа. XML-документ также называется узлом документа.

- это узел DocumentType.

- это узел элемента, так же как и meta, title , body, h1, p, ul и li.

Текстовое содержимое, такое как текст заголовка «Это простой HTML-документ» представляет собой текстовый узел. То же самое и текстовое содержимое элементов h1, p и li.

Кроме того, у вас могут быть DocumentFragment, ProcessingInstruction и Comment как узлы.

DocumentFragment относится к части HTML или XML-документ. Примером ProcessingInstruction может быть Xml-stylesheet type = "text/xsl" href = "show_movies.xsl"?>, Который может быть частью файла XML, но они не обязательно подчиняются правилам XML. Комментарии вроде также являются узлами.

У некоторых узлов могут быть дочерние узлы. Как и у ul в детстве li. У тела есть h1, p, ul всех этих детей. Но у всех узлов нет дочерних элементов.

Согласно спецификации DOM, все типы узлов отображаются в числовое значение. По этому значению вы можете понять, с каким типом узла вы имеете дело. Следующий код JavaScript покажет все типы узлов и числовые значения, которым они сопоставляются. Откройте этот html-файл в своем браузере (мы использовали Chrome) и запустите следующий код из консоли

  для (var key в Node) {console.log (key, '=  '+ Узел [ключ]);  };  

вы увидите следующий результат

Свойства и методы для узлов

Объекты узлов имеют свои свойства и методы. У нас будет обзор наиболее распространенных свойств и методов узла, унаследованных всеми объектами узла.

Свойства узла: childNodes, firstChild, lastChild, nextSibling, nodeName, nodeType , nodeValue, parentNode, previousSibling

Методы узла: appendChild (), cloneNode (), compareDocumentPosition (), contains (), hasChildNodes (), insertBefore () , isEqualNode (), removeChild (), replaceChild ()

Свойства элемента HTML: innerHTML, outerHTML, textContent, innerText, outerText, firstElementChild, lastElementChild, nextElementChild, previousElementChild, children

Методы элемента HTML: insertAdjacentHTML ()

Что мы можем делать с DOM

Начнем с простой HTML-страницы.

        О нас  . списки {color: orange;}    

О нас

  • Компания:
  • Цель:
  • category:

А затем с помощью DOM и JavaScript добьетесь следующего.

  • Добавьте тег скрипта непосредственно перед концом тега body.
  • Установите семейство шрифтов «Georgia, Times, Times New Roman, serif».
  • Заполните каждый интервал внутри li некоторой информацией (компания, цель, категория).
  • Перебираем каждый li и добавляем "списки" класса CSS. Добавьте тег стиля, который устанавливает правило для «списков», чтобы сделать цвет текста оранжевым.
  • Создайте новый элемент img и установите для его атрибута src логотип компании. Добавьте этот элемент на страницу.

Теперь следующий JavaScript выполнит свою работу.

  document.body.style.fontFamily  = 'Джорджия, Times, "Times New Roman", serif;';  document.getElementById ('coname'). innerHTML = 'w3resource';  document.getElementById ('objective'). innerHTML = 'Создание качественных руководств по веб-разработке';  document.getElementById ('категория'). innerHTML = 'Интернет';  var items = document.getElementsByTagName ('li');  for (var i = 0; i  

Здесь вы можете увидеть живую демонстрацию.

И это то, чем стал HTML-документ после запуска JavaScript

Теперь давайте углубимся в простое объяснение, чтобы понять, что произошло.

Для добавления семейства шрифтов 'Georgia, Times, "Times New Roman", serif;' к основному тексту мы использовали document.body.style.fontFamily = 'Georgia, Times, "Times New Roman" , serif; ';.

Чтобы добавить текстовое содержимое в промежутки внутри li, мы получили доступ к промежутку по его идентификатору, используя (document.getElementById (' coname '), document.getElementById (' objective ') и document.getElementById (' category ')), а затем, используя innerHTML, мы добавили желаемый текст.

Затем мы получили доступ к li, используя document.getElementsByTagName (' li '). Мы сохранили это в переменную items.Затем мы выполнили цикл, который выполняется столько раз, сколько li.И на каждом проходе мы использовали items [i] .className = 'lists'; для добавления класса списков в списки.

Для добавления изображения мы создали элемент изображения с помощью document.createElement ('img') ;. Затем с w3rlogo.src = 'https://www.w3resource.com/images/logo.png'; мы устанавливаем src для логотипа, который мы хотим отобразить. Использование document.body.appendChild (w3rlogo); мы добавили элемент изображения тела.

заключение

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

Оцените статью
nanomode.ru
Добавить комментарий