HTML DOM Methods and Properties - 2

박종한·2020년 3월 10일
0

DOM

목록 보기
3/12

HTML 요소 찾기

HTML 요소를 찾아주는 method는 지난시간에 getElementById("id명")이 있었죠.

사실 몇개가 더있습니다.

  • document.getElementsByTagName("태그명")
  • document.getElementsByClassName("클래스명")
    태그네임은 말 그대로 div, p, span 등을 입력하는 것이고, 클래스명은 각 요소들이 가지는 클래스명을 입력합니다.

주의할 점은 getElement도 아니고 getElements 입니다. 즉 복수라는 말입니다.

위 method의 결과값이 여러개가 될 수도 있다는 말입니다.

HTML 요소 바꾸기

element.innerHTML = 새로운 HTML 내용
태그안의 내용물을 바꿔줍니다.
element.attribute = new value
요소의 attribute를 바꿔줍니다.
element.style.property = new style
요소의 스타일을 바꿔줍니다.

element.setAttribute(attribute, value)
요소의 attributevalue로 설정해줍니다.

HTML 요소 추가/삭제

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 이벤트에 추가합니다.

HTML 객체 찾기

DOM level1, 3총 두 개가 있는데, 1은 구식이고, 3은 최근입니다.
1의 경우 잘 쓰이지 않는 것도 있긴 하지만, 그래도 처음에 만들어질 때가 당연히 필요한 핵심기능들이 많이 들어가 있기 때문에 둘다 알아둘 필요가 있습니다.

https://www.w3schools.com/js/js_htmldom_document.asp

위 링크를 참고하시면 될 것 같습니다.
document를 꼭 붙이시고, 이것저것 입력하시는 걸 잊지 말아주세요.

profile
코딩의 고수가 되고 싶은 종한이

0개의 댓글