자바스크립트 DOM 관련 함수
HTMLCollection과 NodeList 반환 객체와 다루는 방식 비교하기 |
자바스크립트에서 HTMLCollection과 NodeList는 DOM API에서 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체입니다. 둘 다 DOM 요소를 다룹니다. HTMLCollection과 NodeList의 공통점과 차이점에 대해 알아보겠습니다. |
---|---|
HTMLCollection HTML 요소만을 모아둔 객체 |
HTMLCollection은 자바스크립트로 HTML 문서의 요소를 선택하고 조작하는 중요한 개념입니다. HTMLCollection이 무엇인지, HTMLCollection을 다루는 방법, 그리고 특징을 소개합니다. |
getElementById() id 값으로 요소 찾기 |
getElementById() 함수는 HTML 문서 내에서 주어진 문자열과 값이 일치하는 id 속성을 가진 요소 객체를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. id 속성의 값은 HTML에서 고유하고 유일해야 하기 때문에 이 함수를 사용해서 요소를 빠르게 찾을 때 유용합니다. |
getElementsByTagName() 태그 이름과 일치하는 모든 요소 찾기 |
getElementsByTagName() 함수는 대소문자를 구분하지 않고 주어진 요소의 태그 이름에 해당하는 모든 요소를 HTMLCollection 객체로 반환합니다. 반환되는 HTMLCollection 객체를 순회해서 각 요소에 대해 특정 작업을 수행할 수 있습니다. |
getElementsByClassName() 클래스 이름과 일치하는 모든 요소 찾기 |
getElementsByClassName() 함수는 대소문자를 구분하여 주어진 요소의 클래스 이름에 해당하는 모든 요소를 HTMLCollection 객체로 반환합니다. 반환되는 HTMLCollection 객체를 순회해서 각 요소에 대해 특정 작업을 수행할 수 있습니다. |
NodeList HTML 요소 객체와 모든 노드를 모아둔 객체 |
NodeList는 자바스크립트로 HTML 문서의 요소 객체뿐만 아니라, 텍스트, 주석, 속성 등의 노드를 선택하고 조작하는 중요한 개념입니다. NodeList가 무엇인지, NodeList를 다루는 방법, 그리고 특징을 소개합니다. |
querySelector() CSS 선택자와 일치하는 첫 번째 요소 찾기 |
querySelector() 함수는 DOM 요소를 선택하는 메서드 중 하나로 HTML 문서나 parentNode 객체 내에서 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. 지정한 선택자와 일치하는 모든 요소의 목록이 필요한 경우 querySelectorAll() 함수를 대신 사용해야 합니다. |
querySelectorAll() CSS 선택자와 일치하는 모든 요소 찾기 |
querySelectorAll() 함수는 DOM 요소를 선택하는 메서드 중 하나로 HTML 문서나 parentNode 객체 내에서 지정한 CSS 선택자에 해당하는 모든 요소를 NodeList 객체의 목록으로 반환합니다. 이 목록의 요소는 순회를 통해서 다룰 수 있습니다. |
querySelector()와 querySelectorAll() 비교 반환 객체의 형태와 다루는 방식 비교하기 |
querySelector() 함수는 HTML 문서 내에서 지정한 CSS 선택자와 일치하는 첫 번째 요소만을 반환하지만, querySelectorAll() 함수는 일치하는 모든 요소를 반환한다는 큰 차이점이 있습니다. |
closest() CSS 선택자와 일치하는 가장 가까운 상위 요소 찾기 |
closest() 함수는 주어진 CSS 선택자와 일치하는 가장 가까운(closest) 상위 조상 요소를 찾아서 반환합니다. 이때, 해당 요소 자신도 검사 대상에 포함됩니다. 일치하는 요소가 없으면 null을 반환합니다. |
getAttribute() 요소에서 속성 값 가져오기 |
getAttribute() 함수는 DOM 요소에서 속성 값을 가져오는 함수입니다. 주어진 요소에서 속성이 존재할 경우, 그 속성의 값을 문자열로 반환합니다. 만약 속성의 값이 존재하지 않으면 빈 문자열을 반환하고, 해당 요소에서 일치하는 속성이 없다면 null을 반환합니다. |
setAttribute() 요소에 속성 값 설정이나 속성 추가하기 |
setAttribute() 함수는 DOM 요소에 속성 값을 설정하는 함수입니다. 속성이 이미 존재하는 경우 값이 업데이트됩니다. 그렇지 않으면 지정된 이름과 값으로 새 속성이 추가됩니다. |
removeAttribute() 요소에서 지정한 속성 제거하기 |
removeAttribute() 함수는 DOM 요소에서 매개변수로 지정하는 속성을 제거하는 함수입니다. 매개변수가 없으면 오류를 발생시키지만, 매개변수로 지정하는 속성이 요소에 없어도 오류 없이 아무 동작도 하지 않습니다. |
hasAttribute() 요소에 지정한 속성이 있는지 체크하기 |
hasAttribute() 함수는 DOM 요소에 지정한 속성이 있는지 체크하는 함수입니다. 해당 요소에 지정한 속성이 있으면 true를 반환하고, 없으면 false를 반환합니다. |
toggleAttribute() 요소에 부울 속성 추가/제거 상태 바꾸기 |
toggleAttribute() 함수는 DOM 요소에 지정한 부울 속성(boolean attribute)이 없으면 추가하고, 있으면 제거하는 함수입니다. 해당 속성을 추가할 경우에는 false를 반환하고, 제거할 경우에는 true를 반환합니다. |
classList 요소의 클래스 속성을 쉽게 다룰 수 있는 객체 |
classList는 DOM 요소의 클래스 속성을 쉽게 다룰 수 있는 객체입니다. 클래스 값의 추가, 제거, 확인 등을 다룰 수 있는 유용한 여러 메서드와 속성을 가지고 있습니다. |
classList.add() 요소에 클래스 값 추가하기 |
classList.add()는 DOM 요소에 주어진 클래스 속성 값을 추가합니다. 하나의 클래스 값만을 추가할 수도 있고, 여러 개의 클래스 값을 한 번에 추가할 수도 있습니다. 만약 해당 요소에 클래스 속성이 없으면 클래스 속성과 함께 값을 추가합니다. |
classList.remove() 요소에서 클래스 값 제거하기 |
classList.remove()는 DOM 요소에서 주어진 클래스 속성 값을 제거합니다. 하나의 클래스 값만을 제거할 수도 있고, 여러 개의 클래스 값을 한 번에 제거할 수도 있습니다. 제거하려는 클래스 값이 없을 경우에는 오류 없이 아무 동작도 하지 않습니다. |
classList.contains() 요소에 지정한 클래스 값이 있는지 체크하기 |
classList.contains()는 DOM 요소에 지정한 클래스 값이 있는지 체크합니다. 해당 요소에 지정한 클래스 값이 있으면 true를 반환하고, 없으면 false를 반환합니다. 주의할 점은 classList.contains()로 여러 개의 클래스 값을 한 번에 체크할 수 없습니다. |
classList.toggle() 요소에 클래스 값이 없으면 추가, 있으면 제거하기 |
classList.toggle()은 DOM 요소에 지정한 클래스 값이 없으면 추가하고, 있으면 제거합니다. 해당 클래스 값을 추가할 경우에는 true를 반환하고, 제거할 경우에는 false를 반환합니다. |