DOM 1

DOM, Document Object Model

• DOM 구조도

기본 클릭 이벤트 작성

• window onload: css, dom, img이 모든 것이 로드되고 실행
• addEventListener: 이벤트 리스너 추가 함수

window.onload = function () {
  function 함수명() {
    document.getElementById("선택할 id명").style.color = "red";
  }

  document
    .getElementsByClassName("changeBtn0")[0]
    .addEventListener("click", 함수명);
};

스크립트에 css 적용

function el1() {
  document.getElementById("dom_div").style.color = "red";
}
function el2() {
  document.getElementsByTagName("div")[0].style = "border: 2px solid blue";
}

• style.css속성 = “css속성값”
• style(.cssText) = “css속성: css속성값”

---

DOM을 위한 JavaScript

DOM Selector

• css 선택자는 querySelctor~로, 나머지는 getElement~로

  document.getElementById(’아이디’)	아이디로 1개 선택
  document.getElementsByName(’이름’)	name 속성으로 여러개 선택
  document.getElementsByTagName(’태그명’)	html 태그로 여러개 선택
  document.getElementsByClassName(’클래스’)	class 속성으로 여러개 선택
  document.querySelector(’선택자’)	선택자로 1개 선택
  document.querySelectorAll(’선택자’)	선택자로 여러개 선택

• class 속성으로 여러개 선택 시, 특정 태그를 선택하려면?

  • 인덱스를 사용한다.

---

CreateElement

• document.createElement(”태그명”)
  • 스크립트에서, html 태그를 생성함

AppendChild

• 태그1.appendChild(태그2)
  • 스크립트에서, 생성된 태그(태그2)를 해당 요소(태그1)에 자식요소로 추가함.

속성 조작

• 없는 속성에 접근 시 사용!

  setAttribute(’속성명’, ‘속성값’)	속성 지정
  getAttribute(’속성명’)	속성 추출

글자 조작

• 글자 속성으로 문서 객체 내부에 있는 글자를 조작

  textContent	문서 객체 내부 글자 → 순수 텍스트 형식으로 가져옴
  innerHTML	문서 객체 내부 글자 → HTML 태그를 반영해서 가져옴
  innerText	문서 객체 내부 글자 → 문자열만 가져와서 태그로 반영함

---

노드 찾기

• 노드는 텍스트 노드(TextNode) + 태그 요소 노드(Element)가 있다.

• 예시: childNode 클래스의 다음과 같은 태그 계층 존재

  <div class="childNode">
    <ul>
      <li>첫번째 자식요소</li>
      <li><strong>두번째 자식요소</strong></li>
    </ul>
    <p>ul 형제 노드</p>
  </div>
  

• childNodes: 자식노드 모두를 반환
  
• children: 자식노드 중 태그요소만 반환
  
• parentNode: 부모노드를 반환
  
• parentNode.nodeName: 부모노드의 이름을 반환
  
• firstchild: 자식관계 중, 첫번째노드를 반환
• firstElementchild: 태그요소 중 첫번째노드를 반환
• lastchild: 자식관계 중, 마지막노드를 반환
• lastElementchild: 태그요소 중 마지막노드를 반환
• previousSibling: 형제관계 중, 이전노드를 반환
• previousElementSibling: 태그요소 중 이전노드를 반환
• nextSibling: 형제관계 중, 다음노드를 반환
• nextElementSibling: 태그요소 중 다음노드를 반환

---

insertBefore/hasAttribute/removeAttribute/createTextNode

• insertBefore(새로운 요소, 기준요소)
  • 새로운 요소를 기준요소 앞에 삽입
• hasAttribute(”속성명”)
  • 속성이 있는지, 없는지 결과 반환(true of false)
• removeAttribute(”속성명”)
  • 해당 속성을 제거
• createTextNode(”텍스트 내용”)
  • 해당 내용으로 텍스트 노드 생성

---

노드, 클래스 CRUD

• append(태그노드 or 텍스트노드 나열)
  • 생성된 노드를 요소가 끝나기전에 삽입, 여러개의 노드와 텍스트 추가
  • (,)로 여러 개를 나열해서 해당 계층 안에 노드 추가 가능
• remove()
  • DOM에서 요소 제거
  • 해당 태그 내부의 태그들을 삭제
• classList.add(”클래스명”)
  • classList의 클래스 추가
  • 해당 태그의 class 속성에 이름 추가
• classList.remove(”클래스명”)
  • classList의 클래스 삭제
  • 해당태그의 class 속성에 있는, 해당 클래스명 삭제
• classList.toggle(”클래스명”)
  • classList의 클래스 추가/삭제 (ON/OFF 형식)
  • 해당태그의 class 속성에 있으면 삭제, 없으면 추가
• classList.contains(”클래스명”)
  • classList의 있는 클래스 중에 true, false 반환
  • 해당태그의 class 속성에 있으면 true, 없으면 fasle 반환
• classList.replace(”기존 클래스명”, ”새로운 클래스명”)
  • classList의 클래스 변경
  • 해당 태그의 class 속성에 있는 이름 변경
• 노드명.cloneNode(true)
  • 노드의 복사본 생성, 복제본 반환

---