JavaScript pt 1을 사용하여 HTML 요소 조작/액세스

It's also possible to get the value of a HTML element and access it using CSS but this article doesn't cover that

HTML 요소를 얻는 방법

getElementByTagName(): Just as the name implies, this methods takes a HTML tag name and returns an array of the HTML element with that tag.
We can then loop through the array to get individual element like we'd loop through every other array.

//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(): This method takes a class name and returns an array of the HTML elements with that class.
We can loop through the array as we would an array.

//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(): This method takes an id name and returns a single HTML elements with that id.

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

querySelector(): This method takes either an id name or class name or tag name and returns a single HTML elements with that id, class or tag.

// 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')