HTML DOM의 scrollHeight 속성은 HTML 문서 내 특정 요소의 전체 높이를 픽셀(px) 단위로 반환합니다. 여기서 말하는 전체 높이란 화면에 실제로 보이는 영역뿐만 아니라 스크롤로 인해 가려진 부분까지 포함한 콘텐츠 + 패딩(padding)의 총합을 의미합니다. 구문(Syntax) scrollHeight 속성의 기본 사용 구문은 다음과 같습니다. element.scrollHeight 예제 아래 예제는 scrollHeight 속성을 활용하여 문단(p) 요소의 전체 높이와 너비를 확인하는 방법을 보여줍니다. <!D
DOM scrollWidth 속성은 HTML 문서에서 요소의 전체 너비를 픽셀(px) 단위로 반환합니다. 여기서 말하는 전체 너비는 화면에 실제로 보이는 영역뿐만 아니라 오버플로우(overflow)로 인해 스크롤 뒤에 숨겨진 콘텐츠 영역까지 포함하며, 콘텐츠(content)와 안쪽 여백(padding)을 합산한 값입니다.scrollWidth 속성의 주요 특징요소의 내용이 넘칠 경우, 보이지 않는 영역까지 포함한 전체 너비를 반환합니다.padding은 포함되지만 border(테두리)와 margin(바깥 여백)은 제외됩니다.반환값은 반
HTML 문서에서 DOM scrollLeft 속성은 요소의 콘텐츠가 수평(가로) 방향으로 스크롤된 픽셀 값을 반환하거나 수정할 때 사용합니다. 이 속성을 활용하면 자바스크립트만으로 요소의 가로 스크롤 위치를 확인하거나 원하는 지점으로 이동시킬 수 있습니다.문법(Syntax)scrollLeft 속성의 기본 문법은 다음과 같습니다.1. scrollLeft 값 가져오기element.scrollLeft2. scrollLeft 값 설정하기element.scrollLeft = value여기서 value는 픽셀(px) 단위의 숫자 값입니다.예제
HTML DOM의 scrollTop 속성은 HTML 문서에서 특정 요소의 콘텐츠가 세로 방향으로 스크롤된 거리(픽셀 단위)를 반환하거나 설정하는 데 사용됩니다. 이 속성을 활용하면 스크롤 위치를 실시간으로 확인하거나, 원하는 지점으로 스크롤을 이동시키는 등 다양한 인터랙션을 구현할 수 있습니다.scrollTop 속성이란?scrollTop 속성은 요소 내부 콘텐츠가 위쪽 경계에서부터 얼마나 스크롤되었는지를 픽셀 값으로 나타냅니다. 읽기 전용이 아니므로 값을 직접 할당하여 스크롤 위치를 프로그래밍 방식으로 제어할 수도 있습니다.구문(S
HTML DOM PopStateEvent 객체는 브라우저의 세션 히스토리(session history)가 변경될 때 발생하는 popstate 이벤트를 처리하는 이벤트 핸들러입니다. 사용자가 브라우저의 뒤로 가기·앞으로 가기 버튼을 누르거나, JavaScript에서 history.back(), history.forward(), history.go() 메서드가 실행되어 히스토리 탐색이 일어날 때 popstate 이벤트가 트리거됩니다. 참고로 history.pushState()나 history.replaceState() 메서드 호출 자체
DOM의 previousSibling 속성은 HTML 문서에서 지정된 노드와 같은 트리 레벨(형제 관계)에 있는 바로 앞의 노드를 반환합니다. 즉, 특정 요소를 기준으로 그 앞에 위치한 형제 노드에 접근할 때 사용됩니다.문법(Syntax)previousSibling 속성의 기본 문법은 다음과 같습니다.node.previousSibling예제(Example)아래 예제는 previousSibling 속성을 활용하여 목록 항목의 이전 형제 노드를 가져오는 방법을 보여줍니다.<!DOCTYPE html> <html> &
HTML DOM의 previousElementSibling 속성은 HTML 문서에서 지정된 요소와 같은 트리 수준(부모가 동일한)에 있는 바로 앞의 형제 요소(element)를 반환합니다. 텍스트 노드나 주석 노드는 무시하고 오직 요소 노드만을 기준으로 이전 형제를 찾는다는 점이 특징입니다.문법(Syntax)previousElementSibling 속성의 기본 문법은 다음과 같습니다.node.previousElementSibling반환값은 해당 요소의 이전 형제 요소 객체이며, 만약 이전 형제 요소가 존재하지 않으면 null을 반환
removeChild() 메서드란?HTML DOM의 removeChild() 메서드는 지정한 부모 노드에서 특정 자식 노드를 삭제하고, 삭제된 노드를 반환하는 메서드입니다. 웹 페이지에서 동적으로 요소를 제거해야 할 때 가장 많이 사용되는 기본 DOM 조작 API 중 하나입니다.이 메서드는 노드를 단순히 화면에서 숨기는 것이 아니라 DOM 트리에서 실제로 분리하며, 반환값을 변수에 저장하면 나중에 다른 위치에 다시 삽입하는 것도 가능합니다.문법(Syntax)removeChild() 메서드의 기본 문법은 다음과 같습니다.node.re
HTML DOM의 Pre 객체는 HTML 문서 내의 <pre> 요소를 자바스크립트에서 표현하고 제어할 수 있도록 해주는 객체입니다. <pre> 태그는 preformatted(미리 서식이 지정된)의 약자로, 코드 블록처럼 공백과 줄바꿈을 그대로 유지해야 하는 텍스트를 화면에 표시할 때 사용됩니다.Pre 객체 생성하기기본 문법자바스크립트에서 Pre 객체를 새로 만들려면 createElement() 메서드를 사용합니다. 기본 문법은 다음과 같습니다.document.createElement(PRE);이 코드는 새로운
HTML DOM의 scripts 컬렉션은 HTML 문서 안에 포함된 모든 <script> 요소를 하나의 컬렉션으로 반환합니다. 이 컬렉션을 활용하면 문서 내 스크립트 태그의 개수를 확인하거나, 특정 인덱스 또는 id에 해당하는 스크립트 요소에 접근할 수 있습니다.문법(Syntax)scripts 컬렉션의 기본 문법은 다음과 같습니다.document.scriptsscripts 객체의 속성(Property)속성설명lengthHTML 문서 내 컬렉션에 포함된 <script> 요소의 개수를 반환합니다.scripts 객체
HTML DOM의 removeAttribute() 메서드는 HTML 문서 내 지정한 요소에서, 매개변수로 전달된 이름과 일치하는 속성(attribute)을 제거합니다. 예를 들어 인라인 스타일이나 클래스, ID 같은 속성을 자바스크립트만으로 동적으로 삭제할 수 있어, UI 상태를 변경할 때 유용하게 활용됩니다.구문(Syntax)removeAttribute() 메서드의 기본 구문은 다음과 같습니다.node.removeAttribute(attributeName);매개변수: attributeName에는 제거하고자 하는 속성의 이름을 문자
HTML DOM의 removeAttributeNode() 메서드는 HTML 문서에서 지정된 요소로부터 매개변수에 명시한 속성 노드를 제거하고, 제거된 속성을 Attr 노드 객체 형태로 반환합니다. 문법 removeAttributeNode() 메서드의 기본 문법은 다음과 같습니다. node.removeAttributeNode(attributeNode); 매개변수 설명 attributeNode: 제거하려는 속성 노드입니다. 보통 getAttributeNode() 메서드로 먼저 가져온 Attr 객체를 인자로 전달합니다. 예제 다음 예
DOM의 setAttributeNode() 메서드는 HTML 문서에서 특정 요소에 매개변수로 전달된 속성(Attribute) 노드를 설정하고, 그 결과를 Attr 노드 객체 형태로 반환합니다. 일반적인 setAttribute() 메서드와 달리, 이 메서드는 createAttribute()로 미리 생성한 속성 노드를 그대로 요소에 부착할 때 유용하게 사용됩니다.문법(Syntax)setAttributeNode() 메서드의 기본 문법은 다음과 같습니다.node.setAttributeNode(attributeNode);attributeNo
HTML 문서에서 DOM의 setNamedItem() 메서드는 매개변수로 전달된 노드를 해당 노드의 이름(name)을 기준으로 속성 노드로 설정합니다. 쉽게 말해, 새로 생성한 속성 노드를 특정 요소의 속성 컬렉션(NamedNodeMap)에 추가하거나, 같은 이름의 기존 속성이 있을 경우 이를 대체하는 역할을 합니다.문법setNamedItem() 메서드의 기본 문법은 다음과 같습니다.node.setNamedItem(node);매개변수로는 추가하려는 속성 노드 하나를 받으며, 만약 동일한 이름의 속성이 이미 존재하여 교체가 일어났다면
DOM Script 객체는 HTML 문서 내의 <script> 요소를 나타내는 객체입니다. 이 객체를 활용하면 자바스크립트만으로 <script> 태그에 접근하거나, 새로운 스크립트 요소를 동적으로 생성하고 조작할 수 있습니다. Script 객체 생성하기 문법 다음은 Script 객체를 생성하는 기본 문법입니다. document.createElement(SCRIPT); document.createElement() 메서드에 SCRIPT를 인자로 전달하면 새로운 <script> 요소가 메모리에 생성되
HTML DOM의 Parameter 객체는 HTML 문서 내 <param> 요소를 나타내는 객체입니다. <param> 요소는 주로 <object> 요소와 함께 사용되며, 임베드된 콘텐츠(예: 오디오, 비디오, 플러그인)에 실행 시 필요한 매개변수를 전달하는 역할을 합니다.Parameter 객체 생성하기문법JavaScript로 <param> 요소를 동적으로 생성하려면 다음과 같은 문법을 사용합니다.document.createElement(PARAM);Parameter 객체의 주요 속성Para
HTML DOM의 defaultSelected 속성은 HTML 문서 내 option 요소가 처음 작성될 때 selected 속성으로 지정되어 있었는지 여부를 불리언(Boolean) 값으로 반환합니다.이 속성은 사용자가 드롭다운 목록에서 선택을 변경한 이후에도, 페이지 로드 시점에 기본값으로 설정되어 있던 옵션이 무엇이었는지 확인할 수 있게 해줍니다. 기본 선택 옵션이라면 true, 아니라면 false를 반환합니다.구문(Syntax)defaultSelected 속성의 기본 구문은 다음과 같습니다.object.defaultSelecte
DOM의 option label 속성은 HTML 문서 내 <option> 요소의 label 속성값을 읽어오거나 수정할 때 사용하는 속성입니다. 드롭다운 목록에서 각 옵션에 표시되는 레이블을 자바스크립트로 동적으로 제어할 수 있습니다.문법(Syntax)1. label 값 가져오기object.label2. label 값 변경하기object.label = text예제(Example)다음 예제는 option label 속성을 활용하는 방법을 보여줍니다. 드롭다운에서 과목을 선택한 뒤 버튼을 클릭하면 해당 옵션의 label 값을
HTML DOM의 option value 속성은 드롭다운 목록(<select>) 안에 있는 옵션의 값을 가져오거나 수정할 때 사용됩니다. 여기서 말하는 값이란 폼이 제출될 때 서버로 전송되는 실제 데이터를 의미하며, 화면에 보이는 텍스트(레이블)와는 별개로 관리됩니다.문법(Syntax)option value 속성의 기본적인 사용 문법은 다음과 같습니다.값 반환하기object.value값 수정하기object.value = text예제아래는 HTML DOM option value 속성을 활용한 실전 예제입니다. 드롭다운 목록
HTML DOM Progress max 속성이란?HTML DOM의 progress max 속성은 HTML 문서 내 <progress> 요소의 max 속성값을 가져오거나 변경하는 데 사용됩니다. 진행 표시줄(progress bar)에서 max 값은 작업의 전체 분량을 의미하며, 이 값을 조정하면 진행률이 계산되는 기준도 함께 달라집니다.문법(Syntax)progress max 속성의 기본 문법은 다음과 같습니다.1. max 값 반환하기object.max2. max 값 변경하기object.max = number참고로 <