기본적으로 Dom은 Bom과 대비되어서 공부하면 좋습니다.
그중에서 DOM은 문서객체모델로써, 가장 흔히 사용되는 document가 최상위객체입니다.
앞으로는 document를 비롯해서 사용할 일이 많습니다.
이러한 문서객체모델의 최상위객체 document아래에는 head, title, body, h1, a, html태그가 있어요.
당연지사 document를 붙여줘야 쓸수 있겟죠
DOM 1 : 기본적인 출력코드입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<body>
<h1> 쇼핑 목록</h1>
<h3> 마트에서 사야 할 목록 </h3>
<ul id="mart">
<li> 우동 </li>
<li> 하드 </li>
<li> 맥주 </li> <!-- <li> innerHTML </li> -->
</ul>
<!-- 1. 사용자 입력 2. 다른 파일 전송이전에 입력확인(검토) : myprocess를 쓰는 이유 -->
<form name="f1" action="exam.jsp"> <!-- other.jsp파일에 입력을 전송하겠다 -->
<input type=text id="i1" name="n1"> <!-- 입력받는 값 (1개이상가능) --> <!-- 값의 저장은 id가 아니고, name에서 한다. name=n은 변수명이다 -->
<input type=password id="i2" name="n2">
<input type=submit value="전송" onclick="myprocess()"> <!-- 반드시 전송할때 submit타입으로 해야 입력데이터를 전송한다 -->
<!-- myprocess를 함으로써, (submit의 내장기능)기본동작하지말고 myprocess로 다른기능이 실행된다. 따라서 button과도 같아진다 -->
</form>
<script>
function myprocess(){
alert(document.f1.n1.value); /* 이 표현은 태그들마다 이름이 다 붙어야하기때문에 잘 안쓴다 .계층구조1 */
alert(document.f1.n2.value);
var nodelist= /*배열2 */
document.getElementsByName('n1');
alert(nodelist[0].value);
}
//id값으로
//UL자식
var mart = document.getElementById("mart")
var martArray = mart.childNodes; //id를 통해서 ul을 저장했다면 ==> ul 자식노드를 보여줘 //
//자식노드(텍스트0, 태그1, 속성2)중 태그(=요소노드)
for(var i=0; i<martArray.length; i++){
if(martArray[i].nodeType==1){ //노드타입이 1이면 == 태그타입이면, 개행과 ul은 빼고 li만
martArray[1].innerHTML="설렁탕"; //총 공백포함 7개중에서 => 공백포함하면 우동은 1 하드는 3 맥주는 5인덱스이다. innerHTML을 이용하는 코드는 익숙해져야한다. +=를 쓰면 이전의 값을 없애지않고 누적할 수 있다
document.write(martArray[i] //martArray[i]를 출력해보면 객체로 쓰임을 알 수있다.
+ martArray[i].nodeName+ ":"
+ martArray[i].nodeType+ "<="
+ martArray[i].innerHTML+ "<br>");
}
}
//태그이름으로
//LI 태그부터
var lilist = document.getElementsByTagName("li"); //elementsbytagname은 배열처럼 사용해야된다는 주의점만 빼면 엄청 편하다
for(var i=0; i<lilist.length; i++){
document.write(lilist[i].innerHTML+"<br>");
}
</script>
</body>
|
더보기
<코드결과>
DOM 2 : 버튼으로 색상, value변경하는 코드입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPE html>
<html>
<!-- HTML태그변경 (1) 태그문자열 변경
<2개 함수 작성>
getDiv() 매개변수
div태그 문자열 alert출력
리턴값
setDiv() 매개변수
문자열 전달받아서 div태그 내부 변경
리턴값 -->
<head>
<meta charset="UTF-8">
<title> dom </title>
<style>
div{
background-color: pink;
color: red;
}
</style>
</head>
<body>
<div>여기는 div 태그입니다</div>
<input type=button value='내용확인' onclick="getDiv()">
<input type=button value='내용변경' onclick="setDiv('div 태그를 변경합니다')">
<script>
function getDiv(){
var divlist = document.getElementsByTagName('div');
alert(divlist[0].innerHTML); //왜 divlist[0].value안되지? undefined나옴, innerHtml도안됨
divlist[0].style.backgroundColor= 'yellow';
//바로 화면이 바뀌니까 리턴값 필요없다.
}
function setDiv(newText){
var divlist= document.getElementsByTagName('div');
divlist[0].innerHTML=newText;
divlist[0].style="background-color: orange";
//바로 화면이 바뀌니까 리턴값 필요없다.
}
</script>
</body>
</html>
|
DOM 3 : Tag관련 코드입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 돔</title>
<script>
//함수 매개변수 0개 정의:호출 0,1,2,3,4개이상 인수 전달
//호출 실제 전달 인수 갯수:arguments
//배열 : 키워드 : 현재 함수 실제 전달 인수 배열
var cntOfClick = -1;
function setImage(image) {
var imgTag = document.getElementById("i");
imgTag.src = images;
imgTag.width = '150px';
}
function setImage() {
//자바처럼 오버로딩이 되지 않기때문에 setImage()와 setImage(~~~~)를 구분하기 위해서 arguments의 length개수가 몇개인지에 따라서 결정한다.
if (arguments.length == 1) {
var imgTag = document.getElementById("i");
imgTag.src = arguments[0];
//imgTag.style.width = '150px';
imgTag.width = 150;
}
else {
cntOfClick++;
var imgArray = [ '1.jpg', '2.jpg','chrome.jpg', 'google.png' ];
var imgTag = document.getElementById("i");
if (cntOfClick == imgArray.length) {
cntOfClick = 0;
}
imgTag.src = "../images/" + imgArray[cntOfClick];
//alert(cntOfClick);
}//else end
}
</script>
</head>
<body>
<img id="i" src="images/google.png" width=100px height=50px alt="이미안보임">
<INPUT TYPE=BUTTON VALUE="이미지변경" onclick="setImage('../images/1.jpg')">
<INPUT TYPE=BUTTON VALUE="이미지계속변경" onclick="setImage()">
// setImage()
//var imageArray = ['americano.jpg','google.png','cafelatte.jpg'];
//var count = 0;
count++;
</body>
</html>
|
DOM 4 : 입력한 url사이트 추가하는 코드입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<body>
링크사이트명: <input type=text id="sitename"><br>
링크url: <input type=text id="siteurl"><br>
<input type=button value="링크추가" onclick="addLinkTag()"><br>
<div id="d1"></div>
<script>
var tmp;
function addLinkTag(){
sitearr= document.getElementById('sitename').value;
urlarr= document.getElementById('siteurl').value;
//tmp="<a href="+siteurl.value+">" + sitename.value + "</a>"; 대체
tmp="<a href="+sitearr+">" +siteurl.value+ "</a>";
document.getElementById("d1").innerHTML+=tmp +"<br>";
//return tmp; //테스트
//alert(tmp); //테스트
}
// alert(sitearr); //테스트
// alert(urlarr); //테스트
</script>
</body>
|
더보기
<코드결과>
DOM 5 : 버튼을 누르면 위아래로 이미지가 생성되는 코드입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
//div를 안의 글을 누르면 위아래 사진이 계속 반복적으로 생성된다
<head>
<meta charset="UTF-8">
<title> Dom5 예제 </title>
<style>
div {
background-color: yellow;
}
</style>
<script>
function add(text){
//test1
/* var newnode=
document.createTextNode(text); //새롭게 추가하려는 노드가 뭔지 (생성)
var parent=
document.getElementById('here').appendChild(newnode);//어느 태그안에 삽입해야하는지? 위치를 작성 (appendChild대문자 필수)
} */
//test2
/* document.getElementById('here').innerHTML+='add함수 호출 결과입니다'; }*/
//test3
//1. img 태그 생성
var img= document.createElement('img');
//2. 속성값 설정
img.width=100;
img.height=50;
img.src='../images/google.png';
//3. 1결과물을 body추가
var parent= document.getElementById('loc');
parent.appendChild(img); //body의 뒤에서 작성된다 //img 변수 재사용x, 새로운태그 img2를 만들어줘야한다.
/////////////////////////////////////////////////////////////////////////////////////////////////////////
var img2=document.createElement("img"); //img를 주소로 가지는 새로운태그 img2를 만든다.
//2. 속성값 설정
img2.src='../images/google.png';
img2.width=100;
img2.height=50;
parent.insertBefore(img2, parent.firstChild); //insertBefore는 body(parent)의 앞에 넣고싶을때 쓴다. 그 중에서 firstChild첫번째자식앞에 넣는다
//4. 노드를 선택적 제거
//parent.removeChild(img);
//parent.removeChild(img2);
}
</script>
</head>
<body id="loc">
<!-- 노드하나를 추가하는 작업이다. div도 onclick에의해 클릭할 수 있다. ==> 클릭시, add생성 -->
<div id='here' onclick="add('add함수 호출 결과입니다 ')"> 여기를 클릭해보세요 </div>
</body>
</html>
|
'WEB 기초 > Script' 카테고리의 다른 글
| 21. 함수를 이용한 계산기 (0) | 2018.04.15 |
|---|---|
| 20. 이벤트 & window객체 (0) | 2018.04.15 |
| 18. 게시판 응용하기 (0) | 2018.04.15 |
| 17. 주소 공백 분할(String 내부객체) (0) | 2018.04.12 |
| 16. 다양한 객체변환 (0) | 2018.04.12 |