Document.querySelector()

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector

공식문서 : 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element 를 반환합니다. 일치하는 요소가 없으면 null 을 반환합니다.

• 문서 내 첫번째 Element를 반환한다고 하는데 이미지태그가 5개면 제일 첫번째 위치한 이미지태그만 리턴을 한다.

• 예전에는 getelementbyid를 통해서 노드를 가져왔었는데.

• 이렇게 하면 getelementbyclass, getelementbyid, getelementbytag 등으로 나뉘어져서 번거롭다.

• 지금은 querySelector 을 이용해서 ‘ ’ 는 태그 .클래스 #아이디 이렇게 하나사용으로 노드를 가져올 수 있다.

var el = document.querySelector("div.user-panel.main input[name=login]");

• 또한 이미지태그가 아무리 여러개 있어도 저렇게 속성값을 디테일하게 설정해주면 저 이미지 태그만 찾아간다.

1-2) 자바스크립트로 노드 추가하기

Node.appendChild()
https://developer.mozilla.org/ko/docs/Web/API/Node/appendChild

Node.append()
https://developer.mozilla.org/en-US/docs/Web/API/Element/append

• Node.append()
  • 메서드는 [Node](https://developer.mozilla.org/en-US/docs/Web/API/Node)의 마지막 자식 뒤에 Node 또는 문자열 개체를 삽입합니다
  • 한번에 여러 개의 자식 요소를 설정할 수 있습니다.
  • 반환 값이 없다.

   ```
  <--여러개 추가-->

  const div = document.createElement('div');
  const span = document.createElement('span');
  const li= document.createElement('li');

  document.body.append(div, 'hello', span, li);
  
  <--문자열 추가-->

let div = document.createElement("div")
div.append("Some text")

console.log(div.textContent) // "Some text"
  
	```

• Node.appendChild()
  • 오로지 Node 객체만 자식 요소로 추가할 수 있다 (문자요소를 추가할때도 문자노드를 생성한 후 추가해야 함 )
  • 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다.
  • Node.appendChild()추가된 [Node](https://developer.mozilla.org/en-US/docs/Web/API/Node)개체를 반환합니다.

var p = document.createElement("p");
document.body.appendChild(p);

복습

• Selector를 이용해서 DOM의 요소들을 받아 올 수 있다
• DOM 요소는 node이고 node는 Element 이고 Element 는 createElement를 이용해서 만들 수 있다.