728x90
반응형
[JavaScript] 9. DOM(Document Object Model)
1. DOM의 개념
-브라우저에 띄울 웹 페이지가 정적 웹페이지라면 CSS+HTML로도 충분하지만, 그 이상의 인터랙티브한 기능을 구현하려면 DOM 개념을 이해해야 한다.
-DOM(Document Object Model)은 문서 객체 모델이라고도 이야기한다. 이는 웹페이지의 콘텐츠 및 구조를 구조화시켜 표현해, 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다.
=> 이는 자바스크립트 같은 스크립팅 언어가 쉽게 웹페이지에 접근해 조작할 수 있게끔, 연결시켜주는 역할을 한다.
*window 객체는 브라우저 창이나 프레임을 추상화한 것으로, DOM의 일부가 아니라.
*window 객체란?
-JS에서 브라우저 창을 나타내며, 모든 전역 변수와 메서드를 포함한다. 이는 브라우저 창의 속성과 메서드를 제공한다. 이는 웹페이지에서 사용할 수 있는 모든 전역 변수와 함수를 포함한다.
2. JS로 DOM 조작해보기
(1) DOM 생성 방식
-DOM 정적 생성: HTML 코드를 위에서부터 아래로 읽어내려가며 생성하는 과정
-DOM 동적 생성: 자바스크립트를 이용해, 있던 노드에 없는 노드를 만들어 이어 붙이는 과정
-Document node
-Element Node
-Attribute Node
-Text Node
* 이 네가지 노드가 존재함으로써 스크립팅 언어가 웹페이지에 접근하고 조작할 수 있게 된다.
3. DOM에 접근할 수 있는 5가지 방법
- getElementById(id): id를 기반으로 엘리먼트를 선택한다.
- getElementsByClassName(classname): 클래스 이름을 기반으로 모든 엘리먼트를 선택한다.
- getElementsByTagName(tagName): 태그 이름을 기반으로 모든 엘리먼트를 선택한다.
- querySelector(selector)
- querySelectorAll(selector)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>index11.html 파일 입니다.</h2>
<div id="myDiv">아이디로 접근</div>
<div class="myClass">클래스 이름으로 접근1</div>
<div class="myClass">클래스 이름으로 접근2</div>
<p>태그 이름으로 접근1</p>
<p>태그 이름으로 접근2</p>
<script>
// 1. 요소의 id 값으로 접근하기
let byMyDiv = document.getElementById("myDiv");
console.log(byMyDiv.textContent);
// 2. 요소의 class 속성을 사용해서 접근하기
let byClassNameElements=document.getElementsByClassName("myClass");
console.log(typeof byClassNameElements);
byClassNameElements[0].textContent="동적 렌더링 1";
byClassNameElements[1].textContent="동적 렌더링 2";
// 3. 요소 태그 이름으로 접근해보기
let byTagName=document.getElementsByTagName("p");
console.log(byTagName[1].textContent);
// 4. querySelector 사용해보기
// 제공된 CSS 선택자와 일치하는 문서 내의 첫번째 엘리먼트를 반환한다.
// 만약 일치하는 엘리먼트가 없다면 null 값을 반환한다.
let byQuerySelector=document.querySelector("myClass");
console.log("-------");
console.log(byQuerySelector);
// 5. querySelectorAll 사용해보기
// CSS 선택자와 일치하는 모든 엘리먼트를 NodeList로 반환한다.
let byQuerySelectorAll=document.querySelectorAll(".myClass");
console.log("--------------");
console.log(typeof byQuerySelectorAll);
console.log(byQuerySelectorAll);
byQuerySelectorAll[1].textContent="안녕 querySelectorAll";
byQuerySelectorAll[1].style.color="blue";
</script>
</body>
</html>
4. 코드 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>index9.html 파일 입니다.</h2>
<!--DOM 정적 생성-->
<script>
// div 요소를 생성해보자.(JS)
let div=document.createElement("div");
console.log(div);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>index9.html 파일 입니다.</h2>
<!--DOM 정적 생성-->
<script>
// div 요소를 생성해보자.(JS)
let div=document.createElement("div");
console.log(div);
document.body.append(div);
div.textContent="div 노드를 js를 통해 만들어보자";
div.style.backgroundColor="yellow";
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>index2.html 파일입니다.</h2>
<h1 id="title">Hello,world!</h1>
<button id="changeButton">Change Text</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>index2.html 파일입니다.</h2>
<h1 id="title">Hello,world!</h1>
<button id="changeButton">Change Text</button>
<script>
// 자바스크립트를 사용하여 DOM을 조작해보자.
// button 요소 id값인 changebutton 노트에 접근해보기
let changeBtn=document.getElementById("changeButton");
console.log(typeof changeBtn);
console.log(changeBtn);
// 이벤트 리스너를 등록해보자.
changeBtn.addEventListener("click",function(){
alert('1111');
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>index2.html 파일입니다.</h2>
<h1 id="title">Hello,world!</h1>
<button id="changeButton">Change Text</button>
<script>
// 자바스크립트를 사용하여 DOM을 조작해보자.
// button 요소 id값인 changebutton 노트에 접근해보기
let changeBtn=document.getElementById("changeButton");
console.log(typeof changeBtn);
console.log(changeBtn);
// 함수 표현식 - 함수를 변수 안에 저장하는 법
let clickEvent=function(){
alert('22222');
};
// 이벤트 리스너를 등록해보자.
changeBtn.addEventListener("click",clickEvent);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>index2.html 파일입니다.</h2>
<h1 id="title">Hello,world!</h1>
<button id="changeButton">Change Text</button>
<script>
// 자바스크립트를 사용하여 DOM을 조작해보자.
// button 요소 id값인 changebutton 노트에 접근해보기
let changeBtn=document.getElementById("changeButton");
console.log(typeof changeBtn);
console.log(changeBtn);
// 함수 표현식 - 함수를 변수 안에 저장하는 법
let clickEvent=function(){
let titleElement=document.getElementById("title");
titleElement.textContent="안녕 스크립트야!";
titleElement.style.color="red";
};
// 이벤트 리스너를 등록해보자.
changeBtn.addEventListener("click",clickEvent);
</script>
</body>
</html>728x90
반응형
'HTML,CSS, JS > JavaScript' 카테고리의 다른 글
| [JavaScript] 10. 자바스크립트의 이벤트 처리 (0) | 2024.07.24 |
|---|---|
| [JavaScript] 9-1. 예제 (0) | 2024.07.22 |
| [JavaScript] 8. 함수의 개념과 활용 (0) | 2024.07.19 |
| [JavaScript] 7. 배열의 개념과 사용 방법 (0) | 2024.07.19 |
| [JavaScript] 6. 객체의 종류와 생성 방법 (0) | 2024.07.19 |