[새싹x코딩온] 웹 개발자 부트캠프 과정 3주차 회고 | DOM js & jquery

1. DOM(Document Object Model) - 문서 객체 모델

 

이 DOM은 HTML 문서에 접근하기 위한 일종의 인터페이스로 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.

 

그림으로 설명해보자면 다음과 같이 html의 document를 이루는 요소들을 접근하는 방법이라고 할 수 있다.

 

2. DOM 명령어 사용

 

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

 const div1 = document.querySelector('#div1');

 

const div1 = $('#div1');

위와 같이 div1에 div1이라는 id를 가진 요소를 지정해 줄 수 있다. 줄1은 get ElementById를, 줄 2는 querySelector를 이용했다. querySelector는 CSS와 마찬가지로 클래스이면 . 을 아이디라면 #을 앞에 추가해 주어야 한다.

줄 3는 jquery로 작성한 것으로 위의 js에 비해 간결하게 보일 수 있는 것이 특징이다. 

 

1) text 삽입

  div1.innerText = '반갑습니다!';

 

  $('#div1').text('안녕히계세요~');

생성된 div1에 innerText로 내용을 적어주거나, jquery로 변경해줄 수 있다. 주의해야 할 것은 맨 위의 코드와 같이 요소를 '선택'해주는 과정이 있어야 한다는 것이다.

 

2) html 삽입

 const phtml = document.querySelector('.p-html');

 phtml.innerHTML = '<h3>javascript</h3>';

 

 $('.p-html').html('<h3>jquery</h3>');

혹은 위와 같이 innerHTML이나 html으로 tag를 이용할수도 있다.

 

3) style 지정(css 변경)

  div1.setAttribute('style', 'border: 2px solid red;');

 

  $('#div1').css('border', '2px dotted blue');

div 1에 setAttribute로 style을 지정해줄 수 있다. 

  document.querySelector('#hi').classList.add('fs-50');

혹은 classList의 명령어로 클래스를 미리 만들어두었다면 add, remove, contains, toggle 등을 추가해 이용해 줄 수도 있다. 

 

4) input

 const value = $('input').val();

 alert(value);

 

$('input').val('안뇽안뇽~');

만약 input 태그가 있다면,

입력된 값을 value에 저장하고(줄 1) 출력하거나(줄 2), 또는 값을 input에 직접 넣어줄 수도 있다.(줄 3)

 

5) 속성 변경

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

  a.setAttribute('href', 'https://www.naver.com/');

  a.href = 'https://www.naver.com/';

 

$('a').attr('href', 'https://www.daum.net');

a tag나 img tag의 속성을 바꿔서 연결된 링크를 변경하거나 그림을 바꿔줄 수도 있다.

 

그 외 여러가지 dom의 명령어(?)가 쓰인다.

 

3. javascript와 jquery 비교

 

jquery는 비록 지금 잘 쓰이지는 않지만, 안다면 코드를 효율적으로 줄일 수 있다.

html에 다음과 같은 요소가 있다고 하자.

<ul class="colors">

      <li class="orange">orange</li>

      <li class="green">green</li>

      <li class="navy">navy</li>

    </ul>

 

    <button type="button" onclick="appendJS();">js 바꾸기</button>

위의 list 에 'js 로 추가된 새로운 list 요소'라는 내용으로 리스트의 마지막에 새로운 list의 요소를 추가한다고 하자.

이 경우 append를 사용하면 된다. 또한 button과 onclick으로 클릭시 생성된다고 하자.

 

javascript로 쓰려면 다음과 같은 네 가지 단계를 거쳐야 한다. appendJS 함수 안에 다음 내용을 작성해준다.

  // 1. colors 클래스의 선택

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

  // 2. li 태그 요소를 생성

  const li = document.createElement('li');

  // 3. 생성된 li 태그에 텍스트 추가

  li.innerText = 'js로 추가된 새로운 list 요소';

  // 4. color 클래스의 요소에 "맨 마지막 자식"으로 li 요소 추가

  colors.append(li);

  $('.colors').append('<li>마지막 자식으로 추가된 jquery</li>');

반면 jquery로 쓴다면 위와 같은 한 줄로 작성할 수 있다.

 

---

DOM을 처음 배울 때는 충격 그 자체였는데, 쓰다보니까 익숙해졌다.(과연?) 명령어만 잘 외우면 쓸 수 있을 것 같은데, 막상 과제가 주어지면 매끄럽게 해내지는 못하는 것 같다. 배우기 전엔 jquery가 너무 어려워 보였는데 (과거 jquery 때문에 해내지 못한 것이 있었다) 공부해 보니 왜 그렇게 어려워 보였는지 모르겠다. IT 공부의 신기한 점이다. 내가 지금 추구하는 것이 혼자서도 서치 하며 기술을 익히고 적용할 수 있는 능력인데, 어디까지 해야 가능할지 지금은 잘 보이지는 않는다. 일단은 여기서 주어진 과제라도 잘 소화해보려 노력 중이다.