Document Object Model
- 문서 객체 모델
정의 : 플랫폼(브라우저)과 언어에 중립적인 인터페이스로 프로그램과 스크립트를 사용해서 동적으로 접근(제어)할 수 있도록 하며, 문서의 내용, 구조, 스타일을 변경할 수 있다.
문서의 접근
document.images[2];
document.forms['detail'];
문서의 구성
- 요소 노드(<body>,<p>,<ul> 등등)
- 텍스트 노드
<p>텍스트 노드입니다.</p> -> p태그를 제외한 나머지
- 속성 노드 : 태그 안에 있는 것이 모두 다 속성 노드이다.
<p title="a gentle reminder">이 물건 사는 것</p> ->진한 부분이 title이 된다.
문서 접근 방법<다 외우기>
- getElementById("태그 아이디");
리턴형은 Object
- HTML문서에서 지정된 아이디 속성을 포함하는 단 하나의 HTML요소를 참조한다.
예제>
<body>
<h1>쇼핑 목록</h1>
<p title="물건들">이 물건 사는 것을 잊지 마세요</p>
<ul id="purchases">
<li>땅콩</li>
<li>치즈</li>
<li>우유</li>
</ul>
<script type="text/javascript">
alert(typeof document.getElementById("purchases"));
</script>
</body></html>==> alert창에서 Object 출력
- getElementsByTagName("태그이름");
특정 태그를 사용하는 요소들을 배열로 얻는다
1. childNodes프로퍼티
문서 내 노드 트리에서 모든 요소의 자식에 대한 정보를 가져온다.
요소 노드 뿐만 아니라 모든 형식의 노드를 포함하는 배열을 반환한다.
->body_element는 body를 나타낸다.
<body>
<h1>쇼핑 목록</h1>
<p title="물건들">이 물건 사는 것을 잊지 마세요</p>
<ul id="purchases">
<li>땅콩</li>
<li>치즈</li>
<li>우유</li>
</ul>
<script type="text/javascript">
var body_element = document.getElementsByTagName("body")[0];
alert(body_element.childNodes.length);
</script>
</body>==> alert창에서 4 출력, (body태그도 포함해서 출력한다)
NodeList nl = body_element.childNodes
2. NodeType 프로퍼티
요소 노드는 nodeType 값은 1
속성 노드는 nodeType 값은 2
텍스트 노드는 nodeType 값은 3
<head><script type="text/javascript">
function count() {
var body_element = document.getElementsByTagName("body")[0];
alert(body_element.nodeType);
}
window.onload = count;
</script>
</head>
<body>
<h1>쇼핑 목록</h1>
<p title="물건들">이 물건 사는 것을 잊지 마세요</p>
<ul id="purchases">
<li>땅콩</li>
<li>치즈</li>
<li>우유</li>
</ul>
</body>
==>alert창에서 1 출력
3. nodeValue 프로퍼티
텍스트 노드의 값을 변경하기 위해 사용
<head>
<script type="text/javascript">
function count() {
var body_element = document.getElementsByTagName("p")[0];
alert(body_element.childNodes[0].nodeValue);
}
window.onload = count;
</script>
</head>
<body>
<h1>쇼핑 목록</h1>
<p title="물건들">이 물건 사는 것을 잊지 마세요</p>
<ul id="purchases">
<li>땅콩</li>
<li>치즈</li>
<li>우유</li>
</ul>
</body>
4. firstChild, lastChild 프로퍼티
node.firstChild == node.ChildNodes[0] -> 첫 번째 자식의 노드
node.lastChild == node.childNodes[node.childNodes.length-1] -> 마지막 자식의 노드
<head>
<script type="text/javascript">
function count() {
var body_element = document.getElementsByTagName("p")[0];
alert(body_element.firstChild.nodeValue);
}
window.onload = count;
</script>
</head>
<body>
<h1>쇼핑 목록</h1>
<p title="물건들">이 물건 사는 것을 잊지 마세요</p>
<ul id="purchases">
<li>땅콩</li>
<li>치즈</li>
<li>우유</li>
</ul>
</body>
5. nodeName 프로퍼티
- 노드의 태그 이름을 얻는다
testdin.innerHTML = "<p><em>
<head>
<script type="text/javascript">
function show() {
var a = document.createElement("p");
alert(a.nodeType+" "+a.nodeName);
}
window.onload = show;
</script>
</head>==>alert창에서 1 P 출력
6. parentNode 프로퍼티
- 부모의 노드(태그)를 얻는다
7. nextSibling 프로퍼티
- 오른쪽 형제로 이동(동생으로 이동)
속성 다루기<다 외우기>
- getElementById, getElementsByTagName을 통해 요소를 접근할 수 있기에 각 요소의 속성노드(프로퍼티)들을 접근할 수 있다.(값을 가져오거나, 변경할 수 있다.)
1. getAttribute()
- 요소의 각 속성값들을 가져올 수 있다
<head>
<script type="text/javascript">
function count() {
var body_element = document.getElementsByTagName("p")[0];
alert(body_element.getAttribute("title"));
}
window.onload = count;
</script>
</head>
<body>
<h1>쇼핑 목록</h1>
<p title="물건들">이 물건 사는 것을 잊지 마세요</p>
<ul id="purchases">
<li>땅콩</li>
<li>치즈</li>
<li>우유</li>
</ul>
</body>==>alert창에서 물건들 출력
2. setAttribute()
- 특정 속성 노드의 값을 변경할 수 있다.
<head>
<script type="text/javascript">
function count() {
var body_element = document.getElementsByTagName("p")[0];
body_element.setAttribute("title", "물건을 변경한다");
alert(body_element.getAttribute("title"));
}
window.onload = count;
</script>
</head>
<body>
<h1>쇼핑 목록</h1>
<p title="물건들">이 물건 사는 것을 잊지 마세요</p>
<ul id="purchases">
<li>땅콩</li>
<li>치즈</li>
<li>우유</li>
</ul>
</body>==>alert창에서 물건을 변경한다 출력
<head>
<script type="text/javascript">
function attri() {
var paras = document.getElementsByTagName("p");
for(var i=0; i<paras.length; i++) {
var title_text = paras[i].getAttribute("title");
if (title_text) {
paras[i].setAttribute("title", "New Title Text");
alert(paras[i].getAttribute("title"));
}
}
}
window.onload = attri;
</script>
</head>
<body>
<h1>쇼핑 목록</h1>
<p>안녕하세요</p>
<p title="물건들">이 물건 사는 것을 잊지 마세요</p>
<p title="물건">저 물건 사는 것을 잊지 마세요</p>
<ul id="purchases">
<li>땅콩</li>
<li>치즈</li>
<li>우유</li>
</ul>
</body>==>alert창에서 New Title Text가 2번 출력된다.
p태그에 title을 가지고 있는 태그는 2개뿐이라서 2번 출력되는 것이다.
태그 생성하기
1. innerHTML
- 특정 요소가 섞인 HTML을 읽고 쓸 수 있다
<div id = "testdiv">
window.onload = function() {
var testdiv = document.getElementById("testdiv");
testdiv.innerHTML = "<p>안녕하세요</p>"
2. createElement
- 새 요소를 만든다, 노드 타입1번을 생성하는 방법\
//p태그의 껍데기를 생성
var para = document.createElement("p");
3. appendChild
- 이미 존재하는 노드에 자식 노드로 추가한다
var para = document.createElement("p");
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);
4. createTextNode
- 텍스트 노드를 생성한다
//p태그를 생성하고
//p태그를 appendChild로 div태그 안에 넣어주었다.
//txt는 Helloworld라는 text를 갖고 있는데,
//텍스트노드는 모든 요소들의 자식노드라서 appendChild로
//p태그 안에 txt를 넣어주었다
var para = document.createElement("p");
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);
var txt = document.createTextNode("HelloWorld");
para.appendChild(txt);
5. insertBefore
- 기존에 존재하는 요소 앞에 새 요소를 삽입할 수 있다.
- parentNode.insertBefore(newNode, targetNode);
6. insertAfter 함수 만들기
새로운 노드와, 기존에 있는 노드에서 추가할 노드를 받는다
기존에 있는 노드에서 추가할 노드의 부모 노드를 parent에 넣어준다
부모의 마지막 자식 노드가 기존에 있는 노드(추가할 노드)랑 일치할 때,
부모의 맨 끝 자리에 새로운 노드를 추가해준다
그렇지 않으면
부모는 기존에 존재하는 노드 앞에 새 노드를 삽입하면서 오른쪽으로 이동한다
function insertAfter(newNode, targetNode){
var parent = targetNode.parentNode;
if (parent.lastChild == targetNode) {
parent.appendChild(newNode);
} else {
parent.insertBefore(newNode, targetNode, nextSibling);
}
}
'Study > JavaScript' 카테고리의 다른 글
| [javaScript] 쿠키 (0) | 2019.05.16 |
|---|---|
| [javaScript] Dom Script 실습 (0) | 2019.05.16 |
| [javaScript] Document 실습 (0) | 2019.05.16 |
| [javaScript] Document (0) | 2019.05.16 |
| [javaScript] Form (0) | 2019.05.16 |