๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

์š”์†Œ ์„ ํƒ์ž

by Youcodein 2022. 8. 7.
728x90
๋ฐ˜์‘ํ˜•

์š”์†Œ๋ฅผ ์ง์ ‘ ์„ ํƒํ•˜๋Š” ๋ฉ”์„œ๋“œ

์ „์—ญ ๋ณ€์ˆ˜์™€ ์ง€์—ญ ๋ณ€์ˆ˜์˜ ์„ ์–ธ ์œ„์น˜

๋ฉ”์„œ๋“œ ์„ค๋ช…
getElementById() ์•„์ด๋”” ์š”์†Œ ์„ ํƒ์ž. document.getElementById('content')์ผ ๊ฒฝ์šฐ HTML์š”์†Œ ์ค‘ id ์†์„ฑ์ด 'content'์ธ ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
getElementsByClassName() ํด๋ž˜์Šค ์š”์†Œ ์„ ํƒ์ž. document.getElementsByClassName('menu')์ผ ๊ฒฝ์šฐ HTML์š”์†Œ ์ค‘ class๋ช…์ด 'menu'์ธ ์š”์†Œ๋“ค์„ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
getElementsByTagName() ํƒœ๊ทธ ์š”์†Œ ์„ ํƒ์ž. document.getElementsByTagName('ul')์ผ ๊ฒฝ์šฐ HTML์š”์†Œ ์ค‘ ํƒœ๊ทธ๋ช…์ด 'ul'์ธ ์š”์†Œ๋“ค์„ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
getElementsByName() document.getElementsByName('txt')์ผ ๊ฒฝ์šฐ HTML์š”์†Œ ์ค‘ name๋ช…์ด 'txt'์ธ ์š”์†Œ๋“ค์„ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
querySelector() ์š”์†Œ ์„ ํƒ์ž. ์š”์†Œ์˜ ์„ ํƒ ๋ฐฉ๋ฒ•์ด css ์„ ํƒ ๋ฐฉ๋ฒ•๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์„ ํƒ๋œ ์š”์†Œ ์ค‘ ์ฒซ ๋ฒˆ์งธ ์š”์†Œ๋งŒ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
document.querySelector('.lnb') document.querySelector(div) document.querySelector('#gnb li')
querySelectorAll() ๋ชจ๋“  ์š”์†Œ ์„ ํƒ์ž. querySelector()๋Š” ์„ ํƒ๋œ ์š”์†Œ ์ค‘ ์ฒซ ๋ฒˆ์งธ ์š”์†Œ๋งŒ ์„ ํƒํ•˜๋Š” ๋ฐ˜๋ฉด querySelectorAll()์€ ๋ชจ๋“  ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ์ œ 3-48

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>์š”์†Œ๋ฅผ ์ง์ ‘ ์„ ํƒํ•˜๋Š” ๋ฉ”์„œ๋“œ</title>
    <script>>
        window.onload = function() {
            var list1 = document.querySelector('#box1 > ul > li');
            var list2 = document.querySelectorAll('#box2 > ul > li');
            console.log(list1);
            console.log(list2);
            //list1.style.background = '#ff6600';
            //list2[0].style.background = '#ccc';
            //list2.item(1).style.background = '#ddd';
        };
    </script>
</head>
<body>
    <div id="box1">
        <ul>
            <li>๋‚ด์šฉ1</li>
            <li>๋‚ด์šฉ2</li>
            <li>๋‚ด์šฉ3</li>
        </ul>
    </div>
    <div id="box2">
        <ul>
            <li>๋‚ด์šฉ4</li>
            <li>๋‚ด์šฉ5</li>
            <li>๋‚ด์šฉ6</li>
        </ul>
    </div>
</body>
</html>
๊ฒฐ๊ณผ ๋ณด๊ธฐ
"โ€ข ๋‚ด์šฉ1"
"โ€ข ๋‚ด์šฉ2"
"โ€ข ๋‚ด์šฉ3"

"โ€ข ๋‚ด์šฉ4"
"โ€ข ๋‚ด์šฉ5"
"โ€ข ๋‚ด์šฉ6"
728x90
๋ฐ˜์‘ํ˜•

'์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

๋‚ด์žฅํ•จ์ˆ˜  (3) 2022.08.15
๋ฐฐ์—ด ๊ด€๋ จ ๋ฉ”์„œ๋“œ  (10) 2022.08.11
์ „์—ญ๋ณ€์ˆ˜์™€ ์ง€์—ญ๋ณ€์ˆ˜  (5) 2022.08.03
ํ•จ์ˆ˜ ์ดํ•ดํ•˜๊ธฐ  (5) 2022.07.28
๋ฐ์ดํ„ฐ ํƒ€์ž…  (4) 2022.07.26

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

HTML

์ž์„ธํžˆ๋ณด๊ธฐ

CSS

์ž์„ธํžˆ๋ณด๊ธฐ

JAVASCRIPT

์ž์„ธํžˆ๋ณด๊ธฐ

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