DOM7 JavaScript : DOM 요소의 높이 / 너비를 알아보자(client / offset / scroll / getBoundingClientRect()) 웹페이지, 또는 요소의 높이 / 너비 값에 대한 정보를 얻는 속성에 대해 소개해보고자 한다. 우선 client, offset, scroll에 대해 알아보자clientelement.clientWidth | element.clientHeight | element.clientLeft | element.clientTop해당 요소의 패딩을 포함한 크기를 나타낸다. clientWidth는 요소의 패딩을 포함한 너비, clientHeight는 요소의 패딩을 포함한 높이, clientLeft와 clientTop은 border기준 가장 바깥 끝부분으로부터 해당 요소가 얼마나 떨어져 있는지에 대한 정보를 제공한다. offsetelement.offsetWidth | element.offsetHeight | element... 2024. 7. 30. JavaScript : DOM에서 class를 설정해보자 classListclassList는 CSS의 클래스 목록에 접근하여 지정한 클래스를 추가, 제거 등의 기능을 할 수 있다. 인라인형식의 스타일의 경우 다른 디자인을 설정하기 어렵지만, 클래스를 통해 지정하는 경우에는 이벤트에 따라 클래스를 추가, 제거 하는 등의 기능을 통해 조율이 쉽다. 메서드설명.length 해당 요소의 클래스의 수를 반환한다..add()해당 요소의 클래스 이름을 추가한다. .contains()해당 요소에 지정된 클래스 이름이 있는지 여부를 확인한다. (true / false).item(index)해당 요소에서 지정된 인덱스 번호로 클래스 이름을 반환한다. (0부터 시작).remove()해당 요소에서 하나 이상의 클래스 이름을 제거한다. .toggle(클래스명, true|false)해.. 2024. 7. 29. JavaScript : DOM의 이벤트를 설정해보자 DOM의 이벤트에는 다양한 종류가 있다. DOM의 이벤트 처리기는 주로 .addEventListener()를 사용하며, removeEventListener()를 사용하여 제거할 수도 있다. DOM을 사용하지 않고 인라인 형식으로 onchange, onclick을 사용하여 이벤트를 설정할 수도 있다. .addEventListener()이벤트 종류에 들어가는 항목은 w3c의 DOM Event Object에서 확인이 가능하다. 요소.addEventListener("이벤트종류", 함수); addEventListener의 클릭을 사용하여, #div2를 클릭했을 때 z-index를 -1로 변경하여 #div1의 뒤에 위치될 수 있도록 하였다. .removeEventListener()요소.remo.. 2024. 7. 29. JavaScript : DOM을 통해 input 값 받아오기 속성설명.valuevalue값을 가질 수 있는 태그의 경우 그 값을 가져올 수 있다 (input태그).checkedinput태그의 checkbox / radio 타입에 사용되며 선택되었을 때 true, 아닐때 false를 반환한다. .selectedselect태그에서 선택된 항목의 경우 true, 아니면 false를 반환한다. .valueinput태그를 통해서 사용자가 입력한 값을 .value를 통해 받아서 사용할 수 있다. 이름 취미 등록 .checkedcheckbox / radio 버튼이 체크되었을 때 true, 체크되지 않았을 때 false를 반환한다. 아래 예시는 for~of문을 사용해서 radio버튼의 객체를 순회한 다음, 버튼이 체크되었을 때 true가 된다는.. 2024. 7. 29. JavaScript : DOM을 통해 속성을 조작해보자 AttributeDOM을 통해서 element에 있는 속성값을 반환, 설정 및 삭제가 가능하다.속성설명.attributes해당 요소의 속성들의 모음을 반환한다. .getAttribute()해당 요소의 지정된 속성 값을 반환한다..hasAttribute()해당 요소에 지정된 속성이 있으면 true, 없으면 false.hasAttributes()해당 요소에 속성이 있으면 true, 없으면 false.removeAttribute()해당 요소에서 지정된 속성 제거 .setAttribute()지정된 속성을 지정된 값으로 설정 또는 변경 Style .style을 통하여 요소의 인라인 스타일에 접근하여 설정할 수 있다. 스타일 설정의 경우 3가지의 형태로 설정이 가능하다.cssText를 .. 2024. 7. 27. JavaScript : DOM에서 요소를 조작해보자 생성DOM을 사용해서 원하는 태그의 HTML요소를 만들 수도 있고, 텍스트 노드를 생성해서 HTML 문서에 삽입할 수도 있다. 아래 예제의 경우 (1) 태그를 만들어서 .textContent로 문자열을 집어넣고, 에 삽입하고, (2) 텍스트노드를 생성해서, 원래 있던 태그에 삽입했다.속성설명.createElement("태그네임")지정한 태그의 HTML요소를 만들어 반환한다..createTextNode()텍스트 노드를 생성한다. 추가위의 예제에서 보다시피 HTML태그에 추가할 수 있는 속성들을 DOM은 가지고 있다. 문자열을 삽입할 수도 있고, 생성된 요소를 위 혹은 아래부터 삽입할 것인지도 결정할 수 있다. 문자열 삽입속성설명.innerHTML 해당 요소에 문자열을 HTML 형태로 .. 2024. 7. 25. 이전 1 2 다음