Udemy section 12 (34일) - DOM 드릴링, 텍스트 노드 탐색, 쿼리, 쿼리 메서드

 

1. 콘솔창에서 직접 자바스크립트 코드를 작성할수 있다!

    실제 자바스크립트 창은 아니지만 크롬 개발도구에 의해서 출력되는 유틸리티 기능!

 

 

2. 노드!

모든 텍스트 내용도 노드로 저장됨!

 

 

 

3. 쿼리메서드! -> html에 내용이 추가되면 children의 내용이 변동될수도 있으니까  id를 줘버림!

   꼭 id여야함

 

document.getElementById('external-link');

-> 매서드이고 매개변수가 필요함!

 

let anchorElement = document.getElementById('external-link');
anchorElement.href = 'https://google.com';​

 

4. CSS SELECTOR를 선택!

   꼭 id이지 않아도, css 타입도 선택 가능 ex) a, ,,, p ... 

 

document.querySelector('#external-id');

 

let anchorElement = document.getElementById('external-link');
anchorElement.href = 'https://google.com';

anchorElement = document.querySelector(#external-id);
anchorElement.href = 'https://academind.com';

anchorElement = document.querySelector('a');  // 첫번째 요소를 선택함
anchorElement.href = 'https://academind.com';

anchorElement = document.querySelector('p a'); // 첫번째 요소를 선택함
anchorElement.href = 'https://academind.com';

anchorElement = document.querySelectorALL('p a'); // 전체를 선택함
anchorElement.href = 'https://academind.com';

 둘중 한가지를 사용하면 됨!

 

---> 이런 모든것들이 유틸리티 함수!

 

 

 

4.일반적인 쿼리 메서드 [34일차]

자바 스크립트를 통해 HTML 요소를 쿼리/선택할 때 일반적으로 사용되는 몇 가지 기본 제공 메서드가 있습니다.

● document.getElementById('some-id'): ID로 HTML 요소 선택(ID는 고유해야 하므로 하나의 요소만 선택)

● document.querySelector('<some-css-selector>'): 제공된 CSS 선택자에 의해 충족/선택된 첫 번째 일치(!) HTML 요소를 선택합니다. CSS 선택자는 기본적으로 모든 종류의 유효한 CSS 선택자(예: ID 선택자, 태그 유형 선택자, 클래스 선택자, 결합 선택자 등)일 수 있습니다.

● document.querySelectorAll('<some-css-selector>'): 제공된 CSS 선택자에 의해 충족/선택된 일치하는 모든 HTML 요소를 선택합니다.

덜 사용되는 선택 방법도 몇 가지 있습니다.

● document.getElementsByClassName('some-css-class'): 제공된 CSS 클래스가 있는 모든 HTML 요소를 선택합니다.

● document.getElementsByTagName('tag'): 제공된 HTML 태그 유형의 모든 HTML 요소를 선택합니다.

 

5.연습!

let newAnchorElement = document.createElement('a');

newAnchorElement.href = 'https://google.com';

newAnchorElement.textContent = 'This leads to Google'

let firstParagraph = document.querySelector('p');

firstParagraph.append(newAnchorElement);