FEDev Story

속성과 프로퍼티

HTML 요소는 속성(attribute)을 갖고 있으며, 자바스크립트로 이 속성을 액세스할 수 있다. /** * Accessing attributes */ el.setAttribute( "tabindex", "-1" ); if ( el.hasAttribute( "tabindex" ) ) {} el.getAttribute( "tabindex" ); el.removeAttribute( "tabindex" ); 요소의 속성은 HTML에서 정의되지만, 프로퍼티(property)는 DOM에서 정의된다. 이것이 약간의 차이를 만든다. 예를 들어, 속성과 프로퍼티(el.value)의 초기값이 같은 input 요소가 있다고 가정해보자. 사용자 또는 스크립트가 값을 변경하면 프로퍼티(property)는 영향을 받지만, ..
Javascript/DOM 2017. 11. 6. 15:10
DOM 스타일링

el.classList 스타일이 필요할 때 el.classList를 사용한다. www.jsfiddle.net/1m33vjcv/4/embed/ 위 예제에서 toggle 메서도는 두번째 인수로 전달되는 부울 값에 따라 지정된 클래스를 추가하거나 제거한다. 명시적 스타일 el.style 속성을 사용해 요소에 동적인 스타일 정보를 읽거나 설정할 수 있다. 또는 cssText를 사용해 스타일을 한번에 지정할 수 있다. www.jsfiddle.net/9n6Lp7b5/1/embed/ window.getComputedStyle window.getComputedStyle는 상속된(계산된) 스타일을 반환한다. /** * Getting computed styles */ var el = document.querySelecto..
Javascript/DOM 2017. 11. 2. 17:48
DOM 변경

동적으로 DOM 트리에 새로운 요소 삽입하기 - el.innerHTML로 HTML 생성 /** * Insert elements into DOM #2 */ var target = document.getElementById( "target" ); target.innerHTML = ""; - 노드 생성후 추가 var target = document.getElementById("target"), div = document.createElement("div"); target.appendChild(div); 문제점 el.innerHTML을 변경하거나 요소에 자식을 추가할 때마다 DOM 리플로가 발생한다. 리플로가 반복적으로 발생하면 애플리케이션이 느려진다. 이는 자원을 많이 소모하는 작업이다. 최적화 유사한 요소를..
Javascript/DOM 2017. 11. 1. 14:56
Prev 1 ··· 19 20 21 22 23 24 25 ··· 37 Next