[JavaScript] DOM(돔) 구조

JS 관련/JavaScript

[JavaScript] DOM(돔) 구조

씨네 2022. 1. 13. 21:53

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom</title>

<script type="text/javascript">

	function searchId(){
		var doc = document.getElementById("test");
		          //test라는 id를 가진 Node = 객체
		doc.innerHTML = "id로 탐색합니다.";
		doc.style.color = "red";
	}
	
	function searchName(){
		// NodeList = array
		var doc = document.getElementsByName("test");
		doc[1].value = "name 속성으로 엘리먼트 탐색했습니다.";
	}
	
	function searchTagName(){
		var doc = document.getElementsByTagName("p");
		doc[3].innerHTML = "TagName으로 탐색 됩니다.";
		doc[3].style.color = "blue";
	}
	
	function searchQS(){
		var doc = document.querySelectorAll("#test");
		doc[0].innerHTML = "querySelectAll(css표현식)";
		var doc2 = document.querySelector("#test");
		doc2.style.backgroundColor = "green";
	}

</script>

</head>
<body>

	<!-- Document Object Model -->

	<p onclick="searchQS();">DOM 탐색 메소드</p>
	
	<p id="test" onclick="searchId();">1. 엘리먼트의 id로 탐색 : 엘리먼트 하나를 선택 (중복 불가) -> 반환값 : node 하나</p>
	
	<p onclick="searchName();">2. 엘리먼트의 name으로 탐색 : 엘리먼트 여러개를 선택 -> 반환값 : nodeList<br>
		<input type="text" name="test" size="100%"><br>
		<input type="text" name="test" size="100%"><br>
		<input type="text" name="test" size="100%"><br>
	</p>

	<p id="test" onclick="searchTagName();">3. 엘리먼트의 태그이름으로 탐색 : 엘리먼트 여러개를 선택 -> 반환값 : nodeList</p>

</body>
</html>

제일 먼저 실행시 이런 화면이 나옵니다.

function searchId(){
	var doc = document.getElementById("test");
		//test라는 id를 가진 Node = 객체
	doc.innerHTML = "id로 탐색합니다.";
	doc.style.color = "red";
}

1번을 클릭하면 위의 함수로 인해 텍스트가 바뀝니다!

function searchName(){
	// NodeList = array
	var doc = document.getElementsByName("test");
	doc[1].value = "name 속성으로 엘리먼트 탐색했습니다.";
}

2번을 클릭하면 두번째 인풋태그에 해당 글씨가 생깁니다.

doc[1].value 해당 명령을 보면 문서의 1번지에서 value를 불러온다는 이야긴데 배열처럼 0번지부터 시작합니다.

function searchTagName(){
	var doc = document.getElementsByTagName("p");
	doc[3].innerHTML = "TagName으로 탐색 됩니다.";
	doc[3].style.color = "blue";
}

3번을 클릭하면 해당 함수로 인해 파란색 글씨의 해당 텍스트로 바뀝니다.

function searchQS(){
	var doc = document.querySelectorAll("#test");
	doc[0].innerHTML = "querySelectAll(css표현식)";
	var doc2 = document.querySelector("#test");
	doc2.style.backgroundColor = "green";
}

해당 함수는 DOM 탐색 메소드 라는 텍스트에 적용이 되어있네요!

728x90