DOM 뿌시기

html 에서 javascript를 사용하여 자식과 부모를 찾아보자!

document.body.children : 자식 ele 찾는 방법!
node.parentElement : 자식 ele 에서 부모를 찾는 방법!

DOM 의 CRUD

CREATE, READ, UPDATE, DELETE

1. CREATE

• document.createElement('태그')
  : 태그가 생성이 되었지만 연결이 안된 상태이므로 화면에 출력되지 않는다

• Document.createDocumentFragment ()
  : 비어있는 돔 객체! 입맛대로 만들어 놓고 한번에 트리에 추가할수 있음

HTML

<ul id="ul"></ul>

Javascript

let element  = document.getElementById('ul'); // assuming ul exists
let fragment = document.createDocumentFragment();
let browsers = ['Firefox', 'Chrome', 'Opera', 'Safari', 'Internet Explorer'];

browsers.forEach(function(browser) {
    let li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);
});

element.appendChild(fragment);

2. READ

• document.querySelector()
  : 단일 조회

• document.querySelectorAll()
  : 다수 조회

• get 으로 시작하는 DOM 조회 메소드는 오래된 방식임. (이전 브라우저 호환할시 사용.)

이렇게 조회한 엘리먼트들은 '유사배열' 로 출력되며 for문을 사용할 수 있지만 모든 메서드를 공유하진 않는다.
예를 들어 forEach() 같은 경우

: (

function printArguments() {
  arguments.forEach(function(item) { 
  // TypeError: arguments.forEach is not a function 
    console.log(item);
  });
}

: )

function printArguments() {
  Array.prototype.forEach.call(arguments, function(item) {
    console.log(item);
  });
}

3. UPDATE

• element.textContent = 'text' : 태그 안에 글자 넣을수 있음
• element.id = 'idName' : id 이름 추가, 변경 할 수 있음
• element.classList.add('className') : class 이름 넣기
• element.setAttribute(name, value) : 지정요소(name)의 속성값을 설정. 요소가 없다면 새 요소가 추가됨. 속성의 현재 값을 얻으려면 getAttribute();속성을 제거하려면 removeAttribute()

**추가 공부사항

1. textContent와 innerHTML의 차이 (difference between textContent and innerHTML)
   innerHTML은 텍스트와 더불어 html 요소들을 가져와 수정할수 있지만
   textContent는 가져오는 값들은 전부 문자열임 그리고 XSS 공격의 위험이 없다.

2. innerHTML의 보안상 단점 (mdn innerHTML security issue)

• innerHTML 을 사용하게되면 해당 element 의 모든 하위 html 이 새로운 html 로 통째로 재생성 된다. 그래서, 본 element를 포함한 모든 자손 element 의 각종 속성(event 포함)이 사라지게 되는 것이다. (몇몇 브라우저에서는 메모리 누수가 발생)
  노드의 특정 위치에 필요한 엘리먼트 추가 할때 Element.insertAdjacentHTML() 사용할것

• 익스플로러에서 innerHTML속성을 이용해 script-injection 공격을 할 수 있다.
  외부에서 태그 수정을 하여 악성코드가 들어올수 있음 (XSS 공격에 취약하다.)

4. DELETE

• element.remove() : 해당 엘리먼트 삭제
• element.removeChild() : 자식 엘리먼트를 지정하여 삭제할 수 있다.

//모두 삭제하기 위해서, while문을 활용할 수 있다.(forEach, for...of)
//자식 엘리먼트가 하나도 없을 때 까지 삭제한다는 의미
const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

• innerHTML = "" : 가장 간단한 방법이지만, 보안상 문제로 사용안하는게 좋다.

document.querySelector('#container').innerHTML = '';

• textContent = ""

**추가 공부 사항

1. element와 node의 차이
   노드는 엘리먼트의 상위 개념이다. (노드 안에 엘리먼트가 포함되어 있음)

2. children과 childNodes의 차이
   children 는 자식 요소에 접근, childNodes는 자식 노드에 접근함.
   - children은 비 요소 노드가 제외된 HTMLCollection을 반환
   - childNodes은 비 요소 노드를 포함한 NodeList를 반환
   // 비 요소노드 : 줄바꿈, 주석 등..

3. removeChild와 remove의 차이

   • remove 는 노드를 메모리에서 삭제 후 종료
   • removeChild 는 삭제되는 것이 아니라, 부모-자식 관계를 끊어 DOM 트리 연결을 해제 하는것! 그래서 반환 값으로 해당 노드 값이 출력됨.
     removeChild 적용한 노드를 변수에 담아 이동시킬수 있다

4. 유사 배열에서 배열로 바꾸는 방법

Array.prototype.slice.call()

//유사 배열 객체나, 반복 가능한 객체를 얕게 복사해 새로운 Array 객체를 만드는 함수.
Array.from()

5. APPEND

• append : 부모 요소에 자식 요소를 추가 (자바스크립트 메소드)
• appendChild : 부모 요소에 자식 요소를 추가 (DOM 메소드)

append 와 appendChild 차이점

1. 추가 노드 갯수 다름!

• append 는 여러 개의 자식 요소를, appendChild 는 하나의 자식 요소만 추가함.

element.append(...node); 
element.appendChild(div); 

2. append 는 String 추가기능 도 지원해줌

element.append('hello');  // or 
element.append('hello', div);

3. 반환값

• append 는 없음 (undefined)
• appendChild 는 추가된 Node object 값을 반환

4. 호환

• append 익스플로러 미지원
• appendChild 익스플로러 지원

append 와 prepend 차이점

• prepend (앞에 붙음) ﹘ element ﹘ append (뒤에 붙음)

같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까?

html

<div class="a">
    <span></span>
</div>
<div class="b"></div>

js

const span = document.querySelector(‘span’); 
const divB = document.querySelector(‘.b’); 
divB.appendChild(span);

• 정답은? 복사 되지 않고 .a 에서 .b 로 '이동' 한다.
  기존 노드에 대한 참조 인 경우 현재 위치에서 새 위치로 이동
  (다른 노드에 추가하기 전에 부모 노드에서 노드를 제거 할 필요가 없음).