문서 객체 모델 (DOM)
동적인 웹페이지를 작성하려면 원하는 요소를 찾아야 한다.
1) 요소 속성 중 id로 찾기
<script>
document.getElementById("");
</script>
2) 요소 속성중 name 으로 찾기
<script>
document.getElementsByName("comlmg")[0].src;
</script>
3) 태그 이름으로 찾기
<script>
document.getElementsByTagName( " input" ) [0];
</script>
1) 의 예 id로 HTML 요소 찾기 중요 ####
DOM 트리 순회
연습장 삼아 써보자..
childNodes : 한 요소의 모든 자식요소에 접근할 수 있다. 배열로 반환이 된다.
firstChild : "childNodes" 배열의 첫번째 자식 노드가 반환된다. "childNodes[0]" 와 같다.
lastChild : "childNodes" 배열의 마지막 자식 노드가 반환된다.
"childNodes[childNodes.length -1 ] " 와 같다.
parentNode : 현재 노드의 부모 노드를 반환한다.
nextSibling : 현재 노드의 다음 형제 노드를 반환한다.
previousSibling : 현재 노드의 이전 형제 노드를 반환한다.
firstChild 예제
<body>
<ul>
<li>List iem 1 </li>
<li>List item 2 </li>
<li>List item 3 </li>
<li>List item 4 </li>
</ul>
</body>
<script>
//ul 을 불러오는데 body 에 있는 ul 덩어리중에 0 번쨰 (1번째의미 ) 로 나오는 ul 을 불러온것.
var list = document.getElementsByTagName('ul')[0];
// 이렇게 불러오면 0번째 ul 중에 있는 모든 li 전체
var allitems = list.getElementsByTagName('li');
for ( i = 0 ; i < allitems.length ; i++ ){
allitems[i].firstChild.data);
}
</script>
새로운 요소 생성
텍스트 노드를 갖는 요소와 갖지 않는 요소로 구분
요소노드와 텍스트 노드를 생성한 후에 텍스트 노드를 요소 노드에 붙임
createElement(tagName) : 태그요소 생성
createTextNode(text) : 텍스트 노드 생성
appendChild(node) : 새로운 노드를 추가
removeChild(node) : 노드를 삭제한다.
remove() : 노드 삭제
ex) 기존의 요소 : div 태그에 텍스트노드를 생성해서 추가
<script>
function addtext(t) {
var node = document.createTextNode(t);
document.getElementById("target").appendChild(node);
}
</script>
//바디분인가..
<div id="target" onclick="addtext('무궁화 꽃이 피었습니다.')" style="font: 20px bold; >
여기를 클릭하세요 </div>
HTML 요소 삭제 : removeChild("node");
<script>
function removeNode() {
var parent = document.getElementById("target");
var child = document.getElementById("p1");
parent.removeChild(child);
}
</script>
<body>
<div id="target">
<p id="p1">첫번째 단락</p>
<p id="p2">두 번째 단락</p>
</div>
<button onclick="removeNode()">누르세요!</button>
</body>
dom추가삭제.html 수업 노트
<script>
//배열을 만들어준다.
str = ["넥타린", "허니" , "복숭아", "엠버" , "카시스"];
function proc1() {
// 만들어준 배열의 길이중 랜덤으로 한개를 구한다.
index1 = Math.floor(Math.random() * str.length);
//str 배열 내의 아무거나 1개가 골라지고 그것으로 TextNode 를 만든다.
text = document.createTextNode(str[index1]) ;
// p태그의 요소 만들어준다.
ptag = document.createElement("p");
// p 태그에 아까만든 TextNode인 text ( 랜덤값 1 개 ) 를 넣어준다.
ptag.appendChild(text);
//result1 에 ptag 를 추가한다.
result1 = document.getElementById('result1');
result1.appendChild(ptag);
}
function proc2() { //삭제하기 child = result1.lastChild;
// result1.removeChild(child);
//부모요소를 가져오기 result1 ( 제일 큰 부모 )
result1 = document.getElementById('result1');
//result1 에 저장되어 있는 자식요소 한개 가지고 오기
child = result1.firstChild;
//result1 에서 자식요소 없애기
result1.removeChild(child);
}
</script>
<body>
<div class="box">
<input type="button" value="추가" onclick="proc1()">
<input type="button" value="삭제" onclick="proc2()">
<div id="result1"></div>
<div id="result2"></div>
<div>
</div>
</body>
domtest.html
<script>
function proc1() {
//querySelector 로 하면 0 번째꺼만 가지고 올 수 있다. 뒤에 [index]를 붙일 수 없다.
ulist = document.qyertSelector('ul');
//두번쨰방법
// ulist = document.getElementsByTaName("ul")[0];
//서번째 방법
//ulist = document.querySelectorAll('ul');
//ulist[0];
listitem = ulist.getElementsByTagName('li');
res = ""
for( i = 0 ; i < listiem.length ; i++ ) {
res += listitem[i].firstChild.data + "<br>;
}
document.getElementById('result1').innerHTML = res;
function proc2() {
ultag = document.getElementsByTagName('ul')[1];
---------------------------------------------------------------------------------------------
//두번째 방법
//ultag = document.getElementsByTagName('ul');
//ultag[1]
litag = ultag.querySelectorAll('li'); //배열로 리턴한다.
console.log(litag.length);
for( i= 0 ; i < litag.length ; i++){
//글자 ( 파일이름 뽑아오는 부분 )
imgdata = litag[i].firstChild.data;
//이미지 생성 <img src="" alt="">
vimg = document.createElement("img");
vimg.src="../image/" + imgdata + ".jpg";
vimg.alt= imgdata;
vimg.width = "100";
vimg.height = "100";
//생성된 이미지(자식)를 result2(부모)에 추가한다.
litag[i].appendChild(vimg);
}
}
function proc3(litag){
textdata = litag.firstChild.data
vimg = document.createElement("img");
vimg.src="../image/" + textdata + ".jpg";
vimg.alt= textdata;
vimg.width = "100";
vimg.height = "100";
litag.appendChild(vimg);
}
}
</script>
<body>
//1번째
<div class="box">
<ul>
<li>홍길동</li>
<li>개나리</li>
<li>진달래</li>
<li>강감찬</li>
<li>김나리</li>
</ul>
<input type="button" value="확인" onclick="proc1()">
<div id="result1">
//2번째
<div class="box">
<ul>
<li>가가캐나다</li>
<li>뉴욕</li>
<li>돌고래</li>
<li>애플워치2</li>
<li>애플로고</li>
</ul>
<input type="button" value="확인" onclick="proc2()">
<div id="result2">
//3번째
<div class="box">
<ul>
<li onclick="proc3(this)">가가캐나다</li>
<li onclick="proc3(this)">뉴욕</li>
<li onclick="proc3(this)">돌고래</li>
<li onclick="proc3(this)">애플워치2</li>
<li onclick="proc3(this)">애플로고</li>
</ul>
</div>
</body>
댓글
댓글 쓰기