(study)Javascript - DOM Script

HTML

<!-- 제 7장 HTML과의 연계: DOM 스크립트 -->

<!-- func1 -->
<button id="btnFunc1" type="button">func1(팝업창 출력)</button>
<br><br>

<div id="func2">
  <button id="btnFunc2-1" type="button">func2-1</button>
  <button id="btnFunc2-2" type="button">func2-3</button>
  <div id="textFunc2"></div>
</div>
<br><br>

<button id="btnFunc3" type="button">
  <span>func3 - 부모 자식노드</span>
</button>
<br><br>

<div id="func4">
  <input id="inpFunc4" type="text" value="기본 값">
  <button id="btnFunc4" type="button">func4 - 속성변경</button>
</div>
<br><br>

<div id="func5">
  <button id="btnFunc5-1" type="button">func5-1 자식 노드 삽입(append)</button>
  /
  <button id="btnFunc5-2" type="button">func5-2 자식 노드 삽입(insertBefore)</button>
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
<br><br>

<div id="func6">
  <input id="inpFunc6" type="text" placeholder="내용을 입력해 주세요">
  <button id="btnFunc6" type="button">func6 내용 물 바꿔치기(innerHTML)</button>
  <p id="textFunc6">
    내용이 음슴미다
  </p>
</div>
<br><br>

<div id="func7">
  <button id="btnFunc7" type="button">func7 innerHTML 사용 최소화</button>
  <p id="textFunc7"></p>
</div>
<br><br>

<div id="func8">
  <button id="btnFunc8" type="button">func8 자식 노드 삭제</button>
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
<br><br>

<div id="func9">
  <button id="btnFunc9" type="button">func9 자식 노드 교체(1 -> 20)</button>
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
<br><br>

JavaScript

// func1(예제7-1)
function func1() {
  // 팝업 윈도우 설정 window.open(url, name, properties);
  var popWin = window.open('', 'popwin', 'width=400, height=300');
  // 팝업 윈도우의 document를 변수에 할당
  var popDoc = popWin.document;

  // 팝업 윈도우의 document를 open
  popDoc.open();
  // 팝업 윈도우의 document내에 내용 추가
  popDoc.write('<html><head><title>popup</title></head>');
  popDoc.write('<body bgcolor="gold">');
  popDoc.write('<p align="center"><b>팝업 창 입니다.</b></p>');
  popDoc.write('</body></html>');
  // 팝업 윈도우의 document를 close
  popDoc.close();
}
// event bind
document.getElementById('btnFunc1').addEventListener('click', func1);


// func2(예제 7-7)
var func2 = {
  createTag1: function () {
    // 엘리먼트 생성
    var element = document.createElement('div');
    // 속성(어트리뷰트) style 생성
    var attribute = document.createAttribute('style');
    // 속성 값 선언
    attribute.nodeValue = 'background:#eee;width:100px;height:100px;';
    // 엘리먼트에 속성 적용
    element.setAttributeNode(attribute);
    // 엘리먼트를 body 하위에 추가
    document.getElementById('textFunc2').appendChild(element);
  },
  createTag2: function () {
    // 엘리먼트 생성
    var element = document.createElement('div');
    // 속성 선언 및 적용(createTag1와 사용 방법 비교)
    element.setAttribute('style', 'background:#aaa;width:100px;height:100px;');
    // 엘리먼트를 body하위에 추가
    document.getElementById('textFunc2').appendChild(element);
  }
};
// event bind
document.getElementById('btnFunc2-1').addEventListener('click', func2.createTag1);
document.getElementById('btnFunc2-2').addEventListener('click', func2.createTag2);


// func3
document.getElementById('btnFunc3').addEventListener('click', function () {
  var parent = this.parentNode;
  var child = this.childNodes;
  console.log('[parent Node]');
  console.log(parent);
  console.log('[child Nodes]');
  console.log(child);
});


// func4
document.getElementById('btnFunc4').addEventListener('click', function () {
  var inp = document.getElementById('inpFunc4');
  console.log('변경 전 type 속성은...