자바스크립트 문서 객체 가져오기 getElementBy~~~

자바스크립트에서 HTML 문서 객체 가져오기

 

자바스크립트에서 HTML 문서 객체 가져오는 방법은 getElementBy ~~~을 사용하는 방법이 있습니다. 

 

이 예시로는 

.getElementById(), .getElementsByName(), .getElementsByTagName(), .getElementsByClassName()

등이 있습니다. 

 

하나씩 살펴보겠습니다. 

 

1. HTML 태그 속성중 id를 기준으로 가져오기 

id를 기준으로 가져오는 방법은 .getElementById()을 사용하면 됩니다. 

<div id="text1">내용이 들어갈 곳입니다!</div>

 

<script>

var text1 = document.getElementById('text1'); //id를 기준으로 문서 객체 가져오기

 

text1.innerHTML = "내용이 들어갔어요!"; //innerHTML을 통해 내용을 변경했다. 

 

</script>

 

2. HTML 태그 속성중 이름 (name)를 기준으로 가져오기 

이름을 기준으로 가져오려면 .getElementsByName()을 사용하면 됩니다. 

 

<div name="text_box"></div>

 

var textBox = document.getElementByName('text_box'); //name을 기준으로 문서 객체 가져오기

 

 

 

3. HTML 태그 속성중 태그명 (tag name)를 기준으로 가져오기 

태그명을 기준으로 가져오려면 .getElementsByTagName() 을 사용하면 됩니다!

 

<h2>안녕하세요! 아는게힘 입니다!</h2>

 

var title = document.getElementByTagName('h2'); //태그명을 기준으로 문서 객체 가져오기

 

 

4. HTML 태그 속성중 클래스(class)를 기준으로 가져오기

클래스를 기준으로 가져오려면 .getElementsByClassName()을 사용하면 됩니다. 

 

<div class="text_box">여기 글씨가 들어가요!</div>

 

var textBox= document.getElementByClassName('text_box'); //class를 기준으로 문서 객체 가져오기