javascript 에서 DOM 을 조작하는 방법

javascript 에서 DOM 을 조작하는 방법에 대해 알아보려고 한다.

 

DOM

먼저, DOM 이란?

문서 객체 모델(The Document Object Model) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM 은 nodes 와 objects 로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

자바스크립트에서는 HTML 에서의 값을 가져오거나 수정하는 방법으로 접근을 할 수 있다. 아래에서는 자바스크립트에서 DOM 요소에 접근하는 방법을 설명하려고 한다.

 

 

id 속성을 이용해서 DOM 요소 찾기

HTML 에서 id 는 유일한 값 이다. 따라서 이 id 로 찾게 되면 값 하나만 리턴하게 된다.

document.getElementById()

document.querySelector()

<div>
    <label for="userId">사용자 ID</label>
    <input type="text" name="" id="userId" class="form-control" />
</div>

<script>
    const userId = document.getElementById("userId");
    console.log(userId); //<input type="text" name="" id="userId" class="form-control" />

    const userId2 = document.querySelector("#userId");
    console.log(userId2); //<input type="text" name="" id="userId" class="form-control" />
    
    //작성한 값 가져오기
    console.log(document.querySelector("#userId").value);
</script>

 

 

태그명을 이용해서 DOM 요소 찾기

HTML 에서 태그는 여러 개가 가능하므로 배열로 리턴된다.

document.getElementsByTagName()

document.querySelectorAll()

<div>
    <label for="userId">사용자 ID</label>
    <input type="text" name="" id="userId" class="form-control" />
</div>

<script>
	const label = document.getElementsByTagName("label");
    console.log(label); //label 태그가 있는 html 요소를 배열로 리턴
    
    const label2 = document.querySelectorAll("label");
    console.log(label2); //label 태그가 있는 html 요소를 배열로 리턴
    
    //작성한 값 가져오기
    console.log(document.querySelectorAll("label").value);
</script>

 

 

클래스명을 이용해서 DOM 요소 찾기

HTML 에서 클래스명도 여러 개가 가능하므로 배열로 리턴된다.

document.getElementsByClassName()

document.querySelectorAll()

<div>
    <label for="userId">사용자 ID</label>
    <input type="text" name="" id="userId" class="form-control" />
</div>

<div>
    <label for="userPass">비밀번호</label>
    <input type="text" name="" id="userPass" class="form-control" />
</div>

<script>
    const classElement = document.getElementsByClassName("form-control");
    console.log(classElement); //해당 클래스명이 적힌 html 요소를 배열로 리턴
    
    const classElement2 = document.querySelectorAll("form-control");
    console.log(classElement2); //해당 클래스명이 적힌 html 요소를 배열로 리턴
    
    //작성한 값 가져오기
    console.log(document.querySelectorAll("form-control").value);
</script>

 

 

name 속성을 이용해서 DOM 요소 찾기

HTML 에서 name 속성도 여러 개가 가능하므로 배열로 리턴된다.

document.getElementsByName()

document.querySelectorAll()

 <div>
    <input type="checkbox" name="chk_lang" id="html" value="HTML" />
    <label for="html">HTML</label>
    <input type="checkbox" name="chk_lang" id="css" value="CSS" />
    <label for="css">CSS</label>
    <input type="checkbox" name="chk_lang" id="js" value="JS" />
    <label for="js">JS</label>
</div>

<script>
	const chkLangs = document.getElementsByName("chk_lang");
    let checkedValue = [];
    
    //체크된 값만 저장하고 싶다면
    for (const lang of chkLangs) {
    	if (lang.checked) {
        	checkedValue.push(lang.value);
        }
    }
    
    //querySelectorAll 을 이용
    const values = document.querySelectoAll("[name=chk_lang]");
    
    //querySelectorAll 을 이용해서 체크된 값만 저장하고 싶다면
    const checkedValue2 = document.querySelectoAll("[name=chk_lang]:checked");
</script>

 

 

 

참고

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

DOM 소개 - Web API | MDN