DOM과 이벤트 처리, 입력 검증 #1

jjinny_0609·2023년 1월 18일

JavaScript

목록 보기

8/9

DOM(Document Object Model)

문서 객체 모델, HTML문서의 계층적인 구조를 트리(tree)로 표현

HTML 문서를 객체로 표현한 것은 DOM
웹브라우저를 객체로 표현한 것을 BOM(Browser Object Model)

HTML 요소 찾는법

- id로 찾기

document.getElementByID("ID값") 사용

- 입력양식 찾기

form태그로 감싸고 id나 name의 값을 호출해 사용

ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script>
		var obj1 = document.getElementByID("target");	//id로 찾기
		var obj2 = document.myform.text1;	//입력양식 찾기
		alert(obj1.value);
		alert(obj2.value);
	</script>
</head>
<body>
	<form name ="myform">
		<input type="text" id="target" name="text1">
		<input type="submit" value="제출" onclick="process()">
	</form>
	
</body>
</html>

- 태그 이름으로 찾기

id 선택자로 여러개 적용해봤자 변수에 저장하기 때문에 마지막 값만 적용됨.
class 선택자, tag 선택자는 배열에 저장하기 때문에 여러개 선택해도 값이 다 적용됨.
document.getElementsByTagName("Tag name");

ex)
<body>
	<ul id = "v">
		<li>List item 1</li>
		<li>List item 2</li>
		<li>List item 3</li>
		<li>List item 4</li>
		<li>List item 5</li>
	</ul>
	<script>
		var list = document.getElementsByTagName('ul')[0];	//getElementsByTagName('ul')[0] -> [0]0번째 index에 있는 값을 가지고옴. 
		console.log(list);
		
		var v = document.getElementById("v");
		console.log(v);
		
		var allItems = document.getElementsByTagName("li");
		console.log(allItems);
		
		for(var i =0; i<allItems.length; i++){
			alert(allItems[i].firstChild.data);
			//firstChild 배열의 첫번째 자식 노드가 반환된다. childNodes[0]과 같음.
		}
	</script>
</body>

DOM 트리 순회

childNodes : 한 요소의 모든 자식 요소에 접근할 수 있다. (배열이 반환된다.)
firstChild : 배열의 첫번째 자식 노드가 반환된다. (childNodes[0]과 같음.)
lastChild : childNodes 배열의 마지막 자식노드가 반환된다. (childNodes[childNodes.length-1]과 같음
parentNode : 현재 노드의 부모 노드를 반환한다.
nextSibling : 현재 노드의 다음 형제 노드를 반환한다.
previousSiblin : 현재 노드의 이전 형제 노드를 반환한다.

ex)
<body>
<div><p>과일리스트</p><ul><li>사과</li><li>바나나</li><li>오렌지</li></ul></div>
<script type="text/javascript">
	var myDiv=document.getElementsByTagName("div")[0];
	console.log(myDiv);
	var myP=myDiv.firstChild;
	console.log(myP);
	var myL=myDiv.lastChild;
	console.log(myL);
	var myUl=myP.nextSibling;
	console.log(myUl);
</script>
</body>

HTML 변경하기

- 내용 변경 :

<p>안녕하세요.</p>

태그안의 내용을 innerHTML을 이용해서 변경가능

- 속성 변경 :

<img src="그림경로" alt="이미지입니다.">

src(속성) alt(속성) 값을 변경

- 스타일 변경 :

css의 스타일을 변경

ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
	<script>
		function get(){
			var val = document.getElementById("ex").innerHTML;//id ex를 자바스크립트로 가지고온당
			alert(val);
		}// 요소의 내용 출력
		function set(v){//값을 호출받기 위해서 매개변수(parameter) v를 선언
			document.getElementById("ex").innerHTML=v;
		// v값안에 '변경되었습니다'라는걸 document.getElementById("ex").innderHTML에 값을 넣음
		}// 요소의 내용 변경
	</script>
</head>
<body>
	<div id="ex">여기가 div로 선언되었습니다.</div>
	<a href="#" onclick="get()">div 요소 내용 출력하기</a><br>
	<a href="#" onclick="set('변경되었습니다.')">div 요소 내용 변경하기</a>
<!-- 	클릭하면 set()안에 있는 '변경되었습니다' 값을 호출한 fucntion set(v)로 값을 넘김   -->
</body>
</html>

끝.

jjinny_0609

뉴비 개발자 입니다. velog 주소 : https://velog.io/@jjinny_0609 Github 주소 :