-
[웹프로그래밍] 7주차 JS이벤트 처리웹프로그래밍 2022. 4. 16. 21:39
<학습내용>
- DOM(name,태그,클래스로 요소 접근하기)
- 요소의 속성 변경하기
- 요소 추가 및 삭제
-
1. DOM과 BOM
1) DOM
(1) DOM의 특징
-HTML문서의 계층적인 구조를 트리로 표현
-HTML을 구성하는 모든 요소들을 요소(element) 속성(attribute), 문자(text)로 구분
ex) 태그 하나하나=> 요소 / 속성 하나하나 => 속성 / 태그로 감싸인 문자열 하나하나 => 문자
(2) DOM으로 무엇을 할 수 있는가?
HTML요소나 속성을 바꿀 수 있고 CSS스타일, 이벤트 등 기존 웹페이지에 대해 모든것을 바꿀 수 있음.
Method description document.getElementById(id) 아이디로 요소 찾기 documents.getElementsByTagName(name) 태그 이름으로 요소 찾기 documnets.getElementsByClassName(name) 클래스 이름으로 요소찾기 *name속성으로 요소 html찾기
</DOCTYPE> <html> <head> <script> function process(){ var obj=document.myform.text1; //또는 document.form[0].input[0] 첫번째 form의 첫번째 input(대신 name을 넣어준것) //name속성으로 접근 할 때는 '자식'을 무조건 언급해야함 무작정 document.text1은 안됨 } </script> </head> <body> <form name="myform"> <input type="text" id="target" name="text1"> <input type="submit" value="제출" onclick="process()"> </form> </body> </html> </body>*태그 이름으로 html요소 찾기
<li>안에 있는 문자열 알림 메세지창띄우기
<!DOCTYPE html> <html> <body> <ul> <li>List item1</li> <li>List item2</li> <li>List item3</li> <li>List item4</li> <li>List item5</li> </ul> <script> // li를 찾아야하는데 ul안에있는 li만 찾고싶음. // body안의 첫번째 ul태그 => getElementByTagName('ul')[0] // 첫번째 ul안에 li배열 시작주소 => getElementByTagName('li') var list = document.getElementsByTagName('ul')[0]; var allitems = list.getElementsByTagName('li'); //allitems는 배열형태임 for(var i=0, length = allitems.length; i<length; i++){ alert(allitems[i].innerHTML); //alert(allitems[i].firstChild.data)와 같음 } </script> </body> </html>Method Description element.innerHTML=new html content innerHTML요소 바꿈 element.attribute = new value 바꾸고 싶은 속성의 값 명시하고 접근하여 할당 ex) img.src="flower.jpg" element.setAttribute(attribute, value) 정의되어있지않은 새로운 속성을 추가적으로 부여하고 싶을 때 ex) img.setAttribute("class","flower_img") element.style.property = new style (css속성) 변경하고자하는 객체.style.속성 으로 접근 *요소의 속성 변경하기
<!DOCTYPE html> <html> <head> <title></title> <script> function get(){ var val = document.getElementById("ex").innerHTML; alert(val); } function set(v){ document.getElementById("ex").innerHTML=v; } function changeimge(){ document.getElementById("image").src="hangman0.gif"; } function changeStyle(){ document.getElementById("p1").style.color="red"; document.getElementById("p1").style.background="yellow"; // css속성에서 하이픈(-)연결 됐던거 하이픈 없애고 다음글자 대문자로 document.getElementById("p1").style.fontFamily="Century Schoolbook"; } </script> </head> <body> <div id="ex">여기가 div로 선언되었습니다.</div> <a href="#" onclick="get()">div요소내용 출력하기</a> <a href="#" onclick="set('변경되었습니다.')">div요소내용 변경하기</a> <img id="image" src="hangman1.gif" width="120" height="100"> <input type="button" onclick="changeimge()" value="눌러보세요"> <p id="p1">this is a paragraph</p> <input type="button" onclick="changeStyle()" value="눌러보세요"> </body> </html>
※자바 스크립트로 스타일 속성 변경시, 헷갈리는 점
1) 반드시 style. 사용해야함!
(x)document.getElementById("clickme").color="red";(o)document.getElementById("clickme").style.color="red";
2) 스타일 속성은 -이 아니고 대문자 사용
3) 속성에 할당하는 값은 반드시 문자열(" ")이고 단위가 있어야함
(x)clickme.style.width=200;(o)clickme.style.width="200px"
*요소의 추가 및 삭제
Method Desctiption document.createElement(element) html 요소 생성 document.removeChild(element) html 요소 제거 document.appendChild(element) 어떤 부모가 다양한 자식노드를 가지고 있는 상태에서 부모의 제일 마지막 자식으로 추가 document.replaceChild(element) html 요소 대체 document.write(text) write into html output stream (1) 요소 추가 및 삭제
<!DOCTYPE html> <html> <head> <title></title> <script> // function get(){ // var val = document.getElementById("ex").innerHTML; // alert(val); // } // function set(v){ // document.getElementById("ex").innerHTML=v; // } // function changeimge(){ // document.getElementById("image").src="hangman0.gif"; // } // function changeStyle(){ // document.getElementById("p1").style.color="red"; // document.getElementById("p1").style.background="yellow"; // // css속성에서 하이픈(-)연결 됐던거 하이픈 없애고 다음글자 대문자로 // document.getElementById("p1").style.fontFamily="Century Schoolbook"; // } function addtext(t){ var node = document.createTextNode(t); document.getElementById("target").appendChild(node); } function removeNode(){ var parent = document.getElementById("target"); var child = document.getElementById("p1"); parent.removeChild(child); } </script> </head> <body> <!-- <div id="ex">여기가 div로 선언되었습니다.</div> <a href="#" onclick="get()">div요소내용 출력하기</a> <a href="#" onclick="set('변경되었습니다.')">div요소내용 변경하기</a> <img id="image" src="hangman1.gif" width="120" height="100"> <input type="button" onclick="changeimge()" value="눌러보세요"> <p id="p1">this is a paragraph</p> --> <!-- <input type="button" onclick="changeStyle()" value="눌러보세요"> --> <div id="target" onclick="addtext('동적으로 텍스트가 추가됩니다')" style="font: 20px bold;">여기를 클릭하세요 <p id="p1">첫번째 달락</p> <p id="p2">두번째 달락</p> </div> <button onclick="removeNode()">removeChild버튼 누르세요!</button> </body> </html>
'웹프로그래밍' 카테고리의 다른 글
[웹프로그래밍] 10주차 캔버스/jQuery (0) 2022.06.06 [웹프로그래밍] 9주차 Dom/이벤트처리 및 유효성 검사 (0) 2022.05.05 [웹프로그래밍] 5주차-6주차 javascript 문법 (0) 2022.04.09 [웹프로그래밍]4주차 (0) 2022.03.27 [웹프로그래밍]3주차 (0) 2022.03.22