์ƒ์„ธ ์ปจํ…์ธ 

๋ณธ๋ฌธ ์ œ๋ชฉ

DOM

Javascript

by loeybho 2024. 5. 7. 16:15

๋ณธ๋ฌธ

๊ฐœ๋… ๐Ÿ“ƒ

Vanilla JS๋ฅผ ๋Šฅ์ˆ™ํ•˜๊ฒŒ ๋‹ค๋ฃจ๊ธฐ ์œ„ํ•ด์„œ๋Š” DOM์„ ์กฐ์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„์•ผ ํ•œ๋‹ค. 

 

 

ํ™œ์šฉ ์˜ˆ์‹œ ๐Ÿช„

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Entendendo o DOM (Document Object Model)</title>
    </head>
    
    <body>
        <div class="container">
        <h1><time>00:00:00</time></h1>
        <button id="start">Start</button>
        <button id="stop">Stop</button>
        <button id="reset">Reset</button>
        </div>
    </body>
</html>

 

 

getElementById()

const myStart = document.getElementById('start');

 

์ด ๋ฉ”์„œ๋“œ๋Š” ์ „๋‹ฌ๋œ ์ด๋ฆ„ id๊ฐ€ ํฌํ•จ๋œ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋ฐ˜ํ™˜. id๋Š” ๊ณ ์œ ํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์›ํ•˜๋Š” ์š”์†Œ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐ ๋งค์šฐ ์œ ์šฉ.

 

 

getElementByClassName()

const myContainer = document.getElementByClassName('container');

 

์ด ๋ฉ”์„œ๋“œ๋Š” ์ „๋‹ฌ๋œ ํŠน์ • ์ด๋ฆ„ ํด๋ž˜์Šค๋ฅผ ํฌํ•จํ•˜๋Š” ๋ชจ๋“  ์š”์†Œ์˜ HTMLCollection์„ ๋ฐ˜ํ™˜.

 

 

querySelector()

const resetButton = document.querySelector('#reset');

 

๊ด„ํ˜ธ ์†์— ์ œ๊ณตํ•œ ์„ ํƒ์ž์™€ ์ผ์น˜ํ•˜๋Š” ๋ฌธ์„œ ๋‚ด ์ฒซ๋ฒˆ์งธ element๋ฅผ ๋ฐ˜ํ™˜.

 

 

querySelectorAll()

const myButtons = document.querySelector('#buttons');

 

๊ด„ํ˜ธ ์†์— ์ œ๊ณตํ•œ ์„ ํƒ์ž์™€ ์ผ์น˜ํ•˜๋Š” ๋ฌธ์„œ ๋‚ด ๋ชจ๋“  element๋ฅผ ๋ฐ˜ํ™˜.

 

 

 

 
์ €์ž‘์žํ‘œ์‹œ

'Javascript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ธฐ์ดˆ (๋ฐ์ดํ„ฐ ํƒ€์ž…๊ณผ ํ•จ์ˆ˜)  (0) 2024.06.11
๋ฐฐ์—ด ๋ฉ”์„œ๋“œ ๋ณ€ํ˜•  (0) 2024.03.24
๋ฐฐ์—ด ๋ฉ”์„œ๋“œ ์ˆœํšŒ์™€ ํƒ์ƒ‰  (0) 2024.03.24
๋ฐฐ์—ด ๋ฉ”์„œ๋“œ ์š”์†Œ ์กฐ์ž‘  (0) 2024.03.24
async/await  (0) 2024.02.20

๊ด€๋ จ๊ธ€ ๋”๋ณด๊ธฐ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”