DOM 조작 메서드 모음

document 조작 메서드 모음

• 엘리먼트 선택 :

  • document.querySelector(’선택자’)
  • document.querySelectorAll(’선택자’)
  • element.children ⇒ HTML Collection 이라는 유사배열로 반환 (Array 메서드 사용 불가 - forEach) , #text 도 html 태그 사이에 존재해서 얘도 같이 반환해줌
  • element.childNodes ⇒ #text는 제외하고 하고 배열 메서드도 사용 가능하다.
  • element.classList ⇒엘리먼트에 class 접근 (class의 배열형태로 나타냄)

• 엘리먼트 제거 : element.remove();

• 엘리먼트 조작 :

  • 내부 텍스트 조작: element.textContent = “”;

  • 엘리먼트 속성 접근 : element.classList ⇒ css 조작할때 유용함

  • 엘리먼트 속성 추가 : element.setAttribute(name, value)

    HTML 태그 내에 텍스트 값을 가져올때

    innerHTML, innerText,textContent, value 차이

  • input, form 요소의 값 ⇒ .value;

  • div, span 내의 요소 ⇒ .textContent

• innerHTML 은 자식의 HTML 요소까지 접근! ⇒ 조작할시 마크업태그까지 삽입이되어 XSS 공격 대상이 된다.

• innerText는 마크업 언어가 적용되어 ⇒ human-readable한 글자로 읽어옴 (display: none) 같은 속성을 지닌 태그의 텍스트는 읽어오지 않는다.

• textContent 는 마크업태그를 제외한 모든 문자열을 읽어옴!

InnerText는 렌더링을 진행하기때문에 매우 헤비한 메서드임!

주로 textContent의 사용을 권장한다!

Event 알게 된것

form 에 많이 쓰이는 이벤트들에게 미세한 차이가 있다.

• onkeyup : 이벤트 전달이 늦음! preventDefault로 이벤트 실행을 취소해도 문자 입력은 돌이킬수 없다. ⇒ keycode로 입력됨
• onkeydown : 이벤트 발생 후 문자가 입력되어 preventDefault를 할 시 문자입력을 막을 수 있음. ⇒ keycode로 입력됨
• onkeypress: 이벤트 발생 후 문자가 입력되어 preventDefault를 할 시 문자입력을 막을 수 있음 ⇒ ASCII 값으로 전달되어 shift, ctrl, backspace,tab등 키입력은 인식하지 못함.