JavaScript DOM 접근 - JavaScript DOM jeobgeun

DOM이란?

 DOM은 HTML의태그(요소)들을웹브라우저의메모리에올려서자바스크립트로사용하기위해만들어진웹문서입니다. 웹브라우저에서 HTML 파일을받아 DOM으로만들면자바스크립트를통해여러가지조작이가능합니다.

DOM 접근메서드

 요소들을이용하기위해서는 아래와같은메서드로사용해특정태그에접근해야됩니다. 이메서드를이용해선택한요소를변수에대입하여사용할수 있습니다.

메서드	설명
document.getElementById("id명")	해당 id명을가진요소하나를반환합니다.
document.querySelector("선택자")	해당선택자를만족하는요소하나를반환합니다.
document.getElementsByClassName("class명")[순서]	해당 class명을가진요소들을배열에담아인덱스에맞는요소를반환합니다.
document.getElementsByTagName("태그명")[순서]	해당태그명을가진요소들을배열에담아인덱스에맞는요소를반환합니다.
document.querySelectorAll("선택자명")[순서]	해당선택자를만족하는모든요소들을배열에인덱스에맞는요소를반환합니다.

HTML 예시

<div> <button id="idname" class="classname">버튼</button> </div>

JavaScript

const button; button = document.getElementById("idname"); button = document.querySelector("#idname"); button = document.getElementsByClassName("classname")[0]; // 선택된 요소중 첫번째 요소 => 인덱스 0 button = document.getElementsByTagName("button")[0]; button = document.querySelectorAll(".classname")[0];

접근 메서드를 중첩하여 특정 요소 안에서 요소에 접근할 수도 있습니다.

const button = document.getElementsByClassName("div")[0] .getElementsByClassName("button")[0];

요소접근속성과 document.write 메서드

 요소에접근하면요소의여러가지속성에접근하여변경할수있습니다.

속성및메서드	설명
element.innerHTML	해당요소를다른 HTML요소로변경할수있는속성입니다.
element.style.property	해당요소에적용된 css속성의값을나타냅니다.
element.attribute	해당요소의속성을나타냅니다.
document.write()	인자로전달한내용을 DOM에그릴수있습니다.

 innerHTML과 document.write는기능을비슷하지만쓰이는곳이조금다릅니다.

innerHTML (Javascript)

div.innerHTML = "<button>버튼</button>";

div태그를 버튼 태그로 바꾸는 자바스크립트 코드입니다.

document.write() (HTML)

<div> <script> document.write("<button>버튼</button>); </script> </div>

script 태그가존재하는위치에버튼요소가나타나게됩니다.

요소에 접근하여 속성을 변경하는 예시입니다.

HTML

<form> <input type="password" name="input"/> </form>

CSS

input { display: block; background-color: red; width: 200px; height: 10px; }

Javascript

const input = document.querySelector("input"); input.style.display = "none"; input.style.width = "100px"; input.name = "output";

주의할 점은 css 속성 값을 따옴표로 감싸서 문자열의 형태로 대입해야 된다는 것입니다.