✔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 내용을 기반으로 정리하고 공부한 게시글입니다.