방통대 컴퓨터과학과 html 웹프로그래밍 정리내용입니다.
DOM : Document Object Model 문서객체모델
브라우저가 HTML 문서에 접근할 수 있도록 정의해 놓은 표준
웹 문서가 적재되면 웹브라우저는 정적으로 DOM을 생성
계층적인 구조를 갖는 트리로 표현
자바스크립트를 통해 프로그램 실행 중에 웹 문서의 내용, 구조, 스타일 등에 대한 동적인 작업가능
1. DOM 요소의 접근방법
- id를 이용 : getElementById("아이디명")
- 태그명을 이용 : getElementsByTagName("태그명")
- 클래스명 이용 : getElementsByClassName("클래스명");
2. DOM 요소의 수정
- innerHTML 속성 : HTML 형식으로 요소를 가져올 때 사용
- textContent 속성 : HTML 태그와 속성을 제외하고 내용만을 가져옴
- 요소의 속성 수정 : HTML 요소에서 사용하는 속성을 그대로 사용해서 값 할당
- CSS 스타일의 동적인 수정도 가능 : 요소에 접근 후 스타일 변경하면 됨
3. DOM 노드 삽입과 삭제
- 새로운 요소의 삽입_텍스트 노드를 갖는 경우
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<input type="button" value="요소 추가"
onClick="addElement()"><br/>
<div id="main"></div>
</body>
<script>
function addElement() {
var newP = document.createElement("p");
var txtNode = document.createTextNode("새로운 p 요소추가");
newP.appendChild(txtNode);
document.getElementById("main").appendChild(newP);
}
</script>
</html>
- 기존요소의 삭제 : 동일방법 removeChild 사용
'문돌이의 IT > JavaScript' 카테고리의 다른 글
| 자바스크립트 기본문법 (0) | 2017.10.02 |
|---|---|
| 자바스크립트의 역사 history of javascript (0) | 2017.10.01 |
| [HTML 웹프로그래밍]자바스크립트 객체 (0) | 2017.05.15 |
| [HTML 웹프로그래밍]자바스크립트 함수 (0) | 2017.05.13 |
| [HTML 웹프로그래밍]자바스크립트 기본 (0) | 2017.05.13 |