1. HTML DOM
브라우저가 HTML 페이지를 로드하는 과정에서 각 HTML 태그를 하나의 객체로 만듦
모든 브라우저에서 호환됨
HTML 태그가 출력된 모양, 콘텐츠 제어 위함
DOM 객체를 통해 CSS 스타일의 프로퍼티를 바꿔서 동적 제어 가능
DOM트리
- HTML태그의 포함관계에 따라 그린 트리 구조
- DOM트리를 따라 DOM객체에 마음대로 접근 가능
- DOM 트리의 루트는 document 객체이다. 그러나 document 객체는 DOM 객체가 아니다.
- DOM객체의 종류는 HTML태그 종류 수만큼 있다.
- HTML태그 당 DOM객체가 하나씩 생성된다. 같은 태그가 여러개 있어도 하나만 생성된다.
- DOM트리는 HTML 태그의 포함관계에 따라 부모 자식 관계로 구성된다.
- 브라우저는 HTML태그를 통해 DOM객체를 생성하고 DOM트리를 구성한 뒤 DOM객체를 화면에 출력한다.
DOM객체의 구성요소
HTML 태그의 속성이 그대로 반영됨
HTML태그(엘리먼트)이름, 속성, CSS스타일, 이벤트리스너, 콘텐츠(inner html)
위의 5가지 모두 DOM객체의 구성요소가 된다.
프로퍼티: DOM객체의 멤버 변수. HTML태그의 속성 반영
메소드: DOM객체의 멤버 함수. HTML태그 제어
컬렉션: 정보를 집합적으로 표현하는 일종의 배열
이벤트리스너: HTML태그에 작성된 이벤트리스너
CSS스타일
DOM객체 사이의 관계
부모, 자식, 형제의 관계
parentElement 프로퍼티: 부모 객체
children 프로퍼티: 직계 자식들의 컬렉션
firstElementChild 프로퍼티: 첫번째 직계 자식
lastElementChild 프로퍼티: 마지막 직계 자식
sibling 관계의 dom객체 접근
previousElementSibling 프로퍼티: 왼쪽 sibling 객체
nextElementSibling 프로퍼티: 오른쪽 sibling 객체
<!DOCTYPE html>
<html>
<body>
<h3>dom객체의 프로퍼티, 스타일, 이벤트리스너</h3>
<hr>
<p id="firstP" style="color:blue; background:yellow" onclick="this.style.color='teal'">
이것은 <span style="color: red;">문장입니다</span></p>
<script>
var p = document.getElementById("firstP");
var text = p.id;
text += p.tagName;
text += p.innerHTML;
text += p.style.color;
text += p.onclick;
text += p.childElementCount
text+= p.offsetHeight
</script>
</body>
</html>
DOM객체 다루기
DOM객체의 구분, id 속성
같은 태그가 여러개 있는 경우 id 속성을 이용해 구분한다.
id속성값은 html 페이지 내에서 유일하도록 작성되어야 한다.
DOM객체 찾기, document.getElementById("id내용");
//동일한 코드
var p = document.getElementById("firstP");
p.style.color = "red";
document.getElementById("firstP").style.color = "red";
DOM객체의 CSS스타일 동적 변경
DOM객체의 style프로퍼티로 접근하여 style객체 활용
obj.style.backgroundColor = "green";
obj.style.cssText = "background-color:green";
스타일 동적 변경
<!DOCTYPE html>
<html>
<head>
<title>css스타일 동적 변경</title>
</head>
<body>
<script>
function change(){
var span = document.getElementById("mySpan");
span.style.color = "green";
span.style.fontSize = "30px";
span.style.border = "3px dotted magenta";
}
</script>
<p style="color:black">이것은 <span id="mySpan" style="color:red">문장입니다</span></p>
<input type="button" value="스타일변경" onclick="change()">
</body>
</html>DOM객체의 innerHTML프로퍼티
시작태그와 종료태그 사이의 HTML 콘텐츠 나타내는 문자열 정보를 읽고 수정할 수도 있다.
var p = document.getElementId("firstP");
var text = p.innerHTML;
//변경
p.innerHTML = "변경되었음";this
객체 자신을 가리키는 용어
//this는 div 의미함
<div onclick="this.style.color = 'Red'">;
//this는 button의미
<button onclick="this.style.color='orange'">
3. document 객체
dom트리의 최상위객체
html 문서 전체 대변하는 객체
html 문서의 전반적인 제어 지원
html 문서에 만들어진 동일한 이름의 html태그들을 배열처럼 접근할 수 있는 컬렉션
DOM객체가 아니므로 style객체가 존재하지 않는다.
태그 이름으로 dom객체 찾기, document.getElementByTagName()
동일한 html태그 이름 갖는 dom객체들을 모두 찾아 컬렉션으로 리턴
만들어진 컬렉션에 []이용해 접근 가능
class속성으로 dom찾기, document.getElementByClassName();
동일한 클래스이름가진 dom객체 컬렉션으로 리턴
document.write()와 document.writeln()
현재 document객체에 담긴 내용의 끝에 html 텍스트 추가
html문서가 로드되어 출력이 모두 이루어지면 document객체는 닫히므로 이때 write를 사용하면 현재의 페이지 내용은 지워지고 새 문서가 작성됨
document의 열고닫기, document.open(), close()
open(): 현재 도큐먼트 객체에 만들어진 html텍스트 모두 지움
4.html태그의 동적 구성
dom객체 동적 생성, createElement
var newDIV = document.createElement("div");
newDIV.innerHTML = "새로운 DIV입니다";
newDIV.setAttribute("id", "myDIV");
newDIV.style.backgroundColor = "yellow";dom트리에 삽입
//삽입
부모.appendChild(DOM객체);
부모.insertBefore(DOM객체, [,기준자식]);
//newDIV를 P ID=P 의 마지막 자식으로 추가하기
var p = document.getElementById("p")
p.appendChild(newDIV);
DOM객체의 삭제
removeChild객체를 이용해 부모에게서 자식 객체를 떼어냄
var myDIV = document.getElementById("myDIV");
var parent = myDIV.parentElement;
parent.removeChild("myDIV");'학교수업 > 웹 프로그래밍' 카테고리의 다른 글
| 9. 이벤트 기초 및 활용 (0) | 2022.06.08 |
|---|---|
| 07. 자바스크립트 코어 객체와 배열 (0) | 2022.06.08 |
| 6. 자바스트립트 언어 (0) | 2022.06.08 |
| 5. CSS 고급활용 (0) | 2022.06.07 |
| 4. CSS (0) | 2022.06.06 |