HTML 요소 선택 방법
1. document.querySelector(선택자) : 해당 선택자로 선택되는 요소를 선택
2. document.querySelectorAll(선택자) : 해당 선택자로 선택되는 요소를 모두 선택 (배열)
3. document.getElementsByTagName(태그이름) : 해당 태그 이름의 요소를 모두 선택 (배열)
4. document.getElementById(아이디) : 해당 아이디의 요소를 선택
5. document.getElementsByClassName(클래스이름) : 해당 클래스에 속한 요소를 모두 선택 (배열)
중첩된 태그에서 요소 선택
1. parentElement : 부모태그
2. children : 자식태그 리스트
3. nextElementSibling : 인접 형제 태그
<body>
<div class="container">
<div class="inner first">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="inner second">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</div>
<script src="./test.js"></script>
</body>const container = document.querySelector(".container");
console.log(container);
// 부모 태그 - body태그
console.log(container.parentElement);
// 자식 태그 - inner first, inner second
console.log(container.children);
// 형제 태그 - script태그
console.log(container.nextElementSibling);HTML, CSS 동적 효과 주기
1. innerText = "content" : 요소 내부 컨텐츠 조회, 수정
2. innerHTML = "html" : 요소 내부 엘리먼트 전체 조회, 수정
3. style.property = "css property value" : 요소 스타일 조회, 수정
- .html
<div>하이~</div>- .js
const divTag = document.querySelector("div");
console.log(divTag);
divTag.style.color = "red";
* innerText과 innerHTML 차이점
: innerText는 속성값으로 주어진 것을 텍스트로 인식 innerHTML은 html로 인식
const divTag = document.querySelector("div");
divTag.innerText = "<h1>안녕하세요.</h1>";
const divTag = document.querySelector("div");
divTag.innerHTML = "<h1>안녕하세요.</h1>";
태그 추가
1. document.createElement() : 태그 만들기
2. document.createTextNode(): text 노드 만들기
3. element.appendChild(): 자식 노드 추가
4. element.setAttribute(attribute, value): 요소에 속성 추가
개발하는 개린이 개리