The seventh week : DOM에 대해 알아가기

 

1. 9월 3일DOM, 프론트엔드 개발 과정 Part 2

<THE DOM IS...>

DOM : Document Object Memory 

 :  HTML 문서의 구조적 관계와 속성에 대한 모델
   HTML 문서를 대표하는 트리구조
   JavaScript에서  document 객체를 통해 전역으로 접근할 수 있음

   JavaScript를 이용햇 엘리먼트의 속성을 얻어내거나, 변경하는 방법

부모 : body
자식 : span

tagName : 'DIV'
id :  'practice'
classList ['highlight', 'red'],
textContent : '여기 엘리먼트가 하나 있습니다 자식도...',
parentElement : body,
children : [
{
 tagName : 'SPAN'
 textContent : '자식도 있습니다'
},
{
tagName : 'SPAN'
textContent: '자식도 여럿 있습니다'
}
]
}

! DOM은 JS가 아니다. DOM구조 접근을 그저 JS를 이용해서 접근할 뿐이다.

<예시>

let newElement = document.createElement('LI')

newElement.textContent =content;

let ul = document.querySelector

: 제공한 CSS 선택자를 만족하는 첫 번째 Element 객체. 결과가 없다면 null.

 선택자를 만족하는 모든 요소의 목록이 필요하다면 querySelectorAll()을 대신 사용하세요.

 

2. 9월 5일

: 사실 이때 참여를 하긴 했는데, 따로 필기를 하진 않았다.  CSS부분은 이미 알고 있는 것들이라,  무난히 들을 수 있었던 시간이었다.

 

* ParentNode.prepend() 

:메소드는 Node 객체 또는DOMString 객체를 ParentNode의 첫 자식노드 앞에 삽입한다. DOMString 객체는 Text 노드와 동일하게 삽입된다.

: 가장 최근 입력된 것이 위로 오도록 할 때 사용하는 메소드

 

 

3. WCC 온라인 밋업

 

: 급하게 하느라 대본도 준비 못하고 횡설수설ㅠㅠ 카페도 갑자기 시끄러워져서 조금 당황했다.  그래도 국비지원 프로그램과의 차이에 대해서 알려줄 수 있어서 다행이었다. 여러모로 같은 장학생들에게 좋은 정보가 되었으면 하는 바람이었는데  작작 떨고 제대로 대답해라 예지야ㅠ 담에 면대면으로는 열심히 참여해야지..

그리고 생각외로 다양한 연령대, 직업군에 종사하는 사람들이 많았던 것 같았다. 여성 개발자로 나아가는 그날까지! 홧팅!!