자바스크립트 - 요소 객체

• 01. 요소 메서드 : 선택자 : Document.querySelector() : 요소 선택자
• 02. 요소 메서드 : 선택자 : Document.querySelectorAll() : 모든 요소 선택자
• 03. 요소 메서드 : 선택자 : Document.getElementById() : 아이디 요소 선택자
• 04. 요소 메서드 : 선택자 : Document.getElementByClassName() : 클래스 요소 선택자
• 05. 요소 메서드 : 요소 : Document.createElement() : 요소 만들기

 

• 06. 요소 속성 : 선택자 : Element.firstElementChild : 첫 번째 자식 요소 선택자
• 07. 요소 속성 : 선택자 : Element.lastElementChild : 마지막 번째 자식 요소 선택자
• 08. 요소 속성 : 선택자 : Element.nextElementSibling : 형제 다음 요소 선택자
• 09. 요소 속성 : 선택자 : Element.previousElementSibling : 형제 이전 요소 선택자

 

• 10. 요소 속성 : Element.clientWidth : 요소의 가로값
• 11. 요소 속성 : Element.clientHeight : 요소의 세로값
• 12. 요소 속성 : Element.offsetwidth : 요소의 가로값
• 13. 요소 속성 : Element.offsetHeight : 요소의 세로값
• 14. 요소 메서드 : Element.getBoundingClientRect() : 요소의 정보값

 

• 15. 요소 메서드 : Node.cloneNode() : 요소 복사
• 16. 요소 메서드 : Node.appendChild() : 자식 요소 추가
• 17. 요소 메서드 : Node.insertBefore() : 요소 추가
• 18. 요소 메서드 : Node.removeChild() : 자식 요소 삭제
• 19. 요소 메서드 : Node.hasChild() : 자식 요소 존재 여부 확인
• 20. 요소 메서드 : Node.replaceChild() : 자식 요소 교체
• 21. 요소 속성 : Node.parentElement : 부모 요소 교체

 

• 22. 요소 메서드 : Element.insertAdjacentHTML() : 요소 추가
• 23. 요소 메서드 : Element.before() : 요소 앞에 추가
• 24. 요소 메서드 : Element.after() : 요소 뒤에 추가
• 25. 요소 메서드 : Element.remove() : 요소 삭제
• 26. 요소 메서드 : Element.replaceWith() : 요소 교체

 

• 27. 요소 메서드 : 클래스 : .classList.add() : 클래스 추가하기
• 28. 요소 메서드 : 클래스 : .classList.remove() : 클래스 삭제하기
• 29. 요소 메서드 : 클래스 : .classList.toggle() : 클래스 추가/삭제하기
• 30. 요소 메서드 : 클래스 : .classList.contains() : 클래스 존재 여부 확인하기

 

• 31. 요소 메서드 : 속성 : .setAttribute() : 요소 속성 설정하기
• 32. 요소 메서드 : 속성 : .getAttribute() : 요소 속성 가져오기
• 33. 요소 메서드 : 속성 : .hasAttribute() : 요소 속성 존재 여부 확인하기

 

• 34. 요소 메서드 : 텍스트 : .textContent() : 요소에 텍스트 설정하기
• 35. 요소 메서드 : 텍스트 : .innerText() : 요소에 텍스트 설정하기
• 36. 요소 메서드 : 텍스트 : .innerHTML() : 요소에 HTML 텍스트 설정하기
• 37. 요소 메서드 : 텍스트 : .outerHTML() : 요소에 HTML 텍스트 설정하기

요소 객체 참고 사이트 >>