DOM은 HTML의 태그(요소)들을 웹 브라우저의 메모리에 올려서 자바스크립트로 사용하기 위해 만들어진 웹 문서입니다. 웹브라우저에서 HTML 파일을 받아 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];
요소에 접근하면 요소의 여러 가지 속성에 접근하여 변경할 수 있습니다.
속성 및 메서드 |
설명 |
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 속성 값을 따옴표로 감싸서 문자열의 형태로 대입해야 된다는 것입니다.
[JavaScript] 자바스크립트 this와 apply, call 함수 (0) | 2020.10.24 |
---|---|
[JavaScript] 자바스크립트 이벤트의 정의와 이벤트 등록 방법 (0) | 2020.10.24 |
[JavaScript] 자바스크립트 클로저의 의미와 사용하는 이유 (0) | 2020.10.22 |
[JavaScript] 자바스크립트 콜백(callback)함수란? (0) | 2020.10.12 |
[JavaScript] 자바스크립트 객체 생성 방법 (1) | 2020.10.09 |