HTML 요소를 찾아주는 method는 지난시간에 getElementById("id명")
이 있었죠.
사실 몇개가 더있습니다.
document.getElementsByTagName("태그명")
document.getElementsByClassName("클래스명")
주의할 점은 getElement도 아니고 getElements 입니다. 즉 복수라는 말입니다.
위 method의 결과값이 여러개가 될 수도 있다는 말입니다.
element.innerHTML = 새로운 HTML 내용
태그안의 내용물을 바꿔줍니다.
element.attribute = new value
요소의 attribute를 바꿔줍니다.
element.style.property = new style
요소의 스타일을 바꿔줍니다.
element.setAttribute(attribute, value)
요소의 attribute
를 value
로 설정해줍니다.
document.createElement(element)
새로운 HTML 요소를 생성합니다.
document.removeChild(element)
기존의 HTML 요소를 삭제합니다.
document.appendChild(element)
HTML 요소를 더해줍니다. create로 만들고, append를 통해 적용합니다.
document.replaceChild(new, old)
HTML 요소를 replace 해줍니다.
document.write(text)
HTML 아웃풋 스트림을 통해 출력합니다.
document.getElementById(id).onclick = function(){//code}
이벤트 핸들러 코드를 onclick 이벤트에 추가합니다.
DOM level1, 3총 두 개가 있는데, 1은 구식이고, 3은 최근입니다.
1의 경우 잘 쓰이지 않는 것도 있긴 하지만, 그래도 처음에 만들어질 때가 당연히 필요한 핵심기능들이 많이 들어가 있기 때문에 둘다 알아둘 필요가 있습니다.
https://www.w3schools.com/js/js_htmldom_document.asp
위 링크를 참고하시면 될 것 같습니다.
document
를 꼭 붙이시고, 이것저것 입력하시는 걸 잊지 말아주세요.