Dom

개요 jQuery siblings 계열 메서드와 브라우저 DOM API에서 형제 노드를 탐색하는 방법 정리 jQuery는 요소 노드 기준으로 동작, DOM API의 일부 속성은 텍스트 노드를 포함하므로 차이 주의 핵심 개념 .siblings([selector]) 선택한 요소의 형제 요소 중 선택자에 일치하는 모든 요소 선택 .next() 바로 다음 형제 요소 선택 .nextAll([selector]) 다음에 위치한 형제 요소 모두 선택, 선택자 지정 시 필터링 .nextUntil(selector) 지정한 선택자에 해당하는 요소 바로 이전까지의 모든 다음 형제 요소 선택, 종료 요소는 미포함 .prev() 바로 이전 형제 요소 선택 .prevAll([selector]) 이전에 위치한 형제 요소 모두 선택, 선택자 지정 시 필터링 .prevUntil(selector) 지정한 선택자에 해당하는 요소 바로 다음까지의 모든 이전 형제 요소 선택, 종료 요소는 미포함 DOM 탐색 속성 ...

개요 HTML5의 data-* 속성은 마크업에 보이지 않는 커스텀 데이터를 담기 위한 전역 속성 UI와 스크립트 사이 값 전달, 기능 감지 플래그, 간단한 지역화 메타데이터 등에 유용 DOM에서는 element.dataset으로 접근해 읽기/쓰기 가능 핵심 개념 속성명 규칙: data- 접두사 + 소문자 케밥케이스 사용 접근 규칙: data-foo-bar → dataset.fooBar 로 매핑 값 타입: 문자열 저장, 필요 시 직접 직렬화/파싱 처리 필요 보안 유의: 민감정보나 토큰 저장 금지, 노출 전제 데이터만 저장 표준 속성과 역할 혼동 금지, 의미적 데이터는 적절한 속성이나 요소 사용 권장 ...

개념/배경 Unobtrusive JavaScript는 HTML 구조와 JS 동작을 분리하는 접근 철학 HTML은 의미와 콘텐츠, CSS는 표현, JS는 상호작용과 상태 제어 담당 인라인 스크립트와 이벤트 속성 제거, 외부 스크립트에서 안전하게 바인딩하는 방식 지향 핵심 목표는 접근성 보장, 점진적 향상, 유지보수성과 테스트 용이성 개선, 캐시 효율 상승, 보안 취약점 노출 감소 핵심 원칙 HTML은 의미 중심 마크업 유지 CSS는 표현만 담당 JS는 DOMContentLoaded 이후 동작 주입 인라인 onclick 등 이벤트 속성 사용 금지 기능 감지 우선, UA 스니핑 지양 데이터 훅은 data-* 속성 사용, 스타일 훅과 분리 JS 미동작 상황에서도 기본 기능 유지, 점진적 향상 고려 모듈 분리와 의존성 최소화 동작 방식 마크업은 링크와 폼이 기본 동작을 스스로 제공하도록 설계 JS는 존재하면 기본 동작을 확장하거나 향상 이벤트 바인딩은 외부 스크립트에서 선택자 기반으로 수행, 인라인 스크립트 제거 ...

window load는 js css 이미지 등 모든 리소스 로드 완료 시점 발생 document DOMContentLoaded는 초기 DOM 파싱 완료 시점 발생, 외부 리소스 비대기 UI 바인딩 초기화는 DOMContentLoaded 이미지 크기 등 전체 리소스 필요 계산은 load body onload window.onload에 매핑됨 마지막 할당만 유효 덮어쓰기 방지용 addEventListener 권장 참고자료 https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload