[Javascript] DOM조작

woo·2022년 2월 17일
0

Javascript

목록 보기
2/8

✔1.DOM조작

Element란 태그들을 이용해서 만들어낸 웹페이지의 구성요소로 html에서 시작태그와 종료태그를 포함한 것이다.

1.1 Element 생성

  • .createElement()

    js로 새로운 노드 요소를 만들며 대신 다른태그에 append, appendChild로 실제 화면에 그려야지만 추가된다.
  • .createTextNode()

    선택한 요소에 새로운 텍스트 노드 요소를 추가할 수 있으며 .createElement()와 같이 바로 화면에 그려지는 것이 아니기에 append, appendChild로 실제 화면에 그려야한다.

1.2 Element 추가

  • .append()✨

    elemnet 노드, 텍스트 노드를 실제 화면에 그려주게 된다.

    // Element Node(요소)
    const span = document.createElement('span');
    const p = document.createElement('p');
    li.append(span, p); // 여러 개의 요소 추가
    
    // 문자열(DOMString)
    span.append('hello');
    => <span>hello</span>
    
    // 요소 + 문자열
    p.append('${value}: ${name} 입니다', document.createElement('br'));

    여러개의 자식요소에 추가가 가능하기에 .appendChild() 보다 널리 사용된다.

  • .appendChild()

    이미 생성되어있는 element 요소에만 추가가 가능하며, 선택한 요소의 자식 노드 리스트중 가장 마지막 자식으로 추가되어 한번에 하나의 노드만 추가가 가능하다.

  • prepend()

    ParentNode의 첫번째 자식으로 Node 객체 또는 DOMString 객체를 삽입한다.

  • after()

    선택한 Element 뒤에 새 Element를 추가

  • before()

    선택한 Element 앞에 새 Element를 추가

1.3 Element 수정

  • textContent

    태그 내부의 값을 얻거나 수정, 추가할 때 사용되는 node의 속성 중 하나다. 무조건 문자열로 출력하기에 빈값은 undefinded가 아니라 “ ”이 출력하며 css,js를 무시하고 텍스트 노드 그래도 출력한다.
  • innerText

    불필요한 공백을 제거하고 텍스트로 반환하여 textContent는 쓰여진 그대로 가져온다면, innerText는 사람이 읽을 수 있는 요소만 처리하여 공백 등을 처리한다.
  • value

    input, select, textarea 과 같이 입력태그안에 있는 값을 선택하기 위해서는 value를 사용한다.
  • innerHTML

    텍스트 노드와 동시에 요소 노드를 다룬다
  • setAttribute

    지정된 요소의 속성 값을 설정
    const target7 = document.querySelector('.url')
    let naver = document.createElement('a') // 1
    naver.setAttribute('href', 'https://www.naver.com') // 2
    naver.textContent = '네이버 링크'
    target7.append(naver) // 3
    a태그 속성인 herf에 값을 넣을 때 사용
    또한 다양한 메서드를 가지고 있다.
    // .add - 클래스 삽입
    // .remove - 클래스 제거
    // .contains - 클래스 존재 여부 체크
    // .toggle - 클래스 존재 여부 체크 후 없으면 삽입 있으면 제거

1.4 Element 삭제

  • remove()

    노드를 메모리에서 삭제하고 종료한다.
  • removeChild()

    remove() 처럼 노드를 메모리에서 삭제 하는 것이 아니라 해당 노드는 그대로 존재하며, 부모 노드와의 부모-자식관계를 끊어 DOM 트리에서 해제하는 것. 최종적으로는 관계를 끊은 해당 노드의 참조를 반환하기에 반환값을 다른 DOM에 붙일 수 있다. 만약 저장하지 않으면 잠시후 메모리에서 삭제된다.

➕ 피로그래밍 세션에서 들은 javascript 내용을 기반으로 정리하고 공부한 게시글입니다.

profile
🌱 매일 성장하는 개발자

0개의 댓글