JS로 HTML 태그, 속성, CSS 까지 만들기

[ JS로 HTML 태그 속성 get set 하기 ]

<input type = checkbox id="hi" name="hobbit" value="study">

let qr = document.querySelector("input");


-속성값 set 하기
( hobbit 으로 잘못줬다. 다시 set 하자 )
qr.setAttribute("속성이름", "속성값");

qr.setAttribute( "name" , "hobby" );
: name 속성을 hobby 로 set
( 있었으면 오버라이딩하는거고, 없었으면 새로 만드는 것 )

-속성값 get 하기
alert(qr.getAttribute("name"));

: name 속성값 줘
=> hobby

alert(qr.name); ( 그냥 이거랑 같은기능 )
=> hobby

-속성값 있는지 확인하기
qr.hasAttribute("id");

=> true


-속성값 remove 하기
qr.removeAttribute("name");
alert(qr.getAttribute("name"));
=> null


[** JS에서 HTML 태그 생성하기 ]

1. 태그 생성 : createElement("태그이름")

let h3 = document.createElement("h3");

=> ( <h3> </h3>형태를 생성 )
=> 속성추가하고싶으면 h3.setAttribute( );


2. 텍스트노드 생성 : createTextNode("텍스트노드내용")

let h3text = document.createTextNode("안녕하세요");


3. 이어붙이기 : appendChild

- appendChild 라는건 자식을,부모 태그의 안으로 집어넣는다는 의미


<부모태그> </부모태그>

=> 부모.appendChild(자식);

<부모태그> <자식태그> </자식태그> </부모태그>


- 이렇게 집어넣어주는 기능

h3.appendChild(h3text);
- 자동으로 <h3> TextNode </h3> 이런 모양새로 붙여줌


4. 태그 넣을 위치 지정하기

- 1~3번은 만들어놓기만 한 것
=> HTML 에서 어느 위치에 놓을지 지정해줘야함

- HTML에 이미 존재하는 태그를 가져와서 거기에 붙임

- h3에는 h3text가 append 되어있는 상태
( h3 = h3 + h3text )

document.querySelector("div").appendChild(h3);
형태 : <div> <h3> text </h3> </div> =


=> JS 로 태그생성해서 HTML 에 뿌리기가 된 것
=> 이런 방식으로 append 를 이용해 태그를 만들 때, 거기에 JS로 이벤트를 걸어두면, 이벤트에 따라 동적으로 변하는 동적인 HTML 을 만들 수 있음!




[ appendChild 는 맨 밑에 붙인다 ]
- appendChild는 이미 존재하는 태그에 붙일 때, "가장 밑" 에 붙인다.

즉, 위에서 <div> 안에 < h1> <h2> 등이 먼저 있었다면,
새롭게 appendChild 한 <h3> 는 가장 밑에 붙인다.


- 이를 이용해서, 새롭게 만든 걸 붙이는 용도가 아니라,
원래 있는 태그를 이동시키기 용도로 사용할 수도 있다.

- 원래 있던 <h1> 태그를 "body" 에 appenChild 하면,
document.querySelector("body").appendChild(document.querySelector("h1"));

=> body태그의 맨 뒤로 "이동" 시킬 수 있는 것.

[ insertBefore 은 앞쪽에 붙인다 ]
부모노드.insertBefore( 붙일노드, 기준노드 );

document.querySelector("div").insertBefore(h3, document.querySelector("div").firstChild);
: 만들어둔 h3 변수를 div에 붙일건데, div의 가장 첫부분에 붙이겠다.


[ removeChild 자식태그 없애기 ] ( 먼저 부모노드를 찾아야함 )
- img 태그를 없애고 싶다 => 그 부모노드를 먼저 찾아라 => body 였다.
document.querySelector("body").removeChild(document.querySelector("img"));
: 부모노드 body 에서 img태그 찾아서 삭제


[ replaceChild ] ( 교체할 노드 , 원래 노드 );
=> 노드 위치 교환
document.querySelector("body").replaceChild(document.querySelector("h1") ,document.querySelector("img"));
: 부모 body에서 a, b 두 노드 위치 교환


---------------

(참고)예전방법
document.forms[0]
: form 태그중에 0번째 것
document.forms.input.hobby
이런식으로 사용도 있을 수 있다. (다소 불명확한 방법)

=> 태그에 id 로 걸고 사용하는게 가장 명확!
----------------


[ JS 에서 동적 CSS 주기 ]

- HTML 에서 style 로 CSS 주는건 정적인 고정값.

- **JS 에서 이벤트에 CSS 걸어두면 동적으로 변화하는 CSS 만들수 있음

(1) 이렇게 바로 줄수도 있고
document.querySelector("h1").style="color:yellow; width="500px;";

(2) 변수로 받아서 따로따로 줄 수 있다.
let h1 = document.querySelector("h1");
h1.style.color = "green";
h1.style.width = "500px";
h1.style.backgroundColor="pink"; // - JS에서는 하이픈이 없으므로 대문자로 인식
h1.style.borderColor = "yellow";
h1.style.borderWidth = "2px";
h1.style.borderStyle = "solid";


document.querySelector("#phone").addEventListener('keydown',
function(e){
document.querySelector("#output").innerHTML
= (e.key) + " = 적합 ";
document.querySelector("#output").style.color = "green";
}, false );

이런식으로, keydown, 마우스오버 등등 이벤트가 발생하면
CSS 속성이 바뀌게끔 설정해서 동적인 CSS 를 만들 수 있다.
( 아이디 생성할 때, 적절하면 초록색, 불가하면 빨간색으로 표시해주는 기능 )



즉, JavaScript 로 HTML 의 태그, 속성, CSS 등을 만들 수 있다는 건,

"그냥, 오 만들 수 있네 신기하다 ~ "

가 아니라 ,

JavaScript 의 이벤트를 걸어서
HTML 의 태그자체, 속성값, CSS 까지 모든걸 동적으로 만들 수 있다는 것이다.