JavaScript 문서 객체 조작

문서 객체의 스타일 조작

• JavaScript에서 style 속성을 이용하여 문서 객체의 CSS의 속성을 제어할 수 있습니다.
• CSS에서 여러 단어로 이뤄진 속성은 - 로 구분되어 있었는데 (ex. font-size), JavaScript에서는 - (빼기로 인식) 를 사용하지 않고 다음 단어를 대문자로 사용하는 카멜표기법(Camel Case)으로 구분됩니다. (ex. fontSize)
• ['속성'] 대괄호를 사용하여 표기할 경우는 - 사용 가능합니다.

 

태그.style.속성='값';
태그.stlye['속성'] = '값';

//문서 객체의 스타일 조작
window.onload = function(){
  var header = document.getElementById('header');

  header.style.border='2px solid black';
  header.style.color='Orange';
  header.style.fontFamily='helvetica';
  header.style.backgroundColor='#0f0';
  header.style.fontSize='100px';
  header.style.width='600px'
  header.style['text-align']='center'; // [''] 사용 시 - 문자로 인식하여 사용가능
  header.style.borderRadius='10px';
  header.style.boxShadow='10px 10px 20px 5px rgba(0,0,0,0.2)';
}

<h1 id="header">Header01</h1>

 

---

문서 객체의 속성 조작

• JavaScript에서 객체의 속성을 제어할 수 있습니다.

태그.속성='값';
태그['속성']='값';

//문서 객체의 속성 조작
window.onload = function(){
  vmain_img.src = 'images/img1.jpg';
}

 

---

 

문서 객체의 제거 removeChild(child)

• HTML 부모요소가 객체화된 문서 객체 제거
• 부모 노드로 이동하여 부모 노드에서 자식 노드 삭제

document.body.removeChild(제거할 자식 객체);

//문서 객체 제거
window.onload = function(){
  var willRemove = document.getElementById('will_remove');
  document.body.removeChild(willRemove);
}

<h1>자바스크립트&제이쿼리</h1>
<p id="will_remove">자바스크립트로 동적인 웹 사이트를 구현해 보자.</p>