Ajax
[02] HTML DOM 실습 1
Mr.Bini
2016. 5. 17. 12:20
1. 자식 노드의 갯수 산출
- 주석도 태그로 인식 됩니다.
>>>>> WebContent/dom/childNodesCount.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 페이지 로딩시 실행
// window 브러우저 내부 객체의 onload 이벤트에 무명의 함수 연결
window.onload = function(){
// 변수 선언, divHolder란 이름의 태그 검색
var divel = document.getElementById('divHolder');
// 경고창, childNodes: 자식 태그
alert ("divHolder div의 자식노드의 갯수는 :" + divel.childNodes.length);
}
</script>
</head>
<body>
<div id="divHolder">
<!-- Ajax 정복 루트 -->
<div>HTML</div>
<div>JavaScript</div>
<div>DOM</div>
<div>Ajax</div>
</div>
</body>
</html>
2. 주석을 뺀 태그의 갯수만 산출
NodeTypes - Named Constants
NodeType Named Constant
1 ELEMENT_NODE
2 ATTRIBUTE_NODE
3 TEXT_NODE
4 CDATA_SECTION_NODE
5 ENTITY_REFERENCE_NODE
6 ENTITY_NODE
7 PROCESSING_INSTRUCTION_NODE
8 COMMENT_NODE
9 DOCUMENT_NODE
10 DOCUMENT_TYPE_NODE
11 DOCUMENT_FRAGMENT_NODE
12 NOTATION_NODE
>>>>> WebContent/dom/countChildElementNode.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 페이지가 로딩되면 자동 실행
window.onload = function(){
var count =0;
var divel = document.getElementById('divHolder');
// 자식 노드 수 만큼 순환
for (i=0; i < divel.childNodes.length ; i++){
if (divel.childNodes[i].nodeType == 1){ // 태그인지 검사
count++; // 태그의 갯수 증가
}
}
alert ("자식 엘레멘트(태그) 노드의 갯수는 " + count);
}
</script>
</head>
<body>
<div id="divHolder">
<!-- Ajax 정복 루트 -->
<div>HTML</div>
<div>JavaScript</div>
<div>DOM</div>
<div>Ajax</div>
</div>
</body>
</html>
3. DIV 태그의 값을 가져오는 방법
- document.all : 도큐멘트 태그안의 태그의 id 또는 name속성을 통틀어 찾습니다.
비표준이므로 파이어폭스에서 실행하면 실행은 되지만 경고가
표시됩니다.
- innerText : 태그의 Text값에 접근합니다.
비표준이며, 파이어폭스에서는 동작하지 않습니다.
>>>>> WebContent/dom/div.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
// ⓐ innerText는 div 태그의 값을 가져옵니다.
var div1text = document.all.div1.innerText;
비표준 비표준
// ⓑ firstChild.nodeValue는 div2 태그의 값을 가져옵니다.
var div2el = document.getElementById('div2');
var div2text = div2el.firstChild.nodeValue;
표준
// ⓒ 모든 브러우저를 호환함
// document.getElementById('div3').textContent 조건문은 FireFox인지 검사
// FireFox는 textContent 속성으로 DIV 태그의 내용을 가져옵니다.
var div3text = (document.getElementById('div3').textContent)? document.getElementById('div3').textContent : document.getElementById('div3').innerText ; 표준
// 경고창
alert ("div1text :" + div1text +"\r\n" + "div2text :" + div2text +"\r\n" +
"div3text :" + div3text );
}
</script>
</head>
<body>
<div id='div1'>백두산</div><br>
<div id='div2'>한라산</div><br>
<div id='div3'>금강산</div><br>
<div id='div4'>설악산</div><br>
<div id='div5'>관악산</div><br>
</body>
</html>
4. DIV 태그로 내용 저장
>>>>> WebContent/dom/innerHTML.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function setDiv(){
var str = "<table><tr bgcolor='#00ff00'>";
str = str + "<td width='500' height='200' align='center' valign='middle'>";
str = str + "<font color='#ff0000' size='5'>";
str = str + "A0001 - 컴퓨터 A<br>";
str = str + "A0002 - 컴퓨터 B<br>";
str = str + "A0003 - 컴퓨터 C<br>";
str = str + "A0004 - 컴퓨터 D<br>";
str = str + "</font>";
str = str + "</td></tr></table>";
document.getElementById("div1").innerHTML =str;
}
</script>
</head>
<body>
<div id='div1'>*****</div><br>
<input type="button"
onclick="javascript:setDiv()" value="테이블 생성">
</body>
</html>
▷ 버튼을 추가하여 테이블을 삭제하는 기능을 추가하세요.