091

[JavaScript] DOM(미완글) 본문

Programming Language/JavaScript

[JavaScript] DOM(미완글)

공구일 2024. 11. 25. 04:28
728x90

01. DOM(Document Object Model)

- 웹 페이지의 구조를 객체 모델로 표현한 것으로,  트리 구조로 변환하여 페이지를 표시함 -> 모든 요소를 객체로 다루고, 자바스크립트를 통해 동적으로 조작할 수 있게 해주는 것이지의 구조를 객체 모델로 표현한 것으로, 트리 구조로 변환하여 페이지를 표시함 -> 모든 요소를 객체로 다루고, 자바스크립트를 통해 동적으로 조작할 수 있게 해주는 것

=> API(Web or XML page) = DOM + JS(scripting language) // DOM은 프로그래밍 언어와는 독립적으로 디자인

 

02. DOM의 document 객체의 메서드 및 프로퍼티

- JavaScript에서 HTML문서를 표현하는 객체로, DOM(Document Object Model)의 최상위 객체 중 하나, HTML 문서의 요소들에 접근하고 조작할 수 있는 메서드를 제공

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> index </title>
    </head>
    <body>
        <h1 onmouseover="show()" onmouseout="hide()"> 정수민입니다. </h1>
        <div><img id="fig" src=""></div>
        <script src="index.js"></script>
    </body>
</html>
//index.js

function show(){
	document.getElementById("fig").src = "summer.jpg";
}
    
function hide(){
	document.getElementById("fig").src = "";
}

-> 연결된 HTML document에서 "fig"라는 id를 가진 요소의 src를 각각 "summer.jpg"와 ""로 바꿔주는 코드

 

∙ document.write("출력"); : 브라우저 윈도우에 출력됨

∙ document.writeln("출력"); : 브라우저 윈도우에 출력됨, \n을 덧붙여 출력하지만 개행되는 것이 아니라 &nbsp;

- 아래 요소들을 변수에 넣어서(안 넣고 직접사용가능) .style.color와 같은 다양한 프러퍼티를 이용하여 직접  HTML에 있는 속성들을 변화시킬 수 있음 

∙ document.getElementById("아이디명"); : 특정 id값을 가진 요소를 선택함, id는 고유하기 때문에 한 요소에만 반환

∙ document.getElementByClassName("클래스명") : 특정 class값을 가진 요소를 선택함, 여러 개의 요소를 선택하며, 반환값은 HTMLCollection 객체

∙ document.querySelector("스타일 요소") : CSS선택자 스타일로 첫 번째 요소를 선택함
∙ document.querySelectorAll(" 스타일 요소 ") : CSS선택자 스타일로 모든 요소를 선택함, NodeList(배열처럼 보이는 객체)로 반환

 

 

 

728x90

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript] 객체(미완글)  (3) 2024.11.25
[JavaScript] 함수 및 출력함수  (3) 2024.11.13
[JavaScript] 기본문법(연산자, 제어문)  (5) 2024.11.13
[JavaScript] 기초 문법(토큰, 자료형 및 동적 프로그래밍 언어,변수선언방식)  (0) 2024.10.15
'Programming Language/JavaScript' Related Articles more