jQuery DOM 조작

innerText 및 innerHTML 속성

HTML 구조

<div id="content"><b>box</b></div>

  <div class="content">테스트1</div>
  <div class="content">테스트2</div>
  <div class="content">테스트3</div>

  <button onclick="fnContentProp();">확인</button>

JavaScript 코드

• innerHTML 값 가져오기
  JavaScript:

  console.log(document.getElementById('content').innerHTML);
  

  jQuery

  console.log($('#content').html());
  

• innerHTML 값 수정하기
  JavaScript:

  const divList = document.getElementsByClassName('content'); // [div, div, div]
  for(let divEl of divList){
  divEl.innerHTML = '<b>javascript 방식으로 변경</b>';
  }

  jQuery

  $('.content').html('<b>jQuery 방식으로 변경</b>');

innerHTML 값을 매번 다르게 수정하기

• jQuery

  $('.content').html(function(index, html) {
    return '안녕하세요 ' + index;
  });

---

style 관련 속성

<h2>style 관련 속성</h2>

  <ul class="ott" style="background-color: lightblue;">
    <li id="netflix"><a href="#">넷플릭스</a></li>
    <li id="disney"><a href="#">디즈니플러스</a></li>
    <li id="tving"><a id="tving-link" href="#">티빙</a></li>
    <li id="wave"><a href="#">웨이브</a></li>
    <li id="coupang"><span>쿠팡플레이</span></li>
  </ul>

  <button onclick="fnStyleProp();">확인</button>

JavaScript 코드
CSS 값 가져오기

• JavaScript

console.log(document.querySelector('.ott').style.backgroundColor);

• jQuery

console.log($('.ott').css('backgroundColor'));

CSS 수정하기

• JavaScript

const aList = document.querySelectorAll('.ott a'); // [a, a, a, a]
for(let aEl of aList){
  aEl.style.textDecoration = 'none';
}

• jQuery

$('.ott a').css('fontSize', '32px')
           .css('fontWeight', '900')
           .css('color', 'red');
$('#coupang > span').css({
  backgroundColor: 'pink',
  color: 'green',
  fontSize: '32px'
});

---

value 속성

HTML 구조

아이디 : <input type="text" id="userId">
  <button onclick="fnValueProp();">확인</button>

JavaScript 코드

value 값 가져오기

• JavaScript

console.log(document.getElementById('userId').value);

• jQuery

console.log($('#userId').val());

value 값 수정하기

• JavaScript

document.getElementById('userId').value = 'javascript 방식';

• jQuery

$('#userId').val('jQuery 방식').css('color', 'red');

---

className 속성

HTML 구조

<style>
    .blind {
      display: none;
    }
  </style>

  <div id="hello">hello world</div>
  <button onclick="fnHide();">숨기기</button>
  <button onclick="fnShow();">보이기</button>
  <button onclick="fnToggle();">토글</button>

JavaScript 코드

• fnHide() : #hello에 blind 클래스 추가.

$('#hello').addClass('blind');

• fnShow() : #hello에서 blind 클래스 제거.

$('#hello').removeClass('blind');

• fnToggle() : #hello의 blind 클래스 토글.

$('#hello').toggleClass('blind');

---

HTML Attribute 관련 메소드

 <img src="../assets/image/forest1.jpg" width="192px" id="img-forest"> <br>
 <button onclick="fnAttribute();">확인</button>

JavaScript 코드

• Attribute 값 가져오기

console.log($('#img-forest').attr('src'));

• Attribute 값 수정하기

$('#img-forest').attr('src', '../assets/image/flower1.jpg')
                .attr('height', '150px')
                .css('border', '2px dashed pink');

• Attribute 삭제하기

$('#img-forest').removeAttr('width');