🌱Inflean🌱 DOM

---

 

 

❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤ 

GitHub - gayulz/StudyHistory: 나의 공부 기록 commit

 

 

---

 

 

 

전일 공부 정리 

html : 구조담당 , 정적페이지
Javascript : 기능사용

DOM = Document
브라우저가 HTML 문서를 파싱하는 과정에서 생겨나는 객체이다
dom 을 통해 제어하고 읽어오고 할 수 있다 ,
상호작용하는 기능이라고 하면 됨

 

 

Input TAG

입력된 데이터를 인식하고 찾아올 수 있다
document에 있는 Input 태그가 걸린 요소의 데이터를 가져와야 할때 사용할 수 있다

 

 

 

 

 

QuerySelector

DOM안에 데이터를 가져올때 해당 태그를 선택하는 메서드이다
사용법 : querySelector(“가져올 특성”)
가져올 특성이 id 일 경우 #id명 / 클래스일 경우 .클래스명

예제   

console.log(document.querySelector('#id명')); 
해당 id태그의 값을 가져온다. 다만 해당 html가져오기 때문에 값을 가져올 경우 .value를 써줘야한다  

console.log(document.querySelector('#id명')).value;

 

querySelector와 getElement는 다르다
두가지 모두 DOM 요소를 선택하는 메서드 이지만 다른점이 있다

1. querySelector
   선택자 활용가능, 다양한 선택자를 선택 가능하다,
   첫번째 일치하는 요소만 선택한다
2. getElemnetById
   id만 선택가능하며 특정 id에 최적화 되어있다
   (고유한 id 선택 가능)
   짧고 간결한 코드

class 를 선택 할 경우 : document.getElementsByClassName
name 을 선택 할 경우 : document.getElementsByName
tag 를 선택 할 경우 : document.getElementsByTagName

querySelector는 getElementBy보다 느리다 라고 한다
선능, 속도를 중요 시 할때엔 사용하지 않는 것이 좋다
다만 생산성이나 편리함은 querySelector가 더 우수할 수 있다
(상황에 맞춰서 사용하는 것임)

 

 

 

메서드

document.createElement(생성 원하는 태그)
append chile : 하위 속성으로 추가하는 의미
defer ?
개발공부중인 개린이의 포스팅 입니다📝