[JavaScript] Element의 선택과 변경

Element를 선택하는 방법은
getElement 메소드를 사용해서 선택을 할 수 있습니다.
getElementBy~ 는 단일 Element를 선택하는 방법이고,
getElementsBy~ 는 다중 Element를 선택하는 방법입니다.
다중 Element를 찾는 방법에는 아래 5가지가 있습니다.

 

출처 - https://www.w3schools.com/js/js_htmldom_elements.asp

 

우선 id를 이용하여 단일 Element를 찾는 방법을 해보겠습니다.
getElement 메소드는 인자로써 태그의 id를 전달할 경우
해당 element가 반환이 되게 됩니다.

 

콘솔 창에서 getElementById를 이용하여 찾아보겠습니다.

처음에 document에 있는 poet이란 Id를 검색하였을때,
poet의 코드가 나오게 됩니다.
이것을 변수 x에 저장을 한 후, 안에 들어있는 Text를 검색하였을때,
' - 린위양 - ' 으로 저장되있는것을 확인할 수 있습니다.
이것을 변경할 때, x.innerText = (" ~~ ");로 변경이 가능합니다.
찾는 방법은 간단하죠?? 변경역시 간단하게 됩니다.
innerText가 아니라 innerHTML로도 사용이 가능합니다.
innerText는 (" ~~ ") 안에 있는 문자열을 강제로 텍스트로 인식하는 반면,
innerHTML(" ~~ ") 안에 있는 문자열은 텍스트로 인식하지 않습니다.
예를 들면,
x.innerHTML("<strong>이렇게 바꾸실수 있습니다.</strong>");
일경우에는 문자가 굵어지고, innerText를 쓸 경우엔
<strong> 태그 그대로 출력됩니다.

 

innerText,innerHTML 외에도, innerStyle등이 있습니다.
Element를 찾는건 간단합니다.

 

이제 다중 Elements를 선택해 보겠습니다.
여러개의 element를 선택하는 만큼 배열로 값을 반환하게 됩니다.

다중 Element를 찾을때 Tag name을 찾는경우는 직접 해보실수 있게 링크를 걸어 놓겠습니다.

https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_getelementsbytagname2

 

 

W3Schools online HTML editor

 

출처 - https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_getelementsbytagname2

 

여기서 var x 를 getElementsByTagName으로 정의합니다.
이후 demo라는 Id의 HTML을 ' ~ ' 안에 있는 문자열과 <p>태그의 0번째 배열값을 출력하게 됩니다.
위를 보시면 <p>태그 가장 첫번째 element는 Hello World!가 들어가있죠?
그래서 출력값은 Hello World!가 나오게 됩니다.

감사합니다.