dom 3

[JavaScript] parentNode와 parentElement 차이점

parentNode와 parentElement 차이점 parentNode정의 모든 노드 타입의 부모를 반환합니다.반환 값부모 노드가 Document, DocumentFragment, Element 등의 타입일 수 있습니다.만약 부모가 없으면 null을 반환합니다.적용 대상모든 노드 (예: 요소 노드, 텍스트 노드, 주석 노드 등).parentElement정의부모가 Element일 경우에만 부모 요소를 반환합니다.반환 값부모 노드가 Element 타입일 때만 반환하고, 그렇지 않으면 null을 반환합니다.적용 대상주로 요소 노드에 사용됩니다. Click me button.parentNode와 button.parentElement 모두 요..

JavaScript/DOM 2024.07.27

[JavaScript] DOM 탐색 - 특정 요소 찾기

특정 요소 찾기 getElementById(): 주어진 ID를 가진 요소를 반환합니다.let element = document.getElementById('elementId');   getElementsByClassName(): 주어진 클래스 이름을 가진 모든 요소를 HTMLCollection으로 반환합니다.let elements = document.getElementsByClassName('className');   getElementsByTagName(): 주어진 태그 이름을 가진 모든 요소를 HTMLCollection으로 반환합니다.let elements = document.getElementsByTagName('tagName');   querySelector(): 주어진 CSS 셀렉터와 일치하는 ..

JavaScript/DOM 2024.07.27

[JavaScript] DOM 탐색 - 부모, 자식, 형제 노드 찾기

DOM(Document Object Model)은 웹 페이지의 구조를 프로그래밍적으로 접근하고조작할 수 있게 해주는 인터페이스입니다.  부모 노드 찾기 parentNode: 해당 요소의 부모 노드를 반환합니다.let parent = element.parentNode;   closest(): 지정한 셀렉터와 일치하는 가장 가까운 조상 요소를 반환합니다.let closestParent = element.closest('selector');  자식 노드 찾기 childNodes: 해당 요소의 모든 자식 노드를 NodeList로 반환합니다.let children = element.childNodes;   children: 해당 요소의 자식 요소만을 HTMLCollection으로 반환합니다.let childEle..

JavaScript/DOM 2024.07.27