DOM객체 요소 가져오기 1. getElementBy / 2. querySelector

< DOM 객체 > (Document Object Model)

DOM 트리
- HTML 구성요소들을 정리해보니, 나무모양이더라.
- 구성요소들을 태그 / 속성 / innerHTML 내용별로 이렇게 부르겠다.
1.요소노드 ( 태그 )
2.속성노드 ( 속성 )
3.텍스트노드 ( innerHTML )

DOM 방식은
-html 태그 형태를

HTML
<h1 id = " ", style = " ", > </h1>

=> JS 형태로 변환시켜

DOM
var h1 = {id : "xx", style : xx, }

let ele = document.getElementById.innerHTML;
DOM 객체로 요소를 가져와서 사용하는 방식을 말한다.


[ DOM객체로 요소가져오기 ]

[ getElement 4형제 ]

<input type="checkbox" id="hobby" class="userInfo" name="hobby" value="music">

1. getElementById("hobby");
:아이디로 가져오기
- id는 겹칠 수 없음. 단일 요소

2. getElementsByClassName("userinfo");
: class명으로 가져오기
- class는 여러개일 수 있으므로 배열타입으로 가져온다.

let class_array = document.getElementsByClassName("userinfo");

document.write(class_array[0] .value);
- [ ] 인덱스의 value를 뽑아야함 ( 배열 )
- input 같은거면 value 로 뽑고
h1, div, li 같은거면 innerHTML 로 뽑고

- 반복문으로 value 값 뽑아주기
for(let i = 0; i< class_array.length; i++){
document.write(class_array[i].value + "<br>"); }



3. getElementsByTagName("input");
:태그이름으로 가져오기 ( input / p / h1 / div 등등 )
- 해당 태그는 여러개일 수 있으므로, 배열타입으로 가져온다.
let input_array = document.getElementsByTagName("input");

alert(input_array[1].value);



4. getElementByName("hobby") 으로 가져오기
: name 값으로 가져오기

let hobby_array = document.getElementsByName("hobby");

- 되기는 하지만, 이렇게 가져오는 용도는 id 를 쓰는게 보통이다.

[ id / name ]
- id 는 css, DOM 등에서 getElementById 사용하기 위함
- name 은 form action URL 로 전송할 전역변수 명을 의미

=> URL 로

(name = hobby  / name = time )
test.jsp?hobby=coding&time=4
URL?변수명=입력값 & 변수명=입력값


이런식으로 넘겨주기 때문에,
이걸 java에서 Mapping 으로 받으면, 해당 DTO 전역변수 hobby(변수명), time(변수명) 등에
입력값(coding, 4 )이 들어가게 되는 것


- 보통 id 와 name은 동일하게 주고 사용한다.
즉, DTO 변수명이 먼저 정해지고,
그것에 맞춰 name 주고 (필수)
id는 헤깔림 방지용으로 똑같이 주고 사용




[ querySelector / querySelectorAll 만능듀오 ]
: 위의 getBy id / class / tagName 등의 기능을 다 할 수 있음

- 기호에 따라, getElement~ 쓰거나 querySelector/All 사용. ( 똑같은 기능 )

- getElementByXXX 와는 다르게, "어떤속성"으로 가져온다는 명시가 없기 때문에,
id : "# 아이디 "
class : " . 클래스이름"
TagName : "태그이름자체"

이렇게 구분하여 가져온다.


- id 같은 단일요소 가져오는건 Selector,
class 나 태그명같은 복수요소 가져오는건 SelectorAll 사용 (배열형식 반환)
( 복수요소에 Selector 사용하면 첫번 째값 1개만 가져온다 )

<input type="checkbox" id="hobby" class="userInfo" name="hobby" value="music">

1. id로 가져오기
let t1 = document.querySelector("#hobby");
: id 가 hobby인걸 가져와라
alert(t1.value);

2. class로 가져오기
let t2 = document.querySelectorAll(" . userinfo ");
: class 가 userinfo 인걸 모두 가져와라

-여러개반환되므로, 배열
for(let i = 0; i < t2.length; i++){
alert(t2[i].value);}

3. 태그이름으로 가져오기
let a = document.querySelector("input");
: input 태그인거 가져와라

( Selector => 첫번째거 1개만 가져옴 )

let c = document.querySelectorAll("input");
: SelectorAll => input태그인거 모두가져와라 ( 배열 )
for(let i = 0; i<c.length; i++){
alert(c[i].value);}


4. 태그에 속성조건 걸어서 가져오기
- CSS 문법 사용

let d = document.querySelectorAll(" input[class=userInfo] ");
for(let i = 0; i < d.length; i++){
alert(d[i].value); }

: input 태그인거중에 class가 userinfo인거 모두 가져와라


let d = document.querySelector("input[class=userInfo]:nth-child(3)");

: input 태그중에 class가 userInfo 인거 중에 3번째에 있는 태그 가져와라

( body 부터시작해서 카운트. h1 / div / input <= 3 번째 )



[ 요소 가져와서 사용하기 ] ( getElement와 동일 )

- innerHTML 로 넣으면 태그도 바로적용된다.
document.querySelector("h1").innerHTML = "제목바꾸기";
document.querySelector("div").innerHTML = "<h3>제목바꾸기</h3>";


- textContent 로 넣으면 태그 적용 안되고 텍스트내용에 그대로 출력.
//document.querySelector("h1").textContent = "제목바꾸기";
//document.querySelector("div").textContent= "<h3>제목바꾸기</h3>>";