금융에 대한 모든 것

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 속성 값을 따옴표로 감싸서 문자열의 형태로 대입해야 된다는 것입니다.

 

 

  

 

 

 

 

 

 

 

 

 

반응형