Манипулирование / доступ к элементам HTML с помощью JavaScript часть 1

Говоря простым языком, DOM предоставляет способ манипулирования или доступа к элементам HTML с помощью JavaScript.

Скажем, вы хотите получить значение поля ввода или элемента HTML в вашей функции или коде JavaScript, DOM делает это возможным.

Также можно получить значение HTML-элемента и получить к нему доступ с помощью CSS, но в данной статье это не рассматривается.

МЕТОДЫ ПОЛУЧЕНИЯ ЗНАЧЕНИЯ ЭЛЕМЕНТА HTML

Поэтому я перечислю методы, прежде чем объяснять их синтаксис

1. getElementByTagName()
2. getElmentByClassName()
3. getElementById()
4. селектор запроса()

getElementByTagName(): Как следует из названия, этот метод принимает имя HTML-тега и возвращает массив HTML-элементов с этим тегом.
Затем мы можем перебирать этот массив, чтобы получить отдельный элемент, как мы перебираем любой другой массив.

Основной синтаксис

//returns an array of all HTML element with the p tag
const elements = document.getElementByTagName('p') 

// Looping through the array of elements 
for (let i=0; i<elements.length; i++){

    //Getting each html element in the array
    Console.log(elements[i])
}

getElementByClassName(): Этот метод принимает имя класса и возвращает массив HTML-элементов с этим классом.
Мы можем просматривать этот массив в цикле, как массив.

Основной синтаксис

//returns an array of all HTML element with the title class
const elements = document.getElementByClassName('title') 

// Looping through the array of elements 
for (let i=0; i<elements.length; i++){

    //Getting each html element in the array
    Console.log(elements[i])
}

getElementById(): Этот метод принимает имя id и возвращает один HTML-элемент с этим id.

Основной синтаксис

const elements = document.getElementById('demo') 
Console.log(elements)

querySelector(): Этот метод принимает либо имя id, либо имя класса, либо имя тега и возвращает один HTML-элемент с этим id, классом или тегом.

Основной синтаксис

// select the first available h1 element
let firstTitle = document.querySelector('h1') 

// select id with first-title
let firstTitle = document.querySelector('#first-title') 

// select the first available element with class title
let firstTitle = document.querySelector('.title') 

Спасибо за прочтение ❤️