querySelector 과 querySelectorAll 차이점.

querySelector은 Element를 가장 빨리 검색되는 하나만 반환.

querySelectorAll은 조건에 해당하는 Element를 배열형태로 전체반환.

---

자식찾기.

document.querySelectorAll(".list__item")[0].querySelectorAll(".list-sub__title")

이런식으로 .메소드를 이용해 querySelectorAll를 재사용해서 꼬리물기식으로 자식태그로 접근가능.

EX)

var q = document.querySelectorAll(".list__item")[0].innerText

--------------------------------------
input: q

result: "소개 자바 스크립트 소개 매뉴얼 및 사양 코드 에디터 개발자 콘솔"

//줄바꿈은 가독성문제로 제거.




var q = document.querySelectorAll(".list__item")[0].querySelectorAll(".list-sub__title")
-------------------------------------
input: q

result: "코드 에디터"

---

특정 속성찾기 Calss TagName Name 속성.

. Class접근

# id접근

그냥 이름 입력시 TagName 접근

Element 추가하기

let x = document.createElement("hr")

document.body.appendChile(x)


맨밑에 hr라인 생성.

Element 원하는 곳에 추가하기

insertBefore 메소드를 사용해서 인자 두개 삽입. 넣을값, 넣을 위치

EX) document.body.insertBefore(x, document.body.children[3])

Element 복제 및 삭제하기

---

복제

ex)

let x = hr.cloneNode();

document.body.insertBefore(x, document.body.children[4])

삭제

ex)

document.body.removeChile(x);

or

document.body.removeChile(document.body.children[3]);