-
[HTML/CSS/JS] DOM, innerHTML, window.open() 알아보기프로그래밍 언어/HTML&CSS 2022. 8. 24. 13:09
DOM 이란?
문서 객체 모델(The Document Object Model, DOM)은 HTML, XML 문의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현 (structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하며 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM은 구조화된 nodes와 property와 method를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
웹 페이지는 일종의 문서(document)이다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 통해 DOM을 수정할 수 있다.
예를 들어, 표준 DOM 에서는 문서 안에서 모든 <P> elements 에 대한 list 를 리턴하는 getElementsByTagName method 를 정의하고 있다:
명확하게 DOM을 정의해 보자면, 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방법을 의미한다. 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미할 수도 있다.
DOM 구조
DOM은 HTML 문서에 대한 인터페이스이며, 첫째로 뷰 포트에서 무엇을 렌더링 할지 결정하기 위해 사용된다. 둘쨰로는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용된다.
DOM은 원본 HTML 문서 형태와 비슷하지만 몇 가지 차이점이 있는데, 항상 유효한 HTML 형식이고 자바스크립트에 수정될 수 있는 동적 모델이어야한다. 가상 요소(::after) 를 포함하지 않고, 보이지 않는 요소를 포함한다. (display:none)
innerHTML 프로퍼티
innerText는 태그도 그대로 text로 들어가기 때문에 innerHTML을 사용한다. innerHTML은 태그 속성 그대로 살려서 문자를 출력한다. 보통 body에 p태그 id를 설정해서 어떤 동적인 변화가 일어났을 때 ( 버튼이나 text 클릭 등) p태그로 지정해둔 자리에 innerHTML에 적어둔 내용이 생기는 것!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>innerHTML 활용</title> <style> /* CSS */ /*#이 들어갔기 때문에 id가 result 태그에 해당 스타일을 적용한다.*/ #result{ background-color: yellow; color : pink; font-size : 20px; } </style> <script> /* JavaScript */ function change(){ //firstP라는 아이디를 갖는 태그 객체를 생성 //여기서 p 변수는 사용되지 않았다. //firstP 초기값을 HTML에서 미리 지정해줬기 때문에 //아래 result만 실행되는 것 var p = document.getElementById("firstP"); //innerHTML 프로퍼티를 활용해 이미지 삽입 //result.innerHTML : id가 result인 태그에 정보 입력 //id가 result 선택자가 실행된다. result.innerHTML="나의 <img src = 'puppy.png' width='100px' height='100px'>강아지" } </Script> </head> <body> <!--HTML--> <h3>innerHTML 활용: 아래 글자에 클릭하면 예쁜 강아지가 보입니다.</h3><hr> <!--클릭하면 자바스크립트에 있는 change() 함수가 실행된다.--> <p id="firstP" style="color:blue"; onclick="change()"> 여기에 <span style="color:red">클릭하세요</span></p> <!--p태그 에 문구가 입력되어 있지 않아 암것도 없는 것 처럼 보이지만 <p id="result">ㄴㄴㄴㄴ</p> 이렇게 하면 위의 스타일 태그에서 지정해둔 속성 값들이 적용돼 글자가 보인다! --> <p id="result"></p> </body> </html>
window.open() 으로 새창 열기
웹브라우저에서 새창을 열기 위해 가장 간단히 사용할 수 있는 방법은 window 객체의 open() 함수를 사용하는 것이다.
var ret = window.open(url, name, specs, replace);
1. 반환값 (ret)
: 새로 만들어진 창 객체가 반환된다. 창의 생성을 실패하면 null을 반환한다.
2. url
: 새창에 보여질 주소. 선택적인 값으로 비워두면 빈창(about:blank)가 보인다.
3. name
: 새로 열릴 창의 속성 또는 창의 이름이다. 기본값은 “_blank”
_blank : 새 창에 열립니다. 이것이 기본값입니다.
_parent : 부모 프레임에 열린다. _self : 현재 페이지를 대체한다. _top : 로드된 프레임셋을 대체합니다.
name(임의의 이름) : 새 창이 열리고 창의 이름을 지정합니다.
4. specs
: 선택적인 값으로 창의 크기, 스크롤여부, 리사이즈 가능등의 속성을 지정한다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML 문서 작성기 만들기 </title> <script> var win = null; function showHTML(){ //win 변수에 데이터가 없다면 if문 실행 if(win == null || win.closed) //window.open("URL","새창이름", "옵션" ) win = window.open("", "outWin", "width=300, height=200"); //showHTML() 함수가 실행되면 srcText id인 textarea 태그 객체 생성 var textArea = document.getElementById("srcText"); //win (객체) 변수의 창을 열고 open() win.document.open(); //창에 textArea 객체의 값을 입력함 win.document.write(textArea.value); //창 생성 및 작성이 완료됐으므로 객체 출력 스트림을 종료시킴 win.document.close(); } </script> </head> <body> <h3>HTML 문서 작성기 동적 구성</h3> <p>아래에 HTML 문서를 작성하고 버튼을 클릭해 보세요 새 윈도우에 HTML 문서가 출력됩니다.</p> <textarea id = "srcText" rows ="10" close="50"></textarea> <br><br> <!--버튼을 클릭하면 showHTML 함수 실행--> <button onclick="showHTML()">HTML 문서 출력하기</button> </body> </html>
반응형