JavaScript - 문서 객체 모델

JavaScript - 문서 객체 모델

문서 객체 모델(Document Object Model)

객체 지향 모델로서 구조화된 문서를 표현하는 형식

HTML 문서에 접근하기 위한 표준 모델

표준은 대부분의 브라우저에서 DOM을 구현하는 기준

문서 내의 모든 요소를 정의하고, 각 요소에 접근하는 방법을 제공

웹 브라우저에서 보여지는 HTML 문서 태그 요소에 대한 정보와 문서에 대한 여러 가지 속성을 제공

document 객체의 하위 객체를 이용하여 문서 내에서 일어나는 다양한 기능 제어

DOM 사용 시기

HTML 문서가 로드되고 나서 파싱 작업을 거쳐 DOM 트리 생성

DOM 문서가 로드될 때 모든 DOM을 사용할 수 있게 되는 때임

문서 내의 요소(태그) 제어 메소드 createElement('태그명') : 요소 노드 생성 createTextNode(text) : 텍스트 노드 생성 appendChild(node) : 객체에 노드 연결 setAttribute(name, value) : 객체 속성 설정 getAttribute(name) : 객체의 속성 반환 getElementById(id) : 태그의 id 속성이 id와 일치하는 문서 객체 반환(동일한 요소가 여러 개인 경우 첫 번째 요소만 반환) getElementByName(name) : 태그의 name 속성이 name과 일치하는 문서 객체를 배열로 반환 getElementsByTagName('태그명') : 태그명과 일치하는 문서 객체를 배열로 반환하여 참조할 수 있게 해줌. removeChild(child) : 문서 객체의 자식 노드 제거 querySelector(선택자) : 1개의 동일자 선택(동일한 요소가 여러 개인 경우 첫 번째 요소만 선택됨) querySelectorAll(선택자) : 동일한 요소가 여러 개인 경우 모든 요소 선택

문서 내의 요소(태그) 제어 메소드를 사용하여 요소를 선택할 때 자바스크립트 위치 주의 문서 내에서 요소(객체)들이 생성되기 전에 자바스크립트를 선택하게 되면 요소를 선택할 수 없다.

window.onload = function() { var box = document.getElementById('box'); box.innerHTML = "변경" // 이게 제일 좋은 방법? } box

요소 제어 메소드 예제 1 createElement.html

window.onload = function() { // 1. 요소 생성 //

태그 생성하고 객체 참조 변수에 저장 var h3 = document.createElement('h3'); // 텍스트 노드 생성 var text = document.createTextNode("출력한 텍스트 : 홍길동"); // 2. 문서에 출력 // 텍스트를 h3에 연결 h3.appendChild(text); // h3를 body에 연결(부착) document.body.appendChild(h3); };

요소 제어 메소드 예제 2 createElement2.html

window.onload = function() { // 1. 요소 노드 생성 // 태그 생성 var img = document.createElement('img'); // 속성 설정 img.src = "image/bird.jpg"; img.width = 250; img.height = 180; img.title = "예쁜새"; // 2. 문서에 출력 document.body.appendChild(img); };

getElementById() 예제 1 getElementById1.html

function change() { // 태그의 id 속성 값이 'header'인 문서 객체 반환 var header = document.getElementById('header'); // 요소의 텍스트 내용 변경 header.innerHTML = "변경된 제목 입니다." } 제목 제목 변경

getElementById() 예제 2 getElementById2.html

function change() { var image = document.getElementById('imageA'); var hint = document.getElementById('hint'); var btn = document.getElementById('changeButton'); image.src = "image/B.png"; hint.innerHTML = "새로운 이미지로 변경되었습니다."; btn.innerHTML = "완료"; } [변경] 버튼을 누르면 이미지가 바뀝니다. [변경]

querySelector() 예제 1 querySelector.html

window.onload = function() { var header = document.querySelector('h1'); header.style.color = 'orange'; header.style.background = 'skyblue'; header.innerHTML = 'JavaScript'; } Header Header Header

querySelectorAll() 예제 querySelectorAll.html

window.onload = function() { var headers = document.querySelectorAll('h1'); for(var i = 0; i < headers.length; i++) { // headers[i].style.color = 'orange'; // headers[i].style.background = 'skyblue'; // headers[i].innerHTML = 'JavaScript'; //혹은 var header = headers[i]; header.style.color = 'orange'; header.style.background = 'skyblue'; header.innerHTML = 'JavaScript'; } } Header Header Header

getElementsByTagName() 예제 getElementsByTagName.html

div {margin: 0 auto; width: 600px; text-align: center;} table {margin: 0 auto; width: 100%;} td {width: 50px; height: 30px;} window.onload = function() { // 모든 td 요소 가져오기. var tdArr = document.getElementsByTagName('td'); var setNumber = document.getElementById('setNumberBtn'); var setColor = document.getElementById('setColorBtn'); var clearNumber = document.getElementById('clearNumberBtn'); var clearColor = document.getElementById('clearColorBtn'); var colorArr = ['yellow', 'green', 'blue', 'gold', 'grey', 'red', 'purple'] setNumber.onclick = function() { for(var i = 0; i < tdArr.length; i++) { tdArr[i].innerHTML = i; } } clearNumber.onclick = function() { for(var i = 0; i < tdArr.length; i++) { tdArr[i].innerHTML = null; } } setColor.onclick = function() { for(var i = 0; i < tdArr.length; i++) { tdArr[i].style.background = colorArr[i]; } } clearColor.onclick = function() { for(var i = 0; i < tdArr.length; i++) { tdArr[i].style.background = 'white'; } } }; 셀에 번호 채우기 셀에 색상 채우기 셀에 번호 지우기 셀에 색상 지우기

from http://5bong2-develop.tistory.com/99 by ccl(A) rewrite - 2021-12-10 16:00:38