Javascript로 DOM 접근하기

 

 

따라란~~

오늘부터는 Javascript에서 Dom을 다루는 다양한 방법들을 정리해 보려고 합니다.

---

 

Javascript 에서 HTML 요소를 조작하기 위하여는 일단 접근을 해야합니다.

자주사용하는 방법을 공부해 봅시다~! ^^

모든 접근하는 명령어는 문서 하단의 MDN 사이트에서 참조하시면 됩니다.

 

<h1 id="h1" class="title">Hello DOM</h1>
<p>Nice to meet you~</p>

<h2 class="title">Hello JavaScript</h2>
<p>Good morning Everyone</p>

 

 

 

1. ID 명으로 접근하기

const h1 = document.getElementById('h1');

 

 

2. querySelector 로 접근하기

const title = document.querySelector('.title');

 

이경우 예제에서 클래스 'title'은 2개 이지만, 첫번째로 찾은 <h1>태그 하나만을 가져옵니다.

 

 

3. Tag 명으로 접근하기

const p = document.getElementsByTagName('p')
console.log(p)

 

결과 : Tag 명으로 접근시 모든 <p>태그를 HTML collection으로 가져오고 있는 것을 콘솔에서 볼수 있습니다~

 

 

4. querySelectorAll로 접근하기

const p = document.querySelectorAll('p');
console.log(p);

 

결과 : 문서에서 모든 <p>태그를 NodeList로 가져옵니다.

 

 

앗, 여기서 잠깐~!! HTML collection과 NodeLIst은 무엇일까요?

얼핏보면 Javascript의 Array(배열)이라고 생각할 수 있습니다. 

하지만 이 둘은 유사배열이라고 부릅니다.

Array와는 다르기 때문에 대부분의 Array Method 및 Property를 사용할 수 없습니다.

 

사용할 수 있는것은 index number를 사용하여 for문이나 forEach문을 사용할 수 있습니다.

그래서 유사배열이라고 부릅니다.

 

 

HTML Collection : 실시간으로 변동사항이 업데이트 됩니다.

NodeList : NodeList가 만들어진 상태의 값을 업데이트 하지 않습니다.

 

 

5. 폼요소에 접근하기(name 속성이용)

<form name="myForm">
	<input type="text" name="content" value="hello world">
    <button type="submit">Click</buton>
</form>

 

위의 코드에서 <form>이나 <input>요소에 접근하려면, 아이디나 태그 또는 querySelector를 이용하여도 되지만, name을 이용한 방법도 있습니다. 그방법을 소개할게요.

const fm = document.forms.myForm;
const input = fm.content;

console.log(input.value);

 

 

 

오늘도 열심히~!! 코딩은 익숙해지면 내것이 됩니다.

코딩은 매일하면 반드시 익숙해집니다~! 화이팅입니다. 

 

 

[ 참조로 보면 좋은 페이지들을 링크 해 놓았습니다. ]

 

Document 객체

Document - Web API | MDN

 

DOM 접근 메소드들 리스트 

Document.querySelector() - Web API | MDN