[자바스크립트 문법] DOM의 사용목적과 DOM의 문법

안녕하세요~ 저번 내용 이어서 DOM의 사용목적과 DOM의 문법들을 살펴보겠습니다. 우선 DOM에 대한 개념을 알고 학습하시는걸 권장드립니다. 

목차
1. DOM의 사용목적
2. DOM의 문법
2-1. DOM객체의 요소 선택 2가지 방법
2-2. getElementById( )
2-3. getElementById( ) 특징
2-4. getElementById( ) 사용 코드
2-5. querySelector( ) 
2-6. querySelector( ) 특징
2-7. querySelector( ) 사용 코드
3. 요소의 속성값 
3-1. 요소의 속성값 코드
3-2. 요소의 내용 추가
3-3. innerText 
3-4. innerHTML
3-5. 요소의 이벤트 속성 
3-6. onclick 이벤트 속성
3-7. onclcik 이벤트 속성 사용 코드

서론

DOM을 왜 사용하는지? 생각해보신적 있으신가요? 그리고 DOM을 어떻게 조작해야할까? 라는 궁금증도 생기게 됩니다. 이런 궁금증을 해결하기 위해 이번시간에는 DOM의 사용목적과 DOM에 대한 문법들을 살펴보면서 DOM을 조작하는 방법에 대해 접근할려고 합니다. 

 

본론

1. DOM의 사용목적

DOM의 사용목적은  HTML 문서의 요소들을 동적으로 조작하기 위해서 사용합니다.

 

2. DOM의 문법

 

2-1. DOM객체의  요소선택 2가지 방법

 

DOM 객체의 요소를 선택하는 방법은 2가지 방법으로 getElementById( ) 메서드와 querSelector( ) 메서드가 있습니다. 각각 요소를 선택하는 것의 공통점은 있지만 어떤 요소를 가져올 수 있는지에 대한 차이점이 있습니다. 그럼 두 개의 메서드를 활용해보도록 하겠습니다. 

 

 

2-2. getElementById( ) 

 

getElementById() :  요소의 아이디명으로 선택해서 요소를 할당한다. 

 

 

2-3. getElementById( ) 특징

getElementById( ) 는 "특정 ID를 가진 단일 요소를 선택" 한다는 특징이 있습니다. 

 

 

2-4. getElementById( ) 사용코드

const element = document.getElementById('box')


// element 이라는 곳에 html 요소에서 "box"요소를 할당
// element === <div id="box"></div>

// getElementById() 는 일반 요소에는 포함되어 있지 않다.
// getElementById() 는 id="box-01" 과 같은 하이픈으로 작성되어 있을 때 가독성을 높이기 위해 가져온다.
// id 요소는 메서드로 요소를 호출해도 되고
// html 문서상에 고유한 이름으로 사용하기 때문에
// javascript에서 동적으로 이름을 사용해서 접근할 수 있게 되어있다.

 

2-5. querySelector( ) 

 

querySelector( ) : 아이디뿐만 아니라 클래스 즉, 선택자의 내용을 작성해서 css 선택자 요소를 호출할 수 있다.

2-6. querySelector( ) 특징

querySelector( )는 getElementById( )와 다르게 CSS 선택자 요소를 다양하게 선택할 수 있습니다. 

 

 

2-7. querySelector( ) 사용 코드

// querySelector 아이디뿐만 아니라 클래스 즉, 선택자의 내용을 작성해서 css 선택자
// 요소를 호출할 수 있다.
// 선택자 이름으로 요소 호출
const element = document.querySelector('.box');

// 요소가 많을 경우
// 배열의 형태도 제공을 해준다.
// box 클래스를 가지고 있는 요소 유사 배열 node-list
const element2 = document.querySelectorAll('.box');

 

첫 번째 코드는 요소의 클래스가 "box"인 요소를 선택하여 element  변수에 할당하고, 두 번째 코드는 querySeletorAll( )메서드는 "조건에 맞는 모든 요소를 선택하여 NodeList로 반환" 하여 해당 요소들을 가져올 수 있습니다.

 

3. 요소의 속성값 

 

3-1. 요소의 속성값 코드

element.stlye.color = "blue";
// 인라인 스타일로 추가
element.style.backgroundColor = "blue";
// background-color === backgroundColor

 

인라인 스타일로 element 객체에 해당하는 스타일 속성을 할당하였습니다. 

3-2. 요소의 내용추가 

3-3 innerText

 innerText :  요소의 텍스트 콘텐츠만 가져오거나 변경합니다. 

 

3-4 innerHTML

 innerHTML  :  HTML 요소(태그)를 가져오거나 변경합니다. 

 

element.innerText // 글자의 내용을 작성할 때
element.innerHTML // HTML 요소의 내용 또는 글자를 작성할 때


// input과 img 요소 등은
// input 요소의 value type 등은 키로 접근이 가능하다
// img 태그도 마찬가지 
// 일반적인 요소가 아닌 특수한 요소들은 키로 값을 접근할 수 있다.

const content = document.querySelector(".content");
// content // value
// value라는 키를 가지고 값을 가져올 수 있다.

 

3-2. 이벤트 속성

3-6. onclick 이벤트 속성 

HTML 요소가 클릭될 때 실행되는 이벤트 속성입니다. 즉, 사용자가 해당 요소를 클릭했을 때 어떤 동작을 할지 정의할 수 있습니다.

 

 

3-7. onclcik 이벤트 속성 사용 코드

const element = document.querySelector(".cotent-btn");
// click 이벤트 속성
// onclick 이라는 속성으로 정의되어 있다.
// 함수의 값을 전달했는데 
// 기능을 바로 호출하는게 아니고 대기 시킨다


element.onclick = () => {
    console.log("이 내용은 요소를 클릭할때 호출한다");
} 
<button class="content-btn">누르세요</button>

결론

DOM의 사용목적과  getElementById()와 querySelector( )메서드를 통해 DOM에서  HTML 요소를 선택할 수 있다는 것을 알 수 있었고, innerText , innerHTML 를 사용하여 요소의 내요을 추가할 수 있습니다. 이벤트 속성중 하나인 onclick( ) 이벤트 속성을 사용하여 사용자가 해당 요소를 클릭할 때  동적인 효과를 부여할 수 있습니다.