html5 문법 (1) DOM

(1) DOM  

DOM이란?

DOM은 Document Object Model의 약자로, 자바스크립트에서는 문서도 객체로 이뤄져 있다. 문서 객체 모델들을 선택하고, 값을 얻거나 수정하는 방식이 프론트 프로그래밍이라 할 수 있다. 웹 프로그래밍에서 '프론트'라 함은 곧, 브라우저 객체 모델(BOM), 문서 객체 모델(DOM)을 얼마나 잘 다룰 수 있느냐에 달려 있다.

DOM에서는 '노드 선택' , '값 취득' , '이동 및 변경' , '이벤트 연결'이 중요하다. 먼저, DOM을 조작하려면, '선택'을 할 수 있어야 한다. DOM을 선택하는 방법은 크게 4가지로 접근할 수 있다.

getElementById	태그에 ID값을 < id = '이름지정' > 식으로, 지정하고 ID값을 받아올 수 있는 명령어
getElementsByClassName	태그의 class값을 < class = '클래스명' >으로 지정하고 class값을 받아올 수 있는 명령어
getElementsByName	태그이름 자체를 받아올 수 있으며, input과 select 태그에서는 getElementsByName으로 name 속성값을 받아오는 명령어
querySelector	querySelector( '#list' )와 같이 CSS문법으로 값을 받거나 노드를 선택할 수 있는 명령어

1 『getElementById』

가장 빠르고, 확실한 노드 선택방법으로, 선택하려는 태그에 id값을 부여한다.

---

[예제]

<div id='first'>

</div>

<script>

var div1 = document.getElementById('first');

div1.innerHTML += '<p>첫번째</p>' ;

</script>

// 결과 :  첫번째 

---

<div>태그에 first라는 id값을 부여하고, div1 변수에 document.getElementById 명령어로 div를 선택했다. div1.innerHTML 명령어로 <p>태그값을 넣으면, id값이 first인 <div>태그에 <p>내용</p>값이 들어간다.

2 『getElementsByClassName』

id와 사용방법이 같으며, class의 이름을 선택하는 부분에 차이가 있다.

---

[예제]

<ul>

<li><a href='www.mogl3d.com' id='first' class='mogl'>첫번째</a></li>

<li><a href='www.naver.com' id='second' class='mogl'>두번째</a></li>

<li>세번째</li>

</ul>

<script>

var div1 = document.getElementsByClassName('mogl');

console.log(div1.length);

for(var i=0; i<div1.length; i++){

console.log(div1.item(i).id);

};

</script>

---

class값을 mogl로 두고, div1 변수에 mogl 클래스를 불러온다. (배열로 저장)

mogl 클래스가 2개 있기 때문에, div1에는 배열로 저장된다. 따라서 for 루프구문으로 class를 하나씩 불러온다.

"div1.item(i).속성값"으로 해당 태그에 들어있는 속성값을 알 수 있다. 여기서 class는 같은 이름이 여러태그에 적용될 수 있기에 주로 배열이 저장된다. getElementsBy..... 와 같은 이름으로 선택해야 하는 경우는 '배열'로 저장된다. 따라서 getAttribute( ), setAttribute( ), removeAttribute( ) 와 같은 속성 매소드를 사용하려면, item(i) 매서드나 div1[i] 를 사용해야 한다.

3 『getElementsByTagNames』

---

[예시]

<form>

<input type="text" size='50' name="btn" value="" >

</form>

<script>

var btn_ = document.getElementsByName('btn');

var current = new Date();

btn_[0].value = current.toString();

</script>

---

위의 코드는 input 태그의 value값에 표준시간을 넣는 예제이다. btn 변수에 getElementsByName으로 name이 'btn'인 노드를 선택했다. 

여기서 주의할 점은 Elements(복수형)로 끝나는 요소일 경우 배열이기 때문에 반드시 [ ] 또는 item( )를 받은 변수의 뒤에 붙여서 값을 넣어줘야 한다. 가끔 배열임을 생각하지 못하고, 그냥 변수명과 프로퍼티를 넣을 경우에는 에러가 발생하기 때문에 이점 주의하자. (getElementsByClassName일 경우에는 예외)

4 『querySelectorAll 』

위의 3가지 메소드와 달리 좀더 디테일하게 노드를 선택할 수 있는 명령어가 querySelector이다. querySelector / querySelectorAll 를 사용한다면, 태그 아래의 부분도 쉽게 선택할 수 있다. 가령, id='myList'인 태그 아래의 class='art'라는 img태그를 검색하고 싶다면, ` #myList img.art `라고 검색하면 된다.  

*	모든 요소 취득	[예시]  *
#id	지정한 ID요소를 취득	[예시] #list
.class	지정한 클래스명의 요소를 취득	[예시] .myclass
elem	지정한 태그명의 요소를 취득	li
selector1 , selector2 , selectorX	해당하는 셀렉터에 일치하는 요소를 모두 취득	#list, div
parent > child	부모 요소의 자식 요소를 취득	#list > div
조상 -> 자손	상위 요소에서 하위 요소를 모두 취득	#list li
prev + next	prev 요소의 전후의 next요소를 모두 취득	#myDiv + div
prev ~ siblings	prev 요소 이후의 형제 요소를 취득	#myDiv ~ div
[attr]	지정한 속성을 가진 요소를 취득	input[type]
[attr = value]	속성이 value값과 동등한 요소를 취득	input[type="button"]
[attr ^=value]	속성이 value로 시작하는 값을 지닌 요소를 취득	a[href^="https://"]
[attr $=value]	속성이 value로 끝나는 값을 지닌 요소를 취득	img[src$=".gif"]
[attr *= value]	속성이 value를 포함하는 값을 지닌 요소를 취득	[title*="sample"]
[selector1] [selector2] [selectorX]	복수의 속성 필터 모두에 매치하는 요소를 취득	img[src][alt]

---

[예시]

<ul id='me'>

<li><a href="http://www.naver.com" class="my">Node.JS</a></li>

<li><a href="http://www.daum.com" class="my">Node.JS</a></li>

<li><a href="http://www.modl3d.com" class="my">Node.JS</a></li>

</ul>

<script type="text/javascript">

var my_ = document.querySelectorAll('#me .my');

for(var i=0; i<my_.length; i++){

console.log(my_.item(i).href);

}

</script>

---

// 결과 : http://www.naver.com

            http://www.daum.net

            http://www.mgl3d.com

단, querySelector 메소드는 document.getElementById에 비해 속도가 느리다.