반응형
DOM(문서 객체 모델)
HTML 문서에 접근하기 위한 일종의 인터페이스로
HTML 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법 제공
이러한 객체 모델을 이용하는 이유
- 새로운 HTML 요소나 속성 추가 가능
- 존재하는 HTML 요소나 속성 제거 가능
- HTML 문서의 모든 HTML 요소 변경 가능
- HTML 문서의 모든 HTML 속성 변경 가능
- HTML 문서의 모든 CSS 스타일 변경 가능
- HTML 문서에 새로운 HTML 이벤트 추가 가능
- HTML 문서의 모든 HTML 이벤트에 반응 가능
요소의 선택
<body>
<div id="contents">
<h1 class="title">This is title</h1>
<div class="detail">
<span>detail 1</span>
</div>
<div class="detail">
<span>detail 2</span>
</div>
<div class="detail">
<span>detail 3</span>
</div>
<input type="text" name="id" />
<input type="password" name="pw" />
</div>
</body>
메서드
// document.getElementById
//해당 아이디의 요소 선택
const contents = document.getElementById("contents");
// document.getElementsByClassName
//해당 클래스에 속한 요소 모두 선택
const title = document.getElementsByClassName("title");
// document.getElementsByTagName
//해당 태그 이름의 요소 모두 선택
const spanTag = document.getElementsByTagName("span");
// document.getElementsByName
//해당 name 속성값을 가지는 요소 모두 선택
const nameId = document.getElementsByName("id");
// document.querySelectorAll
//해당 선택자로 선택되는 요소 모두 선택
const allDetail = document.querySelectorAll("#contents .detail");
콘솔에 출력
array로 가져온 요소들의 태그를 지정하려면, 메서드에 인덱스를 작성
// 인덱스 지정
const titleZero = document.getElementsByClassName("title")[0];
const spanTagOne = document.getElementsByTagName("span")[1];
const nameIdZero = document.getElementsByName("id")[0];
const allDetailTwo = document.querySelectorAll(".detail:first-child");
콘솔에 출력
요소의 생성
메서드
// document.createElement("태그명")
// HTML 요소 생성
const title = document.createElement("h1");
// document.write(텍스트);
// 텍스트 출력
document.write("Hello world!");
콘솔에 출력
이벤트 핸들러 추가
<!-- body 내부에 버튼 생성 -->
<button class="btn">click me!</button>
메서드
window.onload = function () {
const btn = document.getElementsByClassName("btn")[0];
// .onclick = function(){ 실행문 };
// 마우스 클릭 이벤트와 연결될 이벤트 핸들러 추가
btn.onclick = function clickBtn() {
alert("Hi!");
};
};
버튼 클릭
'JavaScript' 카테고리의 다른 글
| [JavaScript] 스코프(Scope)와 변수 var, let, const (0) | 2021.09.03 |
|---|---|
| [JavaScript] click event 실행 (0) | 2021.09.02 |
| [JavaScript] 브라우저 객체모델 BOM(Browser Object Model) (0) | 2021.08.30 |
| [JavaScript] function 함수 (0) | 2021.08.29 |
| [JavaScript] 간단한 Array와 Object 차이 (0) | 2021.08.28 |
