λ°μν
μμ μ ν
μμλ₯Ό μ§μ μ ννλ λ©μλ
| λ©μλ | μ€λͺ |
|---|---|
| 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()μ λͺ¨λ μμλ₯Ό μ ν |
μμ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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
β’ λ΄μ©2
β’ λ΄μ©3
β’ λ΄μ©4
β’ λ΄μ©5
β’ λ΄μ©6
λ°μν
'JavaScript' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [JavaScript] λ΄μ₯ ν¨μ (7) | 2022.08.13 |
|---|---|
| [JavaScript] λ°°μ΄ λ©μλ μμ보기 (8) | 2022.08.11 |
| [JavaScript] μ μλ³μμ μ§μλ³μ (5) | 2022.07.28 |
| [JavaScript] ν¨μμ μ’ λ₯μ μ¬μ©λ°©λ² (10) | 2022.07.26 |
| [JavaScript] λ°μ΄ν° νμ μ’ λ₯ μμ보기 (10) | 2022.07.25 |
λκΈ