DOM: 문서를 객체화하여 실시간으로 코드를 수정
<html>
<head>
<title> 타이틀</title>
</head>
<body>
<p> gg </p>
</body>
<html>- html 태그의 자식은 head와 body
- head의 자식은 title
- body의 자식은 p
요런관계~~
요소 추출 메서드
-
아이디로 검색. 1개 찾는다 Element
document.getElementById("id"); -
태그명으로 검색. 여러개를 찾으므로 배열에 담아 준다 Elements
document.getElementsByTagName("name"); -
클래스명으로 검색. 여러개 찾으므로 배열에 담아 준다. Elements
document.getElementsByClassName("name");
요소 변경
- 태그 사이의 내용 변경
El.innerHTML = 새 값;
요소의 값이 새 값으로 변경된다.
- 속성값 변경
El.속성명 = 새 값;
El.value;
만약 input이라면 텍스트 박스에 작성된 값을 불러온다.
불러서
El2.src
이미지 경로도 바꿀 수 있음!
- css 속성 변경
El.style.css속성명 = 새 값;
속성 변경 메서드
- El.setAttribute("속성명","값");
속성값 읽기 메서드
- El.getAttribute("속성명","값");
요소 추가, 삭제, 변경
- 새 요소 생성
document.create("속성명","값");
- 요소를 자식으로 추가
부모요소.appendChild(자식요소);
- 요소를 삭제
부모요소.remove(자식요소);
- 요소를 자식으로 추가
부모요소.replace(new, old);
