◉ DOM
▪︎ 웹 브라우저는 문서 객체 모델(DOM)을 생성할 수 있음
- 생성한 문서 객체 모델을 통해 HTML 문서의 구성 요소를 객체로 인식할 수 있음
- 자바스크립트가 웹 브라우저의 문서 객체 모델을 조작해 웹 브라우저에 표시되는 HTML 문서 구조를 변경하거나, 새로운 구성 요소를 추가하는 등의 작업을 할 수 있음
▪︎ DOM이 생성되는 방식
- 웹 브라우저가 HTML 문서를 해석 → 해석한 HTML 문서 구조를 객체로 변환하는 방식으로 생성됨
- 다음 그림과 같이 DOM 트리 형태로 문서 구조를 변환함
- document 객체 하위에 HTML 태그 요소, 속성, 텍스트, 주석 등이 트리 형태로 구성 → 각각을 노드(node)fkrh gka
◉ 메서드로 노드 선택하기
▪︎ 자바스크립트로 웹 브라우저에 표시되는 HTML 문서를 조작하려면, DOM을 조작해야 함
▪︎ DOM은 window 객체의 document 객체를 사용해서 조작 가능
1. 속성명과 태그명 사용하기 - get 메서드
| 메서드 형식 | 설명 |
| getElementById(<id 속성값>) | id 속성값과 일치하는 요소 노트를 1개만 선택 |
| getElementsByClassName(<class 속성값>) | class 속성값과 일치하는 요소 노드를 모두 선택 |
| getElementsByTagName(<태그명>) | 태그명과 일치하는 요소 노드를 모두 선택 |
<body>
<h1 id="title">title</h1>
<p class="text">text-1</p>
<p class="text">text-2</p>
<script>
// id 속성값이 title인 요소 노드 1개를 선택
const el = document.getElementById("title");
console.log(el);
// class 속성값이 text인 요소 노드 모두 선택
const classEl = document.getElementsByClassName("text");
console.log(classEl);
// p 태그에 해당하는 요소 노드 모두 선택
const tagEls = document.getElementsByTagName("p");
console.log(tagEls);
</script>
</body>
2. CSS 선택자 사용하기 - query 메서드
▪︎ document 객체의 메서드 중에는 매개변수로 CSS 선택자를 전달받아 노드를 선택하는 메서드도 있음
▪︎ CSS 선택자를 사용하는 메서드
| 메서드 형식 | 설명 |
| querySelector(<CSS 선택자>) | 매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 1개만 선택 |
| querySelectorAll(<CSS 선택자>) | 매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 모두 선택 |
◉ 노드 조작하기
1. 콘텐츠 조작하기
▪︎ 요소 노드의 콘텐츠 조작 속성
| 속성 | 설명 |
| textContext | 요소 노드의 모든 텍스트에 접근 |
| innerText | 요소 노드의 텍스트 중 웹 브라우저에 표시되는 텍스트에만 접근 |
| innerHTML | 요소 노드의 텍스트 중 HTML 태그를 포함한 텍스트에만 접근 |
▪︎ 다음과 같은 HTML 코드가 있음
<p id-"title">Hello, <span style="display:non;">Javascript!</span></p>
- 콘텐츠 조작 속성으로 접근하여 각 속성의 콘텐츠를 가져와보자
document.getElementById("title").textContent; // Hello, Javascript!
document.getElementById("title").innerText; // Hello,
document.getElementById("title").innerHTML; // Hello, <span style="display:non;">Javascript!</span>
2. 메서드로 속성 조작하기
▪︎ 속성 조작 메서드
| 메서드 형식 | 설명 |
| <노드>.getAttribute("속성명"); | 속성값을 가져옴 |
| <노드>.setAttribute("속성명", "속성값"); | 속성값을 설정함 |
| <노드>.removeAttribute("속성명"); | 속성을 삭제함 |
▪︎ getAttribute()
- 선택된 요소 노드의 속성값을 가져오고 싶을 때 사용
<a href="https://www.naver.com">네이버</a>
<script>
const aEl = document.querySelector("a");
const href = aEl.getAttribute("href");
console.log(href);
</script>- querySelector() 메서드로 a 태그에 해당하는 요소 노드 선택
→ getAttribute() 메서드로 href 속성값을 가져옴
▪︎ setAttribute()
- 속성값을 새로 설정하고 싶을 때 사용
<a href="https://www.naver.com">네이버</a>
<script>
const aEl = document.querySelector("a");
const href = aEl.getAttribute("href");
aEl.setAttribute("href", "www.daum.net");
aEl.innerText = "다음"; // a 태그의 텍스트 변경
// * 바꾼 속성값을 적용해 새 창으로 열리게 하고 싶을 때
aEl.setAttribute("target", "_blank");
</script>
◉ 이벤트 다루기
▪︎ 이벤트
- 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점을 의미
- 이벤트가 발생하면, 이벤트 종류에 따라 어떤 작업을 하거나 미리 등록한 함수를 호출하는 등의 조작을 자바스크립트로 지정할 수 있음
1. 이벤트 종류
▪︎ 주요 이벤트 종류
2. 이벤트 등록하기
▪︎ 이벤트 등록
- 이벤트가 발생할 때 어떤 작업을 할지 자바스크립트 코드로 작성하는 것을 의미
- 이벤트 등록 방법은 크게 3가지로 구분됨
: 인라인, 프로퍼티 리스너, 이벤트 등록 메서드
① 인라인 방식으로 이벤트 등록하기
- HTML 태그에 속성으로 이벤트를 등록하는 방법
- onclick 이벤트를 button 태그의 속성으로 사용함
속성 값으로는 이벤트가 실행할 때 실행될 함수를 지정함
<body>
<button onclick="clickEvent()">클릭</button>
<script>
function clickEvent(){
alert("click");
}
</script>
</body>
② 프로퍼티 리스너 방식으로 이벤트 등록하기
- 프로퍼티 리스너(property listener) : 요소 노드에 직접 속성으로 이벤트를 등록하는 방법
- 버튼을 클릭했을 때 요소 노드에 등록된 이벤트 속성에 할당된 함수가 실행됨
<button>클릭</button>
<script>
const btnE1 = document.querySelector("button");
btnE1.onclick = function(){
alert("click");
}
</script>
- ES6을 사용할 수 있는 개발 환경이라면, 코드를 화살표 함수로 작성해도 됨
<button>클릭</button>
<script>
const btnE1 = document.querySelector("button");
btnE1.onclick = () => {
alert("arrow click");
}
</script>
- 또는 함수를 별도로 정의하고 함수명을 이용해 이벤트와 연결할 수도 있음
<button>클릭</button>
<script>
const btnE1 = document.querySelector("button");
btnE1.onclick = clickEvent;
function clickEvent(){
alert("click");
}
</script>
③ 이벤트 등록 메서드로 이벤트 등록하기
- DOM에서 제공하는 addEventListener() 메서드를 사용해 이벤트 등록 가능
- 세 가지 방법 중 가장 권장하는 방식
<노드>.addEventListener("<이벤트 타입>", <이벤트 함수>);
<button>클릭</button>
<script>
const btnE1 = document.querySelector("button");
btnE1.addEventListener("click", function(){
alert("click");
});
</script>
- ES6 개발환경이라면, 이벤트 함수에 화살표 함수도 사용 가능
<button>클릭</button>
<script>
const btnE1 = document.querySelector("button");
const clickEvent = () => {
alert("button Click");
}
btnE1.addEventListener("click", clickEvent);
</script>
※ 단, 함수 표현식으로 정의된 함수는 호이스팅에 의해 선언과 할당이 분리되므로,
참조하려는 함수가 addEventListener() 메서드보다 반드시 위에 작성되어야 함
'프론트엔드 > Javascript' 카테고리의 다른 글
| 스프링 부트로 JSON 다루기 - Jackson / GSON (0) | 2023.08.17 |
|---|---|
| JSON (2) (0) | 2023.08.17 |
| JSON (1) (0) | 2023.08.16 |
| JS - BOM / window 객체 (0) | 2023.08.16 |
| JS - 객체 / 표준 내장 객체 (0) | 2023.08.16 |