200811_TIL

Today I learned

• html / css
• twittler 목업 구현
• validation 유효성 검사 작업 마무리
• DOM

[html]

• HTML의 구조가 자바스크립트 객체의 구조와 같이 트리 구조로 되어 있다.

• DOM을 활용하면 HTML을 조작할 수 있다.

• 트리구조

  트리 구조(tree 構造, 문화어: 나무구조)란 그래프의 일종으로, 여러 노드가 한 노드를 가리킬 수 없는 구조

• Node - Element 관계

• document 객체
• window 객체

[Dom]

• document.createElement

  let element = document.createElement(tagName[, options]);

• document.importNode()
  현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해줍니다.
  

var node = document.importNode(externalNode, deep);

• document.querySelectorAll('div')

  elementList = parentNode.querySelectorAll(selectors);

• document.getElementsByTagName('div')
  var elements = document.getElementsByTagName(name);
  루트 노드를 포함해 전체 다큐먼트를 대상으로 검색
  

• ParentNode.prepend()
  ParentNode.prepend(...nodesToPrepend);

  ParentNode.prepend() 메소드는 Node 객체 또는DOMString 객체를 ParentNode의 첫 자식노드 앞에 삽입한다.

• Node.appendChild()
  메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다.

• Node.insertBefore()
  var insertedNode = parentNode.insertBefore(newNode, referenceNode);
  referenceNode는 옵션값이 아니다, null 혹은 node값을 명시해줘야한다 (코드 삽입의 기준점)
  메소드는 참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입합니다. 만약 주어진 자식 노드가 document에 존재하는 노드를 참조한다면, insertBefore() 가 자식 노드를 현재 위치에서 새로운 위치로 옮깁니다.

• ChildNode.remove()

  node.remove();

• Node.removeChild()

  node.removeChild(child);

• Node.textContent()

• Nede.innerHTML()

• Node.appendText()
  

• innerHTML 과 textContent 차이

  • textContent

    textContent의 값은 식별자 노드의 내부 콘텐츠를 text/plain 으로 파싱(Parsing)한 결과

  • innerHTMl 단점

    • 얼핏보면 같은 속성같지만, text/html로 파싱을 다시한다.
    • 이벤트 관련 수동으로 하나씩 연결해야 한다.
    • XSS 어택에 약하다.

• element의 id, innerHTML 은 속성, 메소드가 아니다

• 동시에 같은 onclick 이벤트 객체에 동시에 할당했을 때.

  마지막에 할당한 것만 실행되지만

• addEventListener에 동시에 할당할 때는 무한대로 추가된다.

• event-flow

• onclick과 addEventListener의 차이, 우선순위
  onclick은 예전 문법

• Node

  div태그 안의 하나하나 복잡 다단하게 노드로 나눠지는 것.

  ELEMENT_NODE

  Node는 엘리먼트를 포함하는 더 넓은 개념

  

[Comment]

@@ 오늘은 새로운 페어분과 트위터 목업구현을 함께 했다. html, css는 다(?) 안다고 생각했는데 몇개월 안해서 기억이 약간 가물한 것도 있고 해서 역시나 다시금 새기는 마음으로 진행했다.

validation도 오늘 마무리를 해서 깃허브 TIL 레포지토리에 담아뒀다. DOM에 대해서 오늘 내일, 모레까지 DOM 에 대해 진행되는데 DOM 조작 메소드 뿐 아니라 용어, 개념을 이해로 많이 연구해봐야 할 것 같다.

오히려 조작 메소드는 jquery 등으로 다뤄봐서 낯설지 않은데, node나 document, window 객체 이런 쪽은 좀 더 낯설다.