Рубрики
Без рубрики

Дом Учебник

Что такое Дом? Объектная модель документа или DOM – это API для манипулирования документами HTML и XML …. Tagged с JavaScript, HTML, CSS, DOM.

Что такое Дом?

Объект документа или DOM – это API для манипулирования документами HTML и XML. DOM представляет документ или HTML -страницу как дерево узлов. DOM позволяет эффективно добавлять, удалять и модифицировать каждые узлы деревьев.

Согласно DOM, HTML -страница – это документ, который состоят из нескольких тегов HTML, где каждый тег является объектом. Вложенные теги создают дерево, подобную структуре узлов. Эти объекты могут доступны с использованием JavaScript и могут быть использованы для изменения документа или HTML -страницы.

Чтобы понять иерархию узлов, рассмотрите этот HTML -документ ниже:


    
        JavaScript DOM
    
    
        

Hello DOM!

Следующее дерево представляет собой вышеуказанный HTML -документ:

Как вы видите это Документ это корневой узел, а все остальное – дочерний узел. Дом-это все о отношениях между детьми между узлами. На странице HTML находится корневой узел, а затем

Текст внутри этих элементов образует текстовые узлы и помечен как #Text. Вот пример текстовых узлов:



About elk

The truth about elk.


Вот структура

HTML
   HEAD
      TITLE
         #text About elk
   BODY
      #text The truth about elk.

Подводя итог, модель объекта документа (DOM) представляет собой кроссплатформенную и независимую языковую интерфейс, который рассматривает документ XML или HTML как структуру дерева, в котором каждый узел является объектом, представляющим часть документа. DOM представляет документ с логическим деревом.

Выбор элементов

В этом разделе я покажу вам, как вы можете выбрать элементы разных типов на документе или HTML -странице.

getElementbyId ()

GetElementbyId () является методом объекта документа. Он позволяет выбирать тег HTML на основе конкретного идентификатора в документе. Документ или HTML -страница может только один идентификатор с тем же именем, что означает, что элемент идентификатора является уникальным. ID также чувствителен к случаям, что означает, что «Привет» и «Привет»-это два разных идентификатора. Следовательно, легко получить элемент, используя метод getElementbyId ().

Синтаксис getElementById ():

const element = document.getElementById(id);

Пример getElementbyId ():

HTML документ:


    
        getElementById()
    
    
        

Hello from Sukhbir

Давайте получить элемент абзаца с идентификатором Привет Анкет

const helloMessage = document.getElementById(`hello`);
console.log(helloMessage);

Выход:

Hello from Sukhbir

Давайте посмотрим на пример реального мира.

Сценарий: извлечь текст Сухбир Сехон из документа ниже:

Во-первых, щелкните правой кнопкой мыши по желаемому тексту и ищите ID UPN этот элемент.

Итак, id = Название Анкет Перейти на консоль и извлеките элемент H2 из документа с помощью id = Название Анкет Затем мы можем использовать специальный метод под названием innerhtml () для извлечения #Text из узла элемента.

Innerhtml позволяет вам вытащить #Text внутри элемента.

getElementsbyname ()

Элементы в документе HTML могут иметь имя атрибут. Unline Атрибут ID, несколько элементов могут использовать одно и то же значение атрибута имени.

Синтаксис для getElementsbyname ():

const elements = document.getElementsByName(name);

Элементы вернет список узлов с несколькими элементами с одним и тем же атрибутом.

Давайте посмотрим на настоящий пример работы.

Сценарий: Получить имена проектов из каждой из карт проекта, которые имеют атрибут имени, чтобы быть название проекта

Всего составляет 7 карт проекта. Давайте перейдем к панели консоли и получим название проекта каждой карт проекта.

Я создал переменную для хранения списка узлов из 7 элементов узла.

Теперь давайте посмотрим, как мы можем получить текст из определенного элемента узла.

С тех пор Проекты Следовательно, содержит список, мы можем легко получить доступ к каждому элементу, как в списке массивов, а затем вызовать метод Innerhtml для извлечения #Text.

getElementsbytagname ()

Метод getElementsbytagname () принимает имя тега и возвращает живое HTMlCollection элементов с соответствующим именем тега в порядке, который они появляются в документе.

Синтаксис getElementsbytagname ():

const elements = document.getElementsByTagName(tagName);

Как это использовать?

Допустим, если мы хотим извлечь все элементы с помощью метки H1 Анкет Вы можете сделать это так:

const h1 = document.getElementsByTagName(`h1`);

Возвращающаяся коллекция getElementsbytagname () живой, что означает, что она автоматически обновляется, когда элементы с соответствующим именем тега добавляются и/или удаляются из документа.

getElementsbyclassname ()

Метод getElementsbyclassname () доступен в объекте документа и в любом элементе HTML. Метод getelementsbyclassname () принимает один аргумент, который является строкой, которая содержит одно или несколько имен классов:

const elements = document.getElementsByClassName(classNames);

В этом синтаксисе параметр ClassNames-это строка, которая представляет имя класса или список имен классов, разделенных запятыми.

Метод getElementsbyclassname () возвращает живую htmlCollection элементов.

Если вы называете метод getElementsbyclassname () в объекте документа, метод ищет элементы с указанными именами классов во всем документе.

Однако, когда вы называете метод getelementsbyclassname () на определенном элементе, он возвращает только соответствующие элементы в поддерева элемента.

Queryselector

QuerySelector () является методом интерфейса элемента. QuerySelector () позволяет вам найти первый элемент, который является потомком родительского элемента, на котором он используется, который соответствует селектору CSS или группе селекторов CSS.

Помимо QuerySelector (), вы можете использовать метод queryselectorall (), чтобы найти все элементы, которые соответствуют селектору CSS или группе селектора CSS.

Примеры QuerySelector () и QuerySelectorerall ()

  • Находит первый элемент H1 в документе:
const firstHeading = document.querySelector(`h1`);
  • Находит все элементы H1 в документе:
const heading1 = document.querySelectorAll(`h1`);
  • Находит первый элемент с именем класса Hello-World:
const hello = document.querySelector(`.hello-world`);
  • Находит все элементы с именем класса Hello-World:
const hellos = document.querySelectorAll(`.hello-world`);
  • Находит первый элемент с идентификатором меню:
const menu = document.querySelector(`#menu`);
  • Находит весь элемент с идентификатором меню:
const menus = document.querySelectorAll(`#menu`);
  • Находит первый элемент с атрибутом Autoplay с любым значением:
const autoplay = document.querySelector(`[autoplay]`);
  • Найдите первое Элемент внутри P Элемент:
const a = document.querySelector(`p a`);
  • Найдите первое li элемент, который находится прямо внутри

      элемент:
const list = document.querySelector(`ul > li`);
  • Найдите все li элемент, который находится прямо внутри

      элемент:
const lists = document.querySelectorAll(`ul >li`);
  • Выбрать все Перечислите элементы, которые находятся внутри
      Элемент с классовой навитой:
const lists = document.querySelectorAll(`ul.nav > li`);
  • Найдите все ссылки или элементы, которые были посещены:
const visitedLogs = document.querySelectorAll(`a:visited`);

Вывод

Модель объекта документа (DOM) – это способ манипулировать HTML -документом или страницами. Есть много последствий для этого API. Например, вы можете выполнить сетевое соскоба, используя сторонние API, такие как Cheerio. Cheerio позволяет вам позвонить в HTML -страницу и анализировать документ HTML и манипулировать им. Вы можете создать систему оповещения для вашего любимого продукта, который в настоящее время недоступен на Amazon. Вы можете создать приложение, которое всегда будет работать на фоновом режиме и отслеживать конкретный URL -адрес продукта, который в настоящее время недоступен на Amazon, и как только элемент Div в изменении доступности приложение отправит вам электронное письмо или текстовое сообщение и будет Предупреждайте, что ваш любимый предмет теперь доступен на Amazon. Это всего лишь один из бесчисленных примеров, как вы можете использовать DOM в своем приложении.

Расскажите мне свой опыт с DOM в разделе комментариев! С нетерпением жду ваших историй.:)

Оригинал: “https://dev.to/sukhbirsekhon/dom-tutorial-39n”