Debelloper

웹 요소의 속성을 가져오거나 수정하는 getAttribute(), setAttribute(), removeAttribute() 메서드 웹 요소를 문서에 삽입할 때 태그 속성을 함께 사용하면 DOM 트리에 속성 노드가 추가되면서 속성값이 저장된다. 이 때 속성에 접근하려면 getAttribute() 메서드를 사용하고 접근한 속성의 값을 바꾸려면 setAttribute() 메서드를 사용하면 된다. 속성 자체를 삭제하고 싶다면 removeAttribute() 메서드를 사용하면 된다. [예시] 간단한 위 예시 코드를 활용하여 알아보자 getAttribute() 메서드 이 메서드는 괄호 안에 들어가는 속성에 접근하여 속성값을 반환한다. [구문] element.getAttribute(“속성명”) [설명] 먼저 속성..

웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티 요소(element)는 객체기 때문에 innerText 프로퍼티나 innerHTML 프로퍼티를 이용하여 웹 요소의 내용도 수정할 수 있다. [예시] hello, world! 위 예시 코드를 활용하여 알아보자 innerText 프로퍼티 innerText 프로퍼티는 요소의 텍스트 콘텐츠를 설정하거나 반환한다. [구문] - get 방식 : element.innerText ㄴ "let text = element.innerText"와 같이변수에 담아 활용해도 무방하다. - set 방식 : element.innerText = "내용" [설명] 예시 코드에서 #test id 값을 가진 p 태그의 텍스트 노드 값을 가져와보자 (get 방식) 다음..

DOM에 접근하기 웹 문서에서 원하는 요소를 찾아가는 것을 '접근한다'고 한다. 이벤트를 거는 등 요소를 제어하기 전에 그 요소를 먼저 지정할 수 있어야 한다. CSS에서 id, class, html 태그(, 등)를 선택자(selector)라고 하는데 이 선택자를 사용해서 DOM에 접근하는 여러가지 방법이 있다. getElementById() id는 문서 내에서 유일하기 때문에 특정 요소를 빠르게 찾을 때 유용하다. 이 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 지정된 값을 가진 요소 객체를 반환한다. 괄호 안에는 id명이 들어간다. [예시] bellori라는 id 값을 가진 요소에 접근하려면 아래와 같다. document.getElementById(“bellori”) getEle..

문서 객체 모델(DOM) 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법을 '문서 객체 모델(Document Object Model)'이라고 한다. 웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나, 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하기 위해서이다. 그러기 위해선 웹 문서의 모든 요소를 따로 제어할 수 있어야 한다. 자바스크립트는 웹 문서와 그 안에서 사용한 모든 요소를 각각 다른 객체로 인지하여 처리한다. 웹 문서 전체는 document 객체이고 삽입한 이미지는 image 객체이다. DOM 트리 DOM은 웹 문서의 요소들을 부모, 자식, 형제 요소로 나누어 구분한다. 아래의 코드는 기본적인 HT..