자바스크립트 웹 브라우저 제어

웹브라우저 제어

주로 자바스크립트를 통해 이루어지며 웹 페이지의 동적 변경 , 사용자와의 상호작용처리 , 웹페이지의 요소조작 수행

 

DOM 조작

DOM 이란?

Document Object Model의 약자로 문서 객체 모델

즉 , 웹 페이지 ( HTML  or XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 

프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다.

자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당하고있다.

 

DOM 요소의 생성 방식 

웹 페에지의 객체 지향 표현방식으로 웹 페이지 구조를 트리형태로 나타내며 자바스크립트를 통해 DOM 요소를 선택,추가,수정 ,삭제 할 수 있으며 이를 통해 동적인 웹페이지 구현이 가능하다.

이것이 DOM 트리 구조이다 , 출처: 코드스테이츠

 

DOM 의 주요 특징

• 트리 구조 : DOM은 문서의 계층적 구조를 반영하는 트리형태로 구성되어있으며 이 트리에는 노드 (Node)라고 불리는 객체가 있다.
                   각 노드는 문서의 특정부분 ( 예: 태그,속성,텍스트 등)을 나타낸다
• 양방향 상호작용 : DOM을 통해 웹 페이지의 내용을 동적으로 읽고 수정이 가능하다 
• 웹 개발에서 필수적인 기술로 웹페이지를 동적이고 상호작용이 풍부한 애플리케이션으로 만드는데 중요한 역할을 한다
• 웹 페이지의 구조,스타일,내용을 프로그래밍적으로 조작할 수 있는 능력을 제공함으로써 사용자 경험을 크게 향상 시킬 수 있다.
  
  여기서 프로그래밍적 조작능력이란? 
  웹 페이지의 구조 , 스타일 , 내용을 자바스크립트와 같은 프로그래밍 언어를 사용하여 동적으로 변경할 수 있는것을 의미
  HTML코드를 단순히 직접 수정하는것과 달리 코드를 실행하여 웹 페에지를 실시간으로 변형하고 사용자 상호작용에 맞춰 
  동적으로 반응할 수 있게 하는것이다.
  구체적인 예시로는 마우스 오버 효과 , 메뉴 펼치기/닫기 , 실시간 대화기능 , 움직이는 캐릭터 등

DOM 활용

1. 요소 선택 및 수정

javascript를 사용하여 DOM의 특정요소를 선택하고 그 내용을 변경하거나 스타일을 수정

document.getElementById("example").textContent = "hello,DOM";
document.querySelector(".my-class").style.backgroundColor = "yellow";

 

2.이벤트 처리

DOM 요소에 이벤트 리스너를 추가하여 사용자의 클릭,키보드 입력,마우스 이동 등 이벤트 반응 할 수 있다

document.getElementById("myButton").addEventListener("click",function(){
	alert("Button clicked!");
});

 

3. 동적 요소 생성

DOM을 사용하여 페이지에 새로운 요소를 동적으로 추가하거나 기존 요소를 삭제할 수 있음

var newElement = document.createElement("div");
newElement.textContent = "A new element";
document.body.appendChild(newElement);