티스토리 뷰

UI_UX/JavaScript & JQuery

[JavaScript] 4. DOM 탐색

쟌쥰 2020. 1. 26. 14:57 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	
	function searchQS(){
		// css 선택자
		//id가 test인 객체를 찾아 리턴 (All = 전부다) -> 전부다니까 list로 반환
		var doc = document.querySelectorAll("#test");			
		doc[0].innerHTML = "querySelectorAll(css 선택자)";
		
		var doc2 = document.querySelector("#test");
		doc2.style.color="red";
		
	}

	function searchId(){
		var doc = document.getElementById("test");
		doc.innerHTML = "id로 탐색 합니다.";
		doc.style.color = "blue";
	}
	
	function searchName(){
		var doc = document.getElementsByName("test02");
		doc[1].value = "name 속성으로 엘리먼트 탐색!"
	}
	
	function searchTagName(){
		var doc = document.getElementsByTagName("p");
		doc[3].style.color = "green";
		doc[3].innerHTML = "tagName으로 탐색!"
	}
</script>

</head>
<body>
	<p onclick="searchQS();">DOM 탐색 메서드</p>
	
	<p id="test" onclick="searchId();">1.엘리먼트의 id로 탐색 : 
		엘리먼트 하나를 선택 (중복 불가) -> 반환 : 값 하나</p>
		
	<p onclick="searchName();">2.엘리먼트의 name으로 탐색 : 
		엘리먼트 여러개를 선택 -> 반환 : 배열(nodeList)<br/>
		<input type="text" name="test02"/><br/>
		<input type="text" name="test02"/><br/>
		<input type="text" name="test02"/><br/>	
	</p>	
		
	<p onclick="searchTagName();">3.엘리먼트의 tag name으로 탐색 : 
		엘리먼트 여러개를 선택 -> 반환 : 배열(nodeList)</p>
	
</body>
</html>

 

'UI_UX > JavaScript & JQuery' 카테고리의 다른 글

[JavaScript] 6. Number 객체 사용  (0) 2020.01.26
[JavaScript] 5. Object 객체 만들기  (0) 2020.01.26
[JavaScript] 3. 함수의 사용  (0) 2020.01.26
[JavaScript] 2. 변수의 선언  (0) 2020.01.26
[JavaScript] 1. JavaScript 작성방식 3가지!!  (0) 2019.12.21
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
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
글 보관함