DOM : 문서객체모델 (Document Object Model)은 HTML 또는 XML에 접근하기 위한 인테페이스로,
문서내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.
자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수있다.
- 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있습니다.
- 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있습니다.
- 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있습니다.
HTML DOM
HTML DOM은 HTML 문서를 조작하고 접근하는 표준화된 방법을 정의합니다.
모든 HTML 요소는 HTML DOM를 통해 접근할 수 있습니다.
Document 객체
Document 객체는 웹 페이지 그 자체를 의미합니다.
웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 합니다.
Document 메소드
Document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공합니다.
- HTML 요소의 선택
- HTML 요소의 생성
- HTML 이벤트 핸들러 추가
- HTML 객체의 선택
1) HTML 요소의 선택 :
document.getElementByTagName(태그이름) : 해당 태그 이름의 요소를 모두 선택
document.getElementById(아이디) : 해당 아이디의 요소를 선택함
document.getElementsByClassName(클래스이름) : 해당 클래스에 속한 요소를 모두 선택
document.getElementsByName(name속성값) : 해당 name 속성값을 가지는 요소를 모두 선택
document.querySelectorAll(선택자) : 해당 선택자로 선택되는 요소를 모두 선택
2) HTML 요소의 생성 :
document.createElement(HTML요소) : 지정한 HTML요소를 생성한다.
document.write(텍스트) : HTML 출력 스트림을 통해 텍스트를 출력한다.
3) HTML 이벤트 핸들러 추가
HTML 요소선택.지정이번트 = function(){ 실행될 코드 } : 요소를 선택한 후 해당 요소에 원하는 이벤트를 붙이고 해당 이벤트가 발생할 때 실행될 코드를 함수로 정의한다.
4) 객체의 선택
document.body : <body>요소를 반환
document.forms : <form>요소를 반환
document.title : <title> 요소를 반환함
등등
[출처 : http://www.tcpschool.com/javascript/js_dom_document ]
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
DOM 요소의 내용변경.
text의 경우는 innerHTML 을 통해서 해당 요소의 내용을 변경 할 수 있습니다.
DOM 요소의 스타일 변경의 경우는
선택요소.style.속성 = ""; style을 통해서 해당 속성에 접근하여 변경할 수 있습니다.
HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장하고 있습니다. HTML 문서의 정보는 노드 트리라고 불리는 계층적 구조에 저장되며, 노드트리는 노드들의 집합이며, 노드간의 관계를 보여줍니다. 노트 트리는 최상위 레벨의 루트 노드부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 접근할 수 있습니다. 자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근 할 수 있습니다.
노드의 추가
- appendChild(새로운 노드) - 새로운 노드를 해당 노드의 자식 노드 리스트의 맨마지막에 추가합니다.
- insertBefore(새로운자식노드, 기준자식노드) - 새로운 노드를 특정 자식 노드 바로 앞에 추가합니다.
- insertData (오프셋, 새로운데이터) - 텍스트 노드의 텍스트 데잍에 새로운 텍스트를 추가한ㄴ다.
노드의 생성
- createElement()
- createAttribute() - 새로운 속성의 모드를 만들수 있습니다. (생성) - setAttributeNode(지정할 속성Node);
- createTextNode()
노드의 제거
- removeChild()
- removeAttribute()
'dev > Javascript' 카테고리의 다른 글
| [Javscript] JS-JSON (0) | 2022.04.04 |
|---|---|
| [Javascript] 2차원 배열 2048 게임 (0) | 2022.04.01 |
| [Javascript] 2차원배열 (0) | 2022.03.25 |
| [Javascript] .map (0) | 2022.03.10 |
| [JavaScript] 자바스크립트 기초2 (0) | 2022.02.09 |
